De widget Ingebedde boekingspagina plaatst uw volledige Barberly-boekingspagina in een iframe binnen een pagina van uw website. Klanten ronden de hele boeking af zonder naar een andere website te worden gestuurd. U kunt de widget gebruiken voor een aparte boekingspagina of toevoegen aan uw homepage, pagina's met diensten of contactpagina.
Een nieuwe instantie maken#
- Log in op uw Barberly-account via portal.barberly.com.
- Ga naar MenuAppsAlle widgets.
- Klik op Ingebedde boekingspagina.
- Kies Nieuwe instantie maken.
- Geef de instantie een naam, bijvoorbeeld "Hoofdboekingspagina".
Instellingen#
- Reservering URL
- De URL van uw Barberly-boekingspagina.
- Hoogte
- De hoogte van de ingebedde pagina, bijvoorbeeld "100%" voor de volledige hoogte of een waarde in pixels zoals "600px".
Stijlen#
- Grensradius
- Hoe rond de hoeken zijn.
- Schaduwdoos
- Een schaduw rond de widget.
De ingebedde pagina past zich aan de schermgrootte aan. Op desktop toont ze de volledige boekingsomgeving, op mobiel past de omgeving zich aan het kleinere scherm aan.
De pagina op uw website plaatsen#
De live preview laat zien hoe de ingebedde pagina eruit komt te zien. Doorloop het boekingsproces om te controleren of alles werkt.
- Kopieer de code uit het onderdeel Kopieer deze code naar uw website.
- Plak deze in de HTML van uw website op de plek waar de boekingspagina moet verschijnen.
- Sla uw website op en publiceer deze.
Voorbeeldcode:
<div id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="embed_262b1c5d48b64c16a9786cd8ebbbecd3" data-container-id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></script>De stappen per platform vindt u in de handleidingen voor WordPress, Wix en Squarespace.
Meerdere instanties#
U kunt meer instanties van de ingebedde pagina maken voor verschillende delen van uw website. Herhaal daarvoor de stappen hierboven onder Ingebedde boekingspagina. Elke instantie heeft een eigen integratiecode.
Een gepubliceerde ingebedde pagina wijzigen#
Open de instantie onder MenuAppsAlle widgets, breng uw wijzigingen aan en sla op. De ingebedde pagina op uw website wordt automatisch bijgewerkt, dus u hoeft de code op uw website niet aan te passen.
Als de pagina niet goed wordt weergegeven#
- Zorg dat de container breed en hoog genoeg is voor de boekingsomgeving.
- Controleer op CSS-conflicten met de stijlen van uw website.
- Controleer of de boekings-URL klopt.
- Zorg dat geen content security policy op uw website het iframe blokkeert.