No edit summary |
No edit summary |
||
| Line 87: | Line 87: | ||
[[File:Get booking button widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/54/Get_booking_button_widget_code_redesigned.png]] | [[File:Get booking button widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/54/Get_booking_button_widget_code_redesigned.png]] | ||
<br><br> | <br><br> | ||
:2. Voeg deze toe aan de HTML-code <body> van uw website (of een andere plaats op uw websiteplatform die is ontworpen voor het invoegen van HTML JavaScript iFrame-code).<br> | :2. Voeg deze toe aan de HTML-code <body> van uw website (of een andere plaats op uw websiteplatform die is ontworpen voor het invoegen van HTML JavaScript iFrame-code).<br> | ||
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Let op!''' Verschillende websitebouwers/platforms kunnen verschillende manieren hebben om HTML-code toe te voegen. Controleer eerst of uw website het invoegen van HTML JavaScript-code ondersteunt.</span> | <span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Let op!''' Verschillende websitebouwers/platforms kunnen verschillende manieren hebben om HTML-code toe te voegen. Controleer eerst of uw website het invoegen van HTML JavaScript-code ondersteunt.</span> | ||
:'''Hier vindt u tutorials voor verschillende populaire websitebouwers:''' | :'''Hier vindt u tutorials voor verschillende populaire websitebouwers:''' | ||
:::[ | :::*[[Special:MyLanguage/WordPress_integration |Wordpress]] | ||
:::[ | :::*[[Special:MyLanguage/Shopify |Shopify]] | ||
:::[ | :::*[[Special:MyLanguage/Joomla_integration |Joomla]] | ||
:::[ | :::*[[Special:MyLanguage/Squarespace |Squarespace]] | ||
:::*[[Special:MyLanguage/Weebly |Weebly]] | |||
:::[ | :::*[[Special:MyLanguage/Go_Daddy |Go Daddy]] | ||
:::[ | :::*[[Special:MyLanguage/SITE123_integration |SITE123]] | ||
:::[ | |||
;[https://simplydemowidgets.mozello.com/ Bekijk hoe widgets er op uw website kunnen uitzien] | ;[https://simplydemowidgets.mozello.com/ Bekijk hoe widgets er op uw website kunnen uitzien] | ||
Revision as of 12:51, 22 September 2025
- Waarom u onze widgets zou moeten gebruiken
- Videohandleiding beschikbaar
iFrame-widget
- 1. Neem de iFrame-code van uw boekingspagina in Instellingen -> Instellingen boekingswidgets -> iFrame-widget -> Widgetcode ophalen.
- 2. Voeg deze toe aan de HTML-code <body> van uw website (of een andere plaats op uw websiteplatform die is ontworpen voor het invoegen van HTML JavaScript iFrame-code).
Let op! Verschillende websitebouwers/platforms kunnen verschillende manieren hebben om HTML-code toe te voegen. Controleer eerst of uw website het invoegen van HTML JavaScript-code ondersteunt.
- Hier zijn tutorials voor verschillende populaire websitebouwers:
Widgets met vooraf gedefinieerde dienst, aanbieder, categorie of locatie
Met deze functie kunt u iframe-code genereren die specifiek is voor uw dienst, aanbieder, categorie of locatie. Als u bijvoorbeeld 2 diensten A en B hebt en u kiest dienst A als vooraf gedefinieerd, wordt de widget geopend op die dienst, waarbij de stap voor het kiezen van de dienst wordt overgeslagen. Deze functie kan handig zijn als u alleen bepaalde diensten op een specifieke pagina van uw website wilt weergeven. De stappen voor het genereren van de code zijn dezelfde als hierboven, alleen kiest u in de instellingen van de widget het item dat u vooraf wilt definiëren.
Widgets met vooraf gedefinieerde klantgegevens
U kunt nu ook een widget maken voor een bepaalde klant met zijn/haar gegevens al ingevuld.
- 1. Selecteer gewoon het gewenste widgettype in Instellingen -> Instellingen boekingswidgets, stel het ontwerp in en klik op Widgetcode ophalen.
- 2. Er verschijnt een pop-upvenster met de code. Klik op het onderste gedeelte om de details van de klantcode te bekijken.
- Kopieer de hoofdcode, voeg het onderste gedeelte toe (aan de vooraf gedefinieerde sectie) en vervang de vooraf gedefinieerde klantnaam, het vooraf gedefinieerde e-mailadres van de klant en het vooraf gedefinieerde telefoonnummer van de klant door de benodigde klantgegevens.
- 3. U krijgt dan de volgende code:
<script src="//simplybook.me/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/companyname.simplybook.me","theme":"belle","theme_settings":{"sb_base_color":"#FF6969","body_bg_color":"#ffffff","dark_font_color":"#494949","light_font_color":"#ffffff","sb_busy":"#dad2ce","sb_available":"#d3e0f1"},"timeline":"flexible","datepicker":"top_calendar","is_rtl":false,"app_config":{"predefined": {"client": {
"name": "Mary",
"email": "mary@gmail.com",
"phone": "+1234567890"
}}
}});</script>
- 4. Als gevolg hiervan worden de gegevens van deze klant vooraf ingevuld in de widget en hoeft de klant deze niet meer op te geven.
Widgets voor klantlogin, pakketten, lidmaatschappen, cadeaubonnen
Let op! Dit werkt momenteel alleen met iFrame-widgets en niet met widgets voor boekingsknoppen en contactknoppen.
Als u een of meer van deze functies gebruikt, kan het nodig zijn om een widget toe te voegen waarmee uw klanten de optie op uw website kunnen gebruiken.
Dit kan eenvoudig worden gedaan door het overeenkomstige "navigate" -element toe te voegen aan de widgetcode:
- Klantlogin - "navigate":"client/sign-in"
- Pakketten - "navigate":"packages"
- Lidmaatschappen - "navigate":"membership"
- Cadeaubonnen - "navigate":"gift-card"
Voorbeeldcode voor de widget Gift Cards:
<script src="//simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/demo.simplybook.it","navigate":"gift-card","theme":"default","theme_settings":{"timeline_show_end_time":"0","timeline_modern_display":"as_slots","sb_base_color":"#0cadef","display_item_mode":"block","booking_nav_bg_color":"#80d0f2","body_bg_color":"#f7f7f7","dark_font_color":"#494949","light_font_color":"#ffffff","btn_color_1":"#5e7da7","sb_company_label_color":"#ffffff","hide_img_mode":"0","show_sidebar":"1","sb_busy":"#dad2ce","sb_available":"#0cadef"},"timeline":"modern","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>
Widget voor boekingsknop
- 1. Neem de code van de boekingsknop van uw boekingspagina in Instellingen -> Instellingen boekingswidget -> Boekingsknop -> Widgetcode ophalen.
- 2. Voeg deze toe aan de HTML-code <body> van uw website (of een andere plaats op uw websiteplatform die is ontworpen voor het invoegen van HTML JavaScript iFrame-code).
Let op! Verschillende websitebouwers/platforms kunnen verschillende manieren hebben om HTML-code toe te voegen. Controleer eerst of uw website het invoegen van HTML JavaScript-code ondersteunt.
- Hier vindt u tutorials voor verschillende populaire websitebouwers:
- Widgets met vooraf gedefinieerde dienst, aanbieder, categorie of locatie.
Met deze functie kunt u iframe-code genereren die specifiek is voor de dienst, aanbieder, categorie of locatie die u hebt. Als u bijvoorbeeld 2 diensten A en B hebt en u kiest dienst A als vooraf gedefinieerd, wordt de widget geopend op die dienst, waarbij de stap voor het kiezen van de dienst wordt overgeslagen. Deze functie kan handig zijn als u alleen bepaalde diensten op een specifieke pagina van uw website wilt weergeven. De stappen voor het genereren van de code zijn dezelfde als hierboven, alleen kiest u in de instellingen van de widget het item dat u vooraf wilt definiëren.
Widget voor boekingen en contact
- 1. Schakel de contactwidget in via Aangepaste functies -> Voor ontwikkeling.
- 2. Neem de code van de boekingsknop van uw boekingspagina door naar Instellingen te gaan naast deze aangepaste functie of in Instellingen in het menu aan de linkerkant -> Boekingswidgetinstellingen -> Contactwidget -> Widgetcode ophalen.
- 3. Voeg deze toe aan de HTML-code <body> van uw website (of een andere plaats op uw websiteplatform die is ontworpen voor het invoegen van HTML JavaScript iFrame-code).
Let op! Verschillende websitebouwers/platforms kunnen verschillende manieren hebben om HTML-code toe te voegen. Controleer eerst of uw website het invoegen van HTML JavaScript-code ondersteunt.
- Hier zijn tutorials voor verschillende populaire websitebouwers:
Widget met beoordelingen
Wilt u beoordelingen die uw klanten op de boekingspagina achterlaten toevoegen aan uw website?
Volg gewoon deze instructies:
- 1. Ga naar Instellingen -> Instellingen boekingswidgets -> Widget beoordelingen.
- 2. Op deze pagina kunt u het thema selecteren, kleuren instellen, het aantal beoordelingen dat u wilt weergeven bepalen en aangeven of u wilt dat uw klanten beoordelingen kunnen toevoegen via de widget.
- 3. Als het ontwerp is ingesteld, klikt u op de knop Widgetcode ophalen, kopieert u de code en plakt u deze op de gewenste plaats op uw website.
Gefeliciteerd! De widget is nu klaar en uw beoordelingen worden gepubliceerd en bijgewerkt op uw website!
