Embedding a widget into your website or Facebook page allows your clients to interact with your business via WellnessLiving directly from your website or Facebook page. You can also embed a button that links to a widget on your website.
The Custom Schedule, Standard Schedule, Lead Capture, FitBUILDER, Review, Appointment, Book-a-spot, Event, Store, Staff, and CAASI AI agent widgets can be embedded on your website.
While standard widgets (such as Schedule, Store, and Appointment) are embedded inline within a specific page section, appearing as part of your site’s content, the CAASI widget works differently.
CAASI is a floating, site-wide assistant that appears as a small launcher icon over your website layout, similar to a chat bubble. Instead of taking up space in your content, CAASI loads globally and can appear on every page. Because of this, the widget code is usually placed once in your site’s header or footer, rather than within a specific page body.
The Custom Schedule, Lead Capture, FitBUILDER, and CAASI AI agent widgets can be customized further to best fit your specific business needs. The remaining widgets — Standard Schedule, Review, Appointment, Event, Store, Staff — use a predefined skin.
Key tips
Before you get started, here are a few quick tips to ensure your widget looks and functions great:
Use HTTPS for a secure connection— Use
https://to keep your site safe and ensure the widget loads smoothly.
Test on mobile and desktop – After embedding, preview the widget on different devices to check the layout.
Ensure proper display— After embedding, confirm the widget functions and displays correctly on your website.
Allow widgets on your website
Before you can add a WellnessLiving widget to your website, you need to let WellnessLiving know where it's allowed to be embedded. This means adding your website address (like www.yourbusiness.com) so the widget can appear properly on your site.
To allow widgets on your website:
Open the App Drawer
then go to Setup > Web Applications > Client View Settings.Scroll down to Website Integration Settings.
Under Website Address, enter the website where you want to display the widget.
Example: www.yourbusiness.com
If you have multiple websites, separate them with a comma:
Example: myfitnessstudio.com
If your website has subpages or subdomains, you can allow them all by adding an asterisk:
Example: *.yourbusiness.com (this includes pages like blog.yourbusiness.com or shop.yourbusiness.com).
Click Save.
Copy the code to embed a widget
To embed a widget on your website:
Open the App Drawer
then click View All > Setup > Website Widgets.When you’re embedding the CAASI AI agent widget:
Open the App Drawer
then click View All > CAASI.
Click Open CAASI Communication Hub.
On the side menu, click Application Settings
then click Channel Settings > Webchat.
At the top of the screen, click Deploy.
Proceed to step 4.
On the Website Widgets menu, click the type of widget that you want to embed into your website.
If you select Custom Schedule or Lead Capture, select the custom widget that you want to embed, then click Embed code.
If you have multiple locations, under Locations, select the location the widget should include information about.
If applicable, under URL of your page, enter the direct URL of the page where you want the widget to be placed.
Under Website domains, enter the domain of the website(s) you want to add the widget to. You can add as many webpages as you want, if you separate each entry with a comma (for example, wellnessliving.com, google.com, apple.com).
Copy the code from the Widget code or Script box.
Once you’ve copied the widget code:
Follow the instructions for your website builder below.
If your builder isn’t listed, look for an HTML
<>, Embed, or Custom Code block.Paste your widget code into that section and save your changes.
Embed a widget using a website builder
We provide step-by-step instructions for adding your widget to popular website builders like WordPress, Shopify, Wix, Squarespace, and GoDaddy. To get started, you’ll first need to copy the widget code. The exact steps may vary slightly depending on the type of widget you’re embedding.
For example, the Standard Schedule widget is a popular choice for displaying and booking appointments.
For detailed instructions on how to copy the code for each widget type, see Widgets.
WordPress
For standard widgets
Standard widgets include the Custom Schedule, Standard Schedule, Lead Capture, FitBUILDER, Review, Appointment, Book-a-spot, Event, Store, and Staff widgets.
To add widget code for a standard widget to a WordPress site:
Edit the page or post where you want the widget to appear.
Click the + button and add a Custom HTML block.
Paste your iframe embed code inside the block.
Click Preview to see the widget.
Click Update or Publish to make it live.
For CAASI
To add widget code for CAASI to a WordPress site:
Open WordPress and click Appearance > Theme File Editor.
In the list, click footer.php.
Paste the widget code after </body>.
Click Update File, then open your webpage to confirm that CAASI appears on all pages.
Shopify
For standard widgets
Standard widgets include the Custom Schedule, Standard Schedule, Lead Capture, FitBUILDER, Review, Appointment, Book-a-spot, Event, Store, and Staff widgets.
To add widget code for a standard widget to a Shopify site:
From your Shopify admin, go to Online Store > Pages.
Edit the page you want to update or create a new one.
Switch to HTML view (click the
<>icon).
Paste your iframe code.
Click Save and preview your page.
For CAASI
To add widget code for CAASI to a Shopify site:
From your Shopify admin, go to Online Store > Themes.
Click Customize.
Click Theme settings.
Click Custom CSS.
Paste in your widget code.
Click Save.
Wix
For standard widgets
Standard widgets include the Custom Schedule, Standard Schedule, Lead Capture, FitBUILDER, Review, Appointment, Book-a-spot, Event, Store, and Staff widgets.
To add widget code for a standard widget to a Wix site:
Open the Wix Editor and navigate to the page where you want to add the widget.
Click Add (+) > Embed > Embed a Widget.
Paste your iframe code in the code box.
Resize the box to at least 1050px tall.
Click Publish.
For CAASI
To add widget code for CAASI to a Wix site:
Open Wix and click Settings > Custom Code.
Select Add Code to All Pages.
Under Body End or All Pages Footer, paste the widget code.
Save your changes, then open your webpage to confirm that CAASI appears on all pages.
Squarespace
For standard widgets
Standard widgets include the Custom Schedule, Standard Schedule, Lead Capture, FitBUILDER, Review, Appointment, Book-a-spot, Event, Store, and Staff widgets.
To add widget code for a standard widget to a Squarespace site:
Edit the page and click an insert point to add a Code Block.
Paste your iframe code into the block.
Click Apply, then Save the page.
View your site to confirm the widget appears correctly.
For CAASI
To add widget code for CAASI to a Squarespace site:
Open Squarespace and click Settings > Advanced > Code Injection.
In the Footer section, paste the widget code.
Save your changes, then open your webpage to confirm that CAASI appears on all pages.
GoDaddy Website Builder
To add your widget code to a GoDaddy site:
Go to your GoDaddy Website Builder and open your site editor.
Click Add Section and choose HTML.
Paste your iframe code into the HTML box.
Click Done, then Publish your site.
Embed the widget as a button on your website
The Lead Capture, Review, Appointment, Book-a-spot, Store, and Staff widgets can be linked from your website via an embedded button.
To embed a widget button on your website:
Click the App Drawer
then click View All > Setup > Website Widgets.On the Website Widgets menu, click the type of widget that you want to embed into your website.
If you select Lead Capture, select the custom widget that you want to embed, then click Embed code.
If you have multiple locations, under Locations, select the location the widget should include information about.
If applicable, under URL of your page, enter the direct URL of the page where you want the widget to be placed.
Under Website domains, enter the domain of the webpage(s) you want to add the widget to. You can add as many webpages as you want, if you separate each entry with a comma (for example, wellnessliving.com, google.com, apple.com).
Copy the code from the Link code box and paste it into your website code where you want the widget button to appear.
Ensure that your widget button is embedded and functioning properly.
Embed a widget on your Facebook page
Note: The Standard Schedule, Lead Capture, Review, Appointment, Event, and Store widgets can be embedded on your Facebook page. You must have 2,000 or more likes on your Facebook page to be able to embed a widget successfully using this method.
To embed a widget on your Facebook page:
Open the App Drawer
then click View All > Setup > Website Widgets.On the Website Widgets menu, click the type of widget that you want to embed into your website.
If you select Lead Capture, select the custom widget that you want to embed, then click Embed code.
If you have multiple locations, under Locations, select the location the widget should include information about.
Click Add to Facebook Page, then sign in to your Facebook account.
In the Facebook Pages list, select the Facebook page where you want your widget to be displayed.
Click Add Page Tab. The widget is now added to the sidebar on your Facebook page.
Ensure that your widget is embedded and functioning properly.