Installatie-handleiding

De Couverto-widget is een stuk code dat je in je website plakt. Hier staan stap-voor-stap instructies voor de meest gebruikte platforms. De hele installatie duurt minder dan 10 minuten.

Stap 1: je embed-code vinden

Log in op je Couverto dashboard. Ga naar Instellingen → Widget. Daar vind je een persoonlijke embed-code die er zo uitziet:

<div id="couverto-widget"></div>
<script
  src="https://widget.couverto.nl/v1/embed.js"
  data-restaurant-id="jouw-restaurant-id"
  defer
></script>
Tip: Kopieer altijd de code rechtstreeks vanuit je dashboard. Je restaurant-id is uniek. Gebruik nooit een voorbeeld-id.

HTML-website

Heb je een zelfgebouwde website of een CMS dat directe HTML-toegang geeft? Plak de embed-code in de <body> van de pagina, op de plek waar het formulier moet verschijnen:

<!-- Reserveringspagina -->
<section class="reserveren">
  <h2>Reserveer een tafel</h2>

  <!-- Couverto widget -->
  <div id="couverto-widget"></div>
  <script
    src="https://widget.couverto.nl/v1/embed.js"
    data-restaurant-id="jouw-restaurant-id"
    defer
  ></script>
</section>

WordPress

1

Maak een nieuwe pagina aan

Ga in het WordPress-beheergebied naar Pagina's → Nieuwe pagina. Noem de pagina bijv. "Reserveren".

2

Voeg een HTML-blok toe

Klik in de Gutenberg-editor op het + icoon. Zoek naar "Aangepaste HTML" (Custom HTML) en voeg het blok toe.

3

Plak de embed-code

Plak je embed-code in het HTML-blok. Klik op Voorbeeld om te controleren, en daarna op Publiceren.

Klassieke editor: Gebruik je de klassieke WordPress-editor (niet Gutenberg)? Schakel over naar de HTML-weergave (tabblad "Tekst") en plak de code daar.

Wix

1

Open de pagina in de Wix-editor

Ga naar je Wix-dashboard en klik op Website bewerken. Navigeer naar de pagina waar je het reserveringsformulier wilt plaatsen.

2

Voeg een HTML-element toe

Klik op het + icoon links in de editor. Ga naar Meer → HTML-iframe en sleep het element naar de juiste positie.

3

Voer de code in

Dubbelklik op het HTML-element. Kies Code (niet URL) en plak je embed-code. Klik op Bijwerken om op te slaan.

4

Stel de afmetingen in

Vergroot het HTML-element zodat het formulier volledig zichtbaar is. Doorgaans minimaal 600px breed en 500px hoog. Je kunt de hoogte later aanpassen als je ziet hoe het formulier eruitziet.

Squarespace

1

Open de pagina in de editor

Ga in Squarespace naar Pagina's en klik op de pagina die je wil bewerken. Klik op Bewerken.

2

Voeg een Code-blok toe

Klik op de locatie waar je de widget wilt plaatsen. Kies in het blokken-menu voor Code.

3

Plak de embed-code

Plak je embed-code in het Code-blok. Zorg dat de optie HTML weergeven is ingeschakeld (standaard aan). Klik op Toepassen.

Squarespace versie 7.0: Ga naar Blokken → Meer → Code. De stappen zijn vergelijkbaar.

Webflow

1

Voeg een Embed-element toe

In de Webflow Designer, open het Add panel (Shift+A). Zoek naar Embed en sleep het element naar je canvas.

2

Voeg de code in

Dubbelklik op het Embed-element en plak je embed-code. Klik op Save & Close.

3

Publiceer de site

Klik op Publish om de wijzigingen live te zetten. Test daarna het formulier via de live URL (niet in de designer preview).

Widget-parameters

Je kunt de widget aanpassen met extra parameters op het script-element:

<script
  src="https://widget.couverto.nl/v1/embed.js"
  data-restaurant-id="jouw-restaurant-id"
  data-lang="nl"              // nl of en
  data-primary-color="#0F0F0E"  // hoofdkleur (hex)
  data-privacy-url="https://jouwrestaurant.nl/privacy"
  defer
></script>

Floating vs. inline modus

Standaard wordt de widget als floating popup weergegeven (aanbevolen). Er verschijnt een knop op je pagina en bij klik opent een modaal venster. Je kunt ook kiezen voor de inline modus: het reserveringsformulier verschijnt dan direct ingebed op de pagina.

<!-- Popup-modus: knop opent een modal -->
<button id="couverto-trigger">Reserveer een tafel</button>
<script
  src="https://widget.couverto.nl/v1/embed.js"
  data-restaurant-id="jouw-restaurant-id"
  data-mode="popup"
  data-trigger="couverto-trigger"
  defer
></script>
Vragen? Kom je er niet uit? Stuur ons een bericht of check het Help Center. We helpen je live als dat nodig is.