SimplyBook.me

Widgets for your own website: Difference between revisions

← Older edit
VisualWikitext
No edit summary
No edit summary
 
Line 34: 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-->
<!--T:5-->
Line 52: Line 51:


<!--T:7-->
<!--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, [[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-->
<!--T:8-->
Line 88: Line 87:
<translate>
<translate>
<!--T:12-->
<!--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 [[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 94: 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>
<!--T:13-->
<!--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;">[[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 128: Line 127:
<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-->
<!--T:17-->
Line 145: Line 143:
<!--T:18-->
<!--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>


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