De boekingswidget op je website plaatsen
Je zet de boekingswidget op je eigen website door een korte code te plakken. Er zijn twee manieren om hem te tonen: als zwevende bubble-knop, of ingesloten in een pagina. Je kunt ook een gehoste boekingspagina delen zonder je website aan te raken.
Waar vind je het
Backoffice › Instellingen › Widget Beheer › Integratie › Widget Integratiecode
Wat het doet
- Bubbelmodus – "Zwevende knop rechtsonder". De knop opent het boekingspaneel bovenop je pagina. Het best als je boeken op elke pagina mogelijk wilt maken.
- Ingesloten Modus – "Inline widget in pagina-inhoud". De widget verschijnt waar je de code plakt, bijvoorbeeld op een pagina "Reserveringen".
- Gehoste pagina – de knop Openen in nieuw tabblad boven het voorbeeld opent je widget op een eigen 10Seat-pagina. Dat paginaadres kun je gebruiken als directe boekingslink (voor sociale media of een link-in-bio). Locatiewidgetpagina opent een volledige paginaweergave van dezelfde widget.
Kleuren en knoptekst worden geladen uit je opgeslagen widgetinstellingen. Als je je huisstijl later wijzigt, hoef je de code niet te vervangen.
Zo stel je het in
- Zorg dat de juiste locatie is geselecteerd in de kop.
- Ga naar Instellingen › Widget Beheer en open de groep Integratie.
- Kopieer onder Widget Integratiecode de code voor Bubbelmodus of Ingesloten Modus (of Alles Kopiëren).
- Plak hem in je website:
- Bubble: één keer, op elke pagina (de meeste websitebouwers hebben een instelling "eigen code / footercode").
- Ingesloten: in een HTML- of embedblok op de pagina waar de widget moet verschijnen.
- Laat het noscript-blok "Aangedreven door 10Seat" staan dat bij de code zit. Het is bedoeld voor zoekmachines.
- Publiceer je site en test een boeking.
Zo open je de bubble met je eigen knop
Onder Openen via je eigen knop (optioneel) krijg je een snippet waarmee een bestaande knop "Boeken" op je site de bubble kan openen. Voeg het attribuut data-tenseat-open toe aan die knop, of laat je webontwikkelaar de open/sluit-functies aanroepen die daar staan. De bubblecode moet ook op de pagina staan.
Zo link je naar een vooraf ingevulde boeking
Je kunt deze toevoegen aan het adres van een pagina met de widget:
?10seat_code=your-code– opent een specifieke experience (gebruik de Marketingcode van de experience).10seat_date=2026-12-24,10seat_guests=4,10seat_time=19:30– selecteer vooraf een datum (jaar-maand-dag), groepsgrootte en tijd.
Goed om te weten
- Eén code werkt voor één locatie. Elke locatie heeft zijn eigen code.
- Voor meerdere locaties op één site gebruik je de multi-locatie widget (zie het gerelateerde artikel).
- De code bevat instellingen die voorkomen dat plug-ins voor paginasnelheid hem aanpassen. Verwijder ze niet.
Problemen oplossen
De widget verschijnt niet op mijn website De code is in een tekstblok geplakt in plaats van in een HTML-/codeblok, of een cache- of "JavaScript optimaliseren"-plug-in heeft hem gewijzigd. Plak hem opnieuw in een codeblok en sluit hem uit van scriptoptimalisatie. Wis de cache van de site.
De bubble verschijnt twee keer of de pagina laadt de widget twee keer De bubblecode is op twee plekken geplakt (bijvoorbeeld in het thema en op de pagina). Houd hem op één plek.
Mijn eigen knop "Boeken" doet niets De bubblecode ontbreekt op die pagina, of het attribuut is toegevoegd aan een element dat niet de knop is. Controleer beide.
De widget toont het verkeerde restaurant De code hoort bij een andere locatie. Selecteer de juiste locatie in de kop en kopieer de code opnieuw.
De kleuren op mijn site komen niet overeen met wat ik heb opgeslagen Sla je wijzigingen eerst op met Thema opslaan en laad dan je site opnieuw. Browsers tonen soms kort de oude kleuren uit de cache.