Uw Profiel en Widget Instellen

Dit is de cruciale stap: het invullen van uw basisgegevens en het live zetten van de reserveringswidget op uw website.

Stap 1: Basisinstellingen in het Dashboard

Voordat u de Widget installeert: Zorg ervoor dat uw restaurant openingsuren en het tafelschema zijn geconfigureerd. Anders kunnen gasten niet reserveren.

Log in op uw dashboard en doorloop de volgende basisstappen:

  • Vestigingsprofiel: Vul uw adres, telefoonnummer, en een korte omschrijving in. Upload een mooie profielfoto.
  • Openingstijden: Configureer op welke dagen en uren u reservaties wilt ontvangen (lunch/diner).
  • Tafelschema: Definieer uw tafels en de maximumcapaciteit van uw restaurant.

Stap 2: De Reserveringswidget Installeren

De widget is de interface waarmee uw gasten reserveren. U hebt twee opties voor de installatie:

Deze methode is aanbevolen omdat de widget volledig integreert met uw website en de beste gebruikerservaring biedt.

Externe Vereisten (Dependencies)

Om de styling en functionaliteit van de widget volledig te garanderen (inclusief correcte weergave op mobiel en de tabbladen), moeten de volgende scripts en stylesheets in uw website geladen worden:

CSS / Styling Bestanden (in de <head> plaatsen)

Deze scripts zorgen voor de Bootstrap-styling, de pictogrammen en de meertalige weergave van de widget.

<!-- Bootstrap Styling, Icons, and Widget Styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://reservatie.eu/css/widget-bundle.min.css">
JavaScript Bestanden (vóór </body> plaatsen)

Deze scripts zijn noodzakelijk voor interactieve elementen zoals de tabs op deze pagina en pop-ups.

<!-- Vereist voor interactieve Bootstrap elementen (zoals Tabs) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
Let Op!: Als deze bestanden ontbreken, functioneren de tabs en de Bootstrap-elementen op de help-pagina niet, en wordt de widget mogelijk niet correct weergegeven.
Code Insluiten (Stap 1/2)

Plaats deze div-tag op de plek waar de widget moet verschijnen op uw website (meestal op een '/reserveren' pagina). Vervang [UW-UNIEKE-ID] door de ID uit uw dashboard.

<div id="reliance-reservation-widget"
    data-api-base="https://reservatie.eu/"
    data-restaurant-id="[UW-UNIEKE-ID]">
</div>

Dit is de container voor de widget.

Script Insluiten (Stap 2/2)

Plaats deze script-tag net vóór de afsluitende </body>-tag van uw website.

<script src="https://reservatie.eu/js/reliance-widget.min.js" defer></script>

Dit laadt de benodigde functionaliteit en activeert de widget in de div-container.

De IFrame-methode is eenvoudiger maar minder flexibel en wordt over het algemeen afgeraden.

Minder Betrouwbaar: IFrame's kunnen problemen geven met mobiele weergave en zoekmachineoptimalisatie.
IFrame Code
<iframe src="https://reservatie.eu/widget/[UW-UNIEKE-ID]"
    width="100%"
    height="700"
    frameborder="0"
    allowfullscreen></iframe>

Pas de 'width' en 'height' waarden indien nodig aan, maar houd 700px als minimum hoogte.

Terug naar Beheerdersgids