Widgets for your own website - Revision history

Admin at 20:07, 9 February 2026

2026-02-09T20:07:21Z

← Older revision		Revision as of 20:07, 9 February 2026
Line 4:		Line 4:
	{{#seo:		{{#seo:
	\|title=Widgets for your own website - SimplyBook.me		\|title=Widgets for your own website - SimplyBook.me
	\|description=~~Add SimplyBook~~.me widgets ~~to your website for direct client bookings~~. ~~Customize them to fit your brand~~. ~~Learn more here!~~		\|description=Embed booking widgets on any website. Generate iframe code, customize appearance. Button, popup, or inline widgets. Works with WordPress, Shopify, Joomla.
	\|titlemode=append		\|titlemode=append
	\|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, widget, widgets, integration, website integration, website widgets, widgets for website		\|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, widget, widgets, integration, website integration, website widgets, widgets for website

Admin at 12:44, 22 September 2025

2025-09-22T12:44:12Z

Show changes

Admin at 12:30, 23 June 2025

2025-06-23T12:30:08Z

← Older revision		Revision as of 12:30, 23 June 2025
Line 12:		Line 12:

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

Admin: Marked this version for translation

2025-05-19T12:23:17Z

Marked this version for translation

← Older revision		Revision as of 12:23, 19 May 2025
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>

Admin at 12:23, 19 May 2025

2025-05-19T12:23:12Z

Show changes

Admin at 17:35, 16 January 2025

2025-01-16T17:35:08Z

← Older revision		Revision as of 17:35, 16 January 2025
Line 1:		Line 1:
	{{#seo:		{{#seo:
	\|title=Widgets for your own website - SimplyBook.me		\|title=Widgets for your own website - SimplyBook.me
			\|description=Add SimplyBook.me widgets to your website for direct client bookings. Customize them to fit your brand. Learn more here!
	\|titlemode=append		\|titlemode=append
	\|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, widget, widgets, integration, website integration, website widgets, widgets for website		\|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, widget, widgets, integration, website integration, website widgets, widgets for website

Admin: /* Reviews Widget */

2025-01-02T11:20:39Z

Reviews Widget

← Older revision		Revision as of 11:20, 2 January 2025
Line 143:		Line 143:
	Just follow these instructions:		Just follow these instructions:
	: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. 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>
	[[File:Reviews widget path ~~new upd~~.png\|1200px \| center\|link=https://help.simplybook.me/images/1/11/~~Reviews_widget_path_new_upd~~.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. 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.
	[[File:Reviews widget ~~setup~~.png \| center]]		[[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. 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.
	[[File:~~Reviews~~ widget code v3.png \| center]]		[[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!		Congratulations! Widget is now ready, your reviews will be published and updated on your website!
	<br><br>		<br><br>

Admin: /* Booking and Contact Button Widget */

2025-01-02T11:18:47Z

Booking and Contact Button Widget

← Older revision		Revision as of 11:18, 2 January 2025
Line 115:		Line 115:
	<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;">[[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>.
	[[File:Contact widget enable path ~~new cf~~.png \| center]]		[[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 in <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;">Contact widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>		: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>
	[[File:~~Booking widgets~~ path ~~new navigation~~.png\|1200px\|border\| center]]		[[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>
	[[File:Contact widget path ~~step3 new navigation~~.png\|1200px\|border\|center]]		[[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 ~~setup~~.png \| center]]		[[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. 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>
Line 137:		Line 137:

	;[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]


	=Reviews Widget=		=Reviews Widget=

Admin: /* Booking Button Widget */

2025-01-02T11:14:06Z

Booking Button Widget

← Older revision		Revision as of 11:14, 2 January 2025
Line 85:		Line 85:
	<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. 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>
	[[File:Booking ~~widgets~~ path ~~new navigation~~.png\|1200px \| center]]		[[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>
	[[File:Booking button widget path ~~step 3 new navigation~~.png\|1200px\|~~border~~\|~~center~~]]		[[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>
	[[File:~~Create booking~~ button ~~widget v3~~.png \| center]]		[[File:Booking button label redesigned.png\|1200px\|center\|link=https://help.simplybook.me/images/d/dc/Booking_button_label_redesigned.png]]
	<br><br>		<br><br>
	[[File:~~Booking~~ button widget code.png \| center]]		[[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>
	: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>
Line 111:		Line 111:
	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.
	<br><br>		<br><br>

	=Booking and Contact Button Widget=		=Booking and Contact Button Widget=
	<br><br>		<br><br>

Admin: /* iFrame Widget */

2024-12-09T14:40:10Z

iFrame Widget

← Older revision		Revision as of 14:40, 9 December 2024
Line 16:		Line 16:
	<br><br>		<br><br>
	:1. Take the iFrame 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 widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>		:1. Take the iFrame 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 widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
	[[File:Booking ~~widgets~~ path ~~new navigation~~.png\|1200px \| center]]		[[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>
	[[File:~~Create iframe~~ widget.png \| center]]		[[File:Booking widget design path redesigned.png\|1200px \| center\|link=https://help.simplybook.me/images/3/37/Booking_widget_design_path_redesigned.png]]
	<br><br>		<br><br>
	[[File:~~Iframe~~ widget code.png \| center]]		[[File:Copy widget code redesigned.png\|1200px \| center\|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png ]]
	<br><br>		<br><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>		: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>
Line 41:		Line 41:
	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.

	[[File:~~Iframe widget~~ predefined ~~options~~.png\| center]]		[[File:Widget predefined values redesigned.png\|1200px\| center\|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]]
	<br><br>		<br><br>

Line 48:		Line 48:
	Now you can also create a widget for some particular client with his/her details already filled in.		Now you can also create a widget for some particular client with his/her details already filled in.
	:1. Just select the widget type you need in <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>, set the design and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>		:1. Just select the widget type you need in <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>, set the design and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
	[[File:~~Create iframe~~ widget.png \| center]]		[[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>
	: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.
	[[File:~~Iframe widget predefined~~ client.png \|border\| center]]		[[File:Predefined client details redesigned.png\|1200px \|border\| center\|link=https://help.simplybook.me/images/3/3a/Predefined_client_details_redesigned.png]]
	<br><br>		<br><br>
	:3. You will get the code like this:<br>		:3. You will get the code like this:<br>
Line 81:		Line 81:
	<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>

	=Booking Button Widget=		=Booking Button Widget=
	<br><br>		<br><br>