SimplyBook.me

Widgets for your own website/nl: Difference between revisions

← Older edit
VisualWikitext
Created page with "__FORCETOC__"
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 3: Line 3:




:Waarom u onze widgets zou moeten gebruiken [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
:Waarom u onze widgets zou moeten gebruiken <p><youtube>ngAxW1uTOk4</youtube></p>
<br><br>
<br><br>
:Videohandleiding beschikbaar [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]]
:Videohandleiding beschikbaar <p><youtube>8mi4MCmE_qg</youtube></p>
<br><br>
<br><br>


Line 21: Line 21:
<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 zijn tutorials voor verschillende populaire websitebouwers:'''
:'''Hier zijn tutorials voor verschillende populaire websitebouwers:'''
:::[https://help.simplybook.me/index.php/WordPress_integration *Wordpress]
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::[https://help.simplybook.me/index.php/Shopify *Shopify]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::[https://help.simplybook.me/index.php/Joomla_integration *Joomla]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::[https://help.simplybook.me/index.php/Wix_integration *Wix]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::[https://help.simplybook.me/index.php/Squarespace *Squarespace]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::[https://help.simplybook.me/index.php/Weebly *Weebly]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]
:::[https://help.simplybook.me/index.php/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]
Line 35: Line 34:
<br>
<br>


Met deze functie kunt u iframe-code genereren die specifiek is voor uw dienst, aanbieder, [[Custom_Features#Service_Categories |categorie]] of [[Custom_Features#Multiple_Locations |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.
Met deze functie kunt u iframe-code genereren die specifiek is voor uw dienst, aanbieder, [[Special:MyLanguage/Service_Categories_custom_feature |categorie]] of [[Special:MyLanguage/Multiple_Locations_custom_feature |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.


[[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]]
[[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]]
Line 62: Line 61:
[[File:Predefined client result view.png|center]]
[[File:Predefined client result view.png|center]]
<br><br>
<br><br>
== Widgets voor [[Client_Login_custom_feature|klantlogin]], [[Packages_custom_feature|pakketten]], [[Membership_custom_feature|lidmaatschappen]], [[Coupons_and_Gift_Cards_custom_feature|cadeaubonnen]] ==
== Widgets voor [[Special:MyLanguage/Client_Login_custom_feature|klantlogin]], [[Special:MyLanguage/Packages_custom_feature|pakketten]], [[Special:MyLanguage/Membership_custom_feature|lidmaatschappen]], [[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|cadeaubonnen]] ==
<br><br>
<br><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>
<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>
Line 68: Line 67:
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>
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>
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:
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|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;">[[Special:MyLanguage/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|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;">[[Special:MyLanguage/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|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;">[[Special:MyLanguage/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|Cadeaubonnen]]</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;">[[Special:MyLanguage/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>
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>
Voorbeeldcode voor de widget <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span>:<br><br>
<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>
Line 91: Line 90:
<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:'''
:::[https://help.simplybook.me/index.php/WordPress_integration *Wordpress]
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::[https://help.simplybook.me/index.php/Shopify *Shopify]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::[https://help.simplybook.me/index.php/Joomla_integration *Joomla]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::[https://help.simplybook.me/index.php/Wix_integration *Wix]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::[https://help.simplybook.me/index.php/Squarespace *Squarespace]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::[https://help.simplybook.me/index.php/Weebly *Weebly]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]
:::[https://help.simplybook.me/index.php/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]
Line 104: Line 102:


;Widgets met vooraf gedefinieerde dienst, aanbieder, categorie of locatie.
;Widgets met vooraf gedefinieerde dienst, aanbieder, categorie of locatie.
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.
Met deze functie kunt u iframe-code genereren die specifiek is voor de dienst, aanbieder, [[Special:MyLanguage/Service_Categories_custom_feature |categorie]] of [[Special:MyLanguage/Multiple_Locations_custom_feature |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.
<br><br>
<br><br>


= Widget voor boekingen en contact =
= Widget voor boekingen en contact =
<br><br>
<br><br>
: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>.
:1. Schakel <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Contact_Widget_custom_feature |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>
Line 115: Line 113:
[[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 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]]
<br><br>
<br><br>
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
<br><br>
<br><br>
: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). <br>
: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). <br>
<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>
<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>
:'''Here are tutorials for several popular website builders:'''
:'''Hier zijn tutorials voor verschillende populaire websitebouwers:'''
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]
:::*[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">
= Widget met beoordelingen =
=Reviews Widget=
<br><br>
<br><br>
Wish to add reviews your clients leave on the booking page to your website?<br>
Wilt u beoordelingen die uw klanten op de boekingspagina achterlaten toevoegen aan uw website?<br>
Just follow these instructions:
Volg gewoon deze instructies:
:1. Please go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Reviews widget.</span>
:1. Ga naar <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instellingen</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instellingen boekingswidgets</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Widget beoordelingen.</span>
[[File:Reviews widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/5b/Reviews_widget_path_redesigned.png]]
[[File:Reviews widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/5b/Reviews_widget_path_redesigned.png]]
<br><br>
<br><br>
: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.  
: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.  
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
<br><br>
<br><br>
:3. And now, when design is set, just click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code</span> button, copy the code and insert it to your website to the desired place.
:3. Als het ontwerp is ingesteld, klikt u op de knop <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Widgetcode ophalen</span>, kopieert u de code en plakt u deze op de gewenste plaats op uw website.
[[File:Get reviews widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/f/f8/Get_reviews_widget_code_redesigned.png]]
[[File:Get reviews widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/f/f8/Get_reviews_widget_code_redesigned.png]]
<br>
<br>
Congratulations! Widget is now ready, your reviews will be published and updated on your website!
Gefeliciteerd! De widget is nu klaar en uw beoordelingen worden gepubliceerd en bijgewerkt op uw website!
<br><br>
<br><br>
</div>
Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website/nl"