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="#2D5F3F"  // hoofdkleur (hex)
  data-privacy-url="https://jouwrestaurant.nl/privacy"
  defer
></script>

Inline vs. popup modus

Standaard wordt de widget inline weergegeven — het formulier verschijnt direct op de pagina. Je kunt ook kiezen voor een popup-knop: er verschijnt dan een knop ("Reserveer een tafel") en bij klik opent een modaal venster.

<!-- 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.