Widgets for your own website/nl: Difference between revisions

From SimplyBook.me
Newer edit →
VisualWikitext
Created page with ":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 <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">de vooraf gedefinieerde klantnaam</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">het vooraf gedefinieerde e-mailadres van de klant</span> en <spa..."
 
Created page with "__FORCETOC__"
Line 59: Line 59:
}});</script></code>
}});</script></code>
<br><br>
<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
: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.
:4. As a result the details of this client will be pre-filled in the widget and there will be no need for client to provide them.
[[File:Predefined client result view.png|center]]
[[File:Predefined client result view.png | center]]
<br><br>
<br><br>
</div>
== Widgets voor [[Client_Login_custom_feature|klantlogin]], [[Packages_custom_feature|pakketten]], [[Membership_custom_feature|lidmaatschappen]], [[Coupons_and_Gift_Cards_custom_feature|cadeaubonnen]] ==
<div lang="en" dir="ltr" class="mw-content-ltr">
==Widgets for [[Client_Login_custom_feature|Client Login]], [[Packages_custom_feature|Packages]], [[Membership_custom_feature|Memberships]], [[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]==
<br><br>
<br><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' It currently works with iFrame widgets only and does not work with booking button and contact button widgets.</span><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Let op!''' Dit werkt momenteel alleen met iFrame-widgets en niet met widgets voor boekingsknoppen en contactknoppen.</span><br>
<br><br>
<br><br>
If you are using one or several of these features it may be necessary to add a widget that will allow your clients to use the option on your website.<br>
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.<br>
It can be done in a simple way by adding of the corresponding <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigate"</span> element to the widget code:
Dit kan eenvoudig worden gedaan door het overeenkomstige <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigate"</span> -element toe te voegen aan de widgetcode:
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature|Client Login]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"client/sign-in"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature|Klantlogin]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"client/sign-in"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Packages_custom_feature|Packages]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"packages"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Packages_custom_feature|Pakketten]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"packages"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Membership_custom_feature|Memberships]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"membership"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Membership_custom_feature|Lidmaatschappen]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"membership"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"gift-card"</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Cadeaubonnen]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"gift-card"</span>
<br><br>
<br><br>
</div>
Voorbeeldcode voor de widget <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span>:<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<br><br>
</div>
<code><script src="//simplybook.it/v2/widget/widget.js"></script>
<code><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></code>
<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></code>
<br><br>
<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
= Widget voor boekingsknop =
=Booking Button Widget=
<br><br>
<br><br>
:1. Take the booking button code of your booking page in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widget settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking button</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
:1. Neem de code van de boekingsknop van uw boekingspagina in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instellingen</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instellingen boekingswidget</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Boekingsknop</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Widgetcode ophalen.</span>
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Booking button widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b3/Booking_button_widget_path_redesigned.png]]
[[File:Booking button widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b3/Booking_button_widget_path_redesigned.png]]
<br><br>
<br><br>
Line 97: Line 88:
[[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>
</div>
: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>  
<div lang="en" dir="ltr" class="mw-content-ltr">
<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>
:2. Insert it to the HTML code <body> of your website (or any other place in your website platform designed for inserting HTML JavaScript iFrame code).<br>  
:'''Hier vindt u tutorials voor verschillende populaire websitebouwers:'''
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' Different website builders/platforms may have various ways to add HTML code, you should check first whether your website supports inserting HTML JavaScript code.</span>
:::[https://help.simplybook.me/index.php/WordPress_integration *Wordpress]
:'''Here are tutorials for several popular website builders:'''
:::[https://help.simplybook.me/index.php/Shopify *Shopify]
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::[https://help.simplybook.me/index.php/Joomla_integration *Joomla]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::[https://help.simplybook.me/index.php/Wix_integration *Wix]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::[https://help.simplybook.me/index.php/Squarespace *Squarespace]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::[https://help.simplybook.me/index.php/Weebly *Weebly]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::[https://help.simplybook.me/index.php/SITE123_integration *SITE123]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
;[https://simplydemowidgets.mozello.com/ Bekijk hoe widgets er op uw website kunnen uitzien]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
</div>




<div lang="en" dir="ltr" class="mw-content-ltr">
;Widgets met vooraf gedefinieerde dienst, aanbieder, categorie of locatie.
;Widgets with predefined service, provider, category or location.
Met deze functie kunt u iframe-code genereren die specifiek is voor de dienst, aanbieder, [[Custom_Features#Service_Categories |categorie]] of [[Custom_Features#Multiple_Locations |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.
This feature allows you to generate iframe code specifically for service, provider, [[Custom_Features#Service_Categories |category]] or [[Custom_Features#Multiple_Locations |location]] you have. For example, if you have 2 services A and B and you choose service A as predefined, the widget will open on that service, skipping the step of choosing the service. This feature may be useful if you need to display only certain services on a specific page on your website. The steps to generate the code are the same as above, only in the settings of the widget, choose the item you need to predefine.
<br><br>
<br><br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Widget voor boekingen en contact =
=Booking and Contact Button Widget=
<br><br>
<br><br>
:1. Enable <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Contact_Widget |Contact Widget]]</span> in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">For Development</span>.
:1. Schakel <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Contact_Widget |de contactwidget]]</span> in via <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Aangepaste functies</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Voor ontwikkeling</span>.
[[File:Contact widget enable path redesigned.png|1200px| center|link=https://help.simplybook.me/images/8/8c/Contact_widget_enable_path_redesigned.png]]
[[File:Contact widget enable path redesigned.png|1200px| center|link=https://help.simplybook.me/images/8/8c/Contact_widget_enable_path_redesigned.png]]
<br><br>
<br><br>
:2. Take the booking button code of your booking page by navigating to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> near this custom feature or in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> in the left-side menu -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Contact widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
:2. Neem de code van de boekingsknop van uw boekingspagina door naar <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instellingen</span> te gaan naast deze aangepaste functie of in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instellingen</span> in het menu aan de linkerkant -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Boekingswidgetinstellingen</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Contactwidget</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Widgetcode ophalen.</span>
[[File:Contact widget settings path redesigned.png|1200px|border| center|link=https://help.simplybook.me/images/0/09/Contact_widget_settings_path_redesigned.png]]
[[File:Contact widget settings path redesigned.png|1200px|border| center|link=https://help.simplybook.me/images/0/09/Contact_widget_settings_path_redesigned.png]]
<br><br>
<br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Contact widget design path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png]]
[[File:Contact widget design path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png]]

Revision as of 12:25, 19 May 2025

Other languages:


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:
*Wordpress
*Shopify
*Joomla
*Wix
*Squarespace
*Weebly
*Go Daddy
*SITE123
Bekijk hoe widgets er op uw website kunnen uitzien



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:



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:
*Wordpress
*Shopify
*Joomla
*Wix
*Squarespace
*Weebly
*Go Daddy
*SITE123
Bekijk hoe widgets er op uw website kunnen uitzien


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. Insert it to the HTML code <body> of your website (or any other place in your website platform designed for inserting HTML JavaScript iFrame code).

Please note! Different website builders/platforms may have various ways to add HTML code, you should check first whether your website supports inserting HTML JavaScript code.

Here are tutorials for several popular website builders:
Check how widgets can look like on your website

Reviews Widget



Wish to add reviews your clients leave on the booking page to your website?
Just follow these instructions:

1. Please go to Settings -> Booking widgets settings -> Reviews widget.



2. On the page you will be able to select the theme, set colors, decide on the number of reviews you wish to display and whether you wish your clients to be able to add reviews using the widget.



3. And now, when design is set, just click on Get widget code button, copy the code and insert it to your website to the desired place.


Congratulations! Widget is now ready, your reviews will be published and updated on your website!

Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website/nl&oldid=21529"