Widgets for your own website: Difference between revisions

No edit summary
Marked this version for translation
Line 1: Line 1:
<languages/>
<languages/>
<translate>
<translate>
<!--T:1-->
{{#seo:
{{#seo:
|title=Widgets for your own website - SimplyBook.me
|title=Widgets for your own website - SimplyBook.me
Line 10: Line 11:




<!--T:2-->
:Why you should use our Widgets [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
:Why you should use our Widgets [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
<br><br>
<br><br>
Line 15: Line 17:
<br><br>
<br><br>


<!--T:3-->
__FORCETOC__
__FORCETOC__
</translate>
</translate>
<translate>
<translate>
<!--T:4-->
=iFrame Widget=
=iFrame Widget=
<br><br>
<br><br>
Line 39: Line 43:
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]


<!--T:5-->
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
<br><br></translate>
<br><br></translate>
<translate>
<translate>
<!--T:6-->
==Widgets with predefined service, provider,category or location==
==Widgets with predefined service, provider,category or location==
<br>
<br>


<!--T:7-->
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.
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.


<!--T:8-->
[[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]]
<br><br></translate>
<br><br></translate>
<translate>
<translate>


<!--T:9-->
==Widgets with predefined client details==
==Widgets with predefined client details==
<br>
<br>
Line 58: Line 67:
<br><br></translate>
<br><br></translate>
<translate>
<translate>
<!--T:10-->
:2. You will see a pop-up window with the code, click on the bottom part to get client code details.
:2. You will see a pop-up window with the code, click on the bottom part to get client code details.
:Please copy the main code, add bottom part to it(to predefined section) and replace <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client name</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client email</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client phone</span> with the necessary client details.
:Please copy the main code, add bottom part to it(to predefined section) and replace <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client name</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client email</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client phone</span> with the necessary client details.
Line 72: Line 82:
<br><br></translate>
<br><br></translate>
<translate>
<translate>
<!--T:11-->
: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.
: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></translate>
<br><br></translate>
<translate>
<translate>
<!--T:12-->
==Widgets for [[Client_Login_custom_feature|Client Login]], [[Packages_custom_feature|Packages]], [[Membership_custom_feature|Memberships]], [[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]==
==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>
Line 88: Line 100:
<br><br></translate>
<br><br></translate>
<translate>
<translate>
<!--T:13-->
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<br><br>
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<br><br>
</translate>
</translate>
Line 94: Line 107:
<br><br>
<br><br>
<translate>
<translate>
<!--T:14-->
=Booking Button Widget=
=Booking Button Widget=
<br><br>
<br><br>
Line 101: Line 115:
</translate>
</translate>
<translate>
<translate>
<!--T:15-->
[[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 109: Line 124:
</translate>
</translate>
<translate>
<translate>
<!--T:16-->
: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>  
: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>  
<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;">'''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>
Line 121: Line 137:
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]


<!--T:17-->
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]


Line 126: Line 143:
</translate>
</translate>
<translate>
<translate>
<!--T:18-->
;Widgets with predefined service, provider, category or location.
;Widgets with predefined service, provider, category or location.
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.
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.
Line 132: Line 150:
</translate>
</translate>
<translate>
<translate>
<!--T:19-->
=Booking and Contact Button Widget=
=Booking and Contact Button Widget=
<br><br>
<br><br>
Line 142: Line 161:
</translate>
</translate>
<translate>
<translate>
<!--T:20-->
[[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>
Line 158: Line 178:
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]


<!--T:21-->
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]


</translate>
</translate>
<translate>
<translate>
<!--T:22-->
=Reviews Widget=
=Reviews Widget=
<br><br>
<br><br>