{"id":2837,"date":"2025-03-25T14:54:12","date_gmt":"2025-03-25T14:54:12","guid":{"rendered":"https:\/\/www.lcn.com\/support\/?post_type=ht_kb&p=2837"},"modified":"2025-09-09T13:30:16","modified_gmt":"2025-09-09T13:30:16","slug":"how-to-add-a-simplybook-widget-to-your-own-website","status":"publish","type":"ht_kb","link":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-a-simplybook-widget-to-your-own-website\/","title":{"rendered":"How To Add a SimplyBook Widget to Your Own Website\u00a0"},"content":{"rendered":"\n

In this article, we will guide you through creating and adding<\/strong> a variety of SimplyBook widgets<\/strong> to your website. Adding a booking widget to your website is a great way to streamline appointment scheduling <\/strong>and improve user experience<\/strong>. By offering a seamless booking process, you can increase conversions, save time, and enhance customer satisfaction.<\/p>\n\n\n\n

<\/div>\n\n\n\n

How to Create an iFrame Widget<\/em> <\/h2>\n\n\n\n
<\/div>\n\n\n\n

An iframe widget<\/strong> is a small application or feature embedded within a webpage using an <iframe> (inline frame) HTML element. It allows you to display external content\u2014such as booking forms, maps, videos, or social media feeds\u2014directly on your website without requiring users to leave the page. <\/p>\n\n\n\n

<\/div>\n\n\n\n

Step One<\/h2>\n\n\n\n
<\/div>\n\n\n\n

To begin, you can find the iFrame code for your booking page by navigating to Settings<\/strong>, then Booking Widgets Settings<\/strong>. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step Two<\/h2>\n\n\n\n
<\/div>\n\n\n\n

On the page you are taken to, select iFrame Widget<\/strong>. Here, you can choose a widget design and tailor it to your preferences. Once you have finished designing the widget, select Save & Get widget code <\/strong>in blue near the top of the page. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step Three<\/h2>\n\n\n\n
<\/div>\n\n\n\n

In the window that appears, you can then copy the code by selecting the Copy<\/strong> button. <\/p>\n\n\n\n

Once copied, you can insert it into the <body> section of your website’s HTML or any designated area on your website platform for adding HTML JavaScript iFrame code. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

NOTE<\/strong>: Different website builders and platforms may have different methods for adding HTML code. Be sure to check if your website supports inserting HTML JavaScript code.<\/p><\/div>\n\n\n\n

<\/div>\n\n\n\n

How to Create Widgets with a Predefined Service, Provider, Category or Location<\/em> <\/h2>\n\n\n\n
<\/div>\n\n\n\n

This feature lets you generate iFrame code for a specific service, provider, category, or location. For example, if you offer two services, A and B, and set service A as predefined, the widget will open directly on that service, skipping the selection step. This can be useful for displaying only certain services on specific pages of your website. The code generation process remains the same\u2014simply select the item you want to predefine in the widget settings. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

How to Create Widgets with Predefined Client Details<\/em> <\/h2>\n\n\n\n
<\/div>\n\n\n\n

You can now create a widget for a specific client with their details pre-filled. <\/p>\n\n\n\n

<\/div>\n\n\n\n

Step One <\/h2>\n\n\n\n
<\/div>\n\n\n\n

To begin, choose the widget type in Settings<\/strong> < Booking Widgets Settings<\/strong>. Here, you can customize the design, then select Save &<\/strong> Get Widget Code<\/strong>. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step Two<\/h2>\n\n\n\n
<\/div>\n\n\n\n

A pop-up window will appear with the code. Click on the bottom section to access the client code details<\/strong>. <\/p>\n\n\n\n

Copy the main code, add the bottom section to the predefined section, and replace Predefined client name<\/strong>, Predefined client email<\/strong>, and Predefined client phone<\/strong> with the relevant client details. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Step Three<\/h2>\n\n\n\n
<\/div>\n\n\n\n

Once completed, a code block will be generated for you. <\/p>\n\n\n\n

<\/div>\n\n\n\n
<script src=\"\/\/simplybook.me\/v2\/widget\/widget.js\"><\/script> <script>var widget = new SimplybookWidget({\"widget_type\":\"iframe\",\"url\":\"https:\\\/\\\/companyname.simplybook.me\",\"theme\":\"belle\",\"theme_settings\":{\"sb_base_color\":\"#FF6969\",\"body_bg_color\":\"#ffffff\",\"dark_font_color\":\"#494949\",\"light_font_color\":\"#ffffff\",\"sb_busy\":\"#dad2ce\",\"sb_available\":\"#d3e0f1\"},\"timeline\":\"flexible\",\"datepicker\":\"top_calendar\",\"is_rtl\":false,\"app_config\":{\"predefined\": {\"client\": { \n\"name\": \"Mary\", \n\"email\": \"mary@gmail.com\", \n\"phone\": \"+1234567890\" \n}} }});<\/script> <\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Step Four <\/h2>\n\n\n\n
<\/div>\n\n\n\n
This will automatically pre-fill the client’s details in the widget, so they won\u2019t need to enter them manually. <\/p>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
How to Create Widgets for\u202fClient Login,\u202fPackages,\u202fMemberships and\u202fGift Cards<\/em> <\/h2>\n\n\n\n
<\/div>\n\n\n\n
NOTE<\/strong>: This feature is only currently compatible with iFrame widgets and does not work with booking button or contact button widgets.\u00a0<\/p><\/div>\n\n\n\n
<\/div>\n\n\n\n
If you are using one or more of these features, you may need to add a widget that enables your clients to access the option on your website. <\/p>\n\n\n\n
This can be easily done by adding the corresponding “navigate”<\/strong> element to the widget code. <\/p>\n\n\n\n