Een verhuurwinkel op je Webflow-site met één Embed-element
In het kort
- Sleep een Embed-element op je pagina en plak twee regels code.
- Klanten kiezen data en boeken zonder je site te verlaten.
- Je Webflow-ontwerp blijft zoals het is. Verhuur loopt via Be-Bookable.
Waarom verhuren via je eigen Webflow-site
Je hebt je Webflow-site met zorg ontworpen. Met de winkel op een van de pagina's boeken klanten binnen dat ontwerp, niet op een aparte site.
Eén element
De winkel is één Embed-element dat je in elke sectie kunt plaatsen.
Je ontwerp eromheen
Je navigatie, secties en footer blijven rond de winkel.
Altijd actueel
Producten, prijzen en beschikbaarheid komen rechtstreeks uit Be-Bookable.
Zo voeg je Be-Bookable toe aan Webflow
- Open de widgetinstellingen. Ga in je Be-Bookable-dashboard naar Integraties en klik op Widget instellen bij Website-embed.
- Kies Webflow. Klik op de tegel Webflow. Het venster laat zien waar de code komt: “Sleep een ‘Embed’-element op je pagina en plak de code hieronder.”
- Kopieer de code. Klik op Kopieer code. Het zijn twee regels: een plek voor je winkel en het Be-Bookable-script.
- Voeg je domein toe. Vul het domein van je website in bij Toegestane domeinen en sla het op. Werkt je site zowel met als zonder www, voeg dan allebei toe.
- Controleer of het werkt. Plak het adres van de gepubliceerde pagina en klik op Verifieer. Be-Bookable opent de pagina en laat weten of de winkel daar live staat. Vanaf dan komen boekingen via je site binnen in je orderoverzicht net als elke andere order.
De code is op elk platform hetzelfde. Wat de widget allemaal doet, staat bij de websitewidget uitgelegd.
Wat draait waar
Je Webflow-site blijft van jou. Be-Bookable doet alleen het verhuurdeel:
| Wat | Waar het staat |
|---|---|
| Pagina's, CMS-collecties en ontwerp | Je Webflow-site |
| Verhuurproducten, prijzen en beschikbaarheid | Be-Bookable, beheerd in je dashboard |
| Boekingen en betalingen | Be-Bookable en Mollie, in je orderoverzicht |
| Order- en statusmails | Be-Bookable, in je eigen woorden |
Zie het in actie
De Brightside-demowinkel op een voorbeeldwebsite: een categoriepagina en een productpagina met de boekingskalender, onder het eigen menu van de site.
Veelgestelde vragen
Moet ik kunnen programmeren?
Nee. Je kopieert twee regels uit je Be-Bookable-dashboard en plakt ze in een Embed-element. Je hoeft er niets aan te veranderen.
Werkt de winkel in de Webflow-preview?
Controleer het op de gepubliceerde site. Ook Verifieer heeft het gepubliceerde adres nodig, omdat het de pagina opent zoals een bezoeker dat doet.
Kan ik aanpassen hoe de winkel eruitziet?
De ingebedde winkel gebruikt het logo en de kleuren die je in Be-Bookable hebt ingesteld en vult de breedte van de plek waar je de code plakt. Er zijn geen aparte stijlinstellingen voor de embed.
Hoe betalen klanten?
Online betalingen lopen via Mollie. Omdat Mollie niet binnen een andere website opent, gaat de betaling open in een nieuw tabblad. Daarna ziet de klant de bedankpagina in de winkel op jouw site. Blokkeert de browser het nieuwe tabblad, dan gaat de hele pagina naar Mollie. Meer hierover bij online betalingen.
Kan ik boekingen volgen in Google Analytics?
Ja, als je site Google Tag Manager gebruikt. De winkel stuurt de events view_item, add_to_cart en purchase naar de dataLayer van je pagina, maar alleen op domeinen in je lijst met toegestane domeinen.