SimplyBook.me

Widgets for your own website: Difference between revisions

← Older edit
VisualWikitext
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
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:




:Why you should use our Widgets [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
<!--T:2-->
:Why you should use our Widgets <p><youtube>ngAxW1uTOk4</youtube></p>
<br><br>
<br><br>
:Video tutorial available [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]]
:Video tutorial available <p><youtube>8mi4MCmE_qg</youtube></p>
<br><br>
<br><br>


<!--T:3-->
__FORCETOC__
__FORCETOC__
</translate>
</translate>
<translate>
<translate>
<!--T:4-->
=iFrame Widget=
=iFrame Widget=
<br><br>
<br><br>
Line 30: Line 34:
<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>
:'''Here are tutorials for several popular website builders:'''
:'''Here are tutorials for several popular website builders:'''
:::*[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]


<!--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>


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:7-->
This feature allows you to generate iframe code specifically for service, provider, [[Special:MyLanguage/Service_Categories_custom_feature |category]] or [[Special:MyLanguage/Multiple_Locations_custom_feature |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 66:
<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 81:
<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>
==Widgets for [[Client_Login_custom_feature|Client Login]], [[Packages_custom_feature|Packages]], [[Membership_custom_feature|Memberships]], [[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]==
<!--T:12-->
==Widgets for [[Special:MyLanguage/Client_Login_custom_feature|Client Login]], [[Special:MyLanguage/Packages_custom_feature|Packages]], [[Special:MyLanguage/Membership_custom_feature|Memberships]], [[Special:MyLanguage/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;">'''Please note!''' It currently works with iFrame widgets only and does not work with booking button and contact button widgets.</span><br>
Line 82: Line 93:
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>
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>
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:
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:
*<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;">[[Special:MyLanguage/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;">[[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;">[[Special:MyLanguage/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;">[[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;">[[Special:MyLanguage/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;">[[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;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;">"navigate":"gift-card"</span>
<br><br></translate>
<br><br></translate>
<translate>
<translate>
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<br><br>
<!--T:13-->
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<br><br>
</translate>
</translate>
<code><script src="//simplybook.it/v2/widget/widget.js"></script>
<code><script src="//simplybook.it/v2/widget/widget.js"></script>
Line 94: Line 106:
<br><br>
<br><br>
<translate>
<translate>
<!--T:14-->
=Booking Button Widget=
=Booking Button Widget=
<br><br>
<br><br>
Line 101: Line 114:
</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 123:
</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>
:'''Here are tutorials for several popular website builders:'''
:'''Here are tutorials for several popular website builders:'''
:::*[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]


<!--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 141:
</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, [[Special:MyLanguage/Service_Categories_custom_feature |category]] or [[Special:MyLanguage/Multiple_Locations_custom_feature|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>


</translate>
</translate>
<translate>
<translate>
<!--T:19-->
=Booking and Contact Button Widget=
=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. Enable <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Contact_Widget_custom_feature |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>.
[[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 142: Line 159:
</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 149: Line 167:
<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>
:'''Here are tutorials for several popular website builders:'''
:'''Here are tutorials for several popular website builders:'''
:::*[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]


<!--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>
Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website"