Please note that due to the circumstances around COVID-19, we are seeing a significant increase in the number of help requests to our Customer Success group and we're working to respond as quickly as possible. We do strongly encourage you to take advantage of all the free resources we have available. Thank you for your patience and understanding. 

Community

Adding the Booking Widget to your website

The SimplePractice Booking Widget is an excellent tool for making it easy for potential new clients to find your Availability and request an appointment online.

This guide covers the following: 

Note: This feature is only available on the Professional Plan through SimplePractice.


How to add the Booking Widget to your practice website

The Booking Widget code can be found by going to My Account > Settings > Booking Widget.

We put together a guide for some common website builders - Brighter Vision, TherapySites, Squarespace, and Weebly

Keep in mind that our Customer Success Team can’t help with troubleshooting non-SimplePractice products. If you’re having any trouble with your website management system, please reach out to their support team to best help resolve any issues you might have or if you have questions about embedding the widget on your website.

Before diving in, keep in mind that: 

  • New clients will be able to schedule an appointment right from the Booking Widget on your website.
  • Existing clients will be redirected to your Client Portal so they can log in and then select an appointment. This way, their appointment is connected to their existing client file. This guide can walk existing clients through how to request appointments through the Client Portal: Getting started guides for clients: How to request appointments

Here are the website builders we'll cover in this guide:


Brighter Vision

The easiest and best way to add this to your Brighter Vision website is to contact their support desk and ask them to do it for you. Here's what we recommend:

  • Copy the code from your Booking Widget page. You can find this by going to My Account > Settings > Booking Widget. The code is there, ready for you to copy and email to support@brightervision.com.
  • In the email, copy and paste this into it so they will understand what to do:
    Please make the Booking Widget match my existing website design by removing the 'spwidget-button' class and adding in the appropriate button class from my website. Then, please add this to my CTA Block widget so this button will show up on every page.
  • Send the email & wait for them to add this for you.

TherapySites

  • From your TherapySites Pages menu, select or create the page where you’d like to embed your Booking Widget.
    The TherapySites edit menu
  • Click on the area of the page where you’d like the widget embedded and click anywhere in the body.
    You can select where to embed the widget on TherapySites
  • Click Source in the editing popup.
    Clicking the Source button in the upper left corner will let you view an dedit the source code
  • Paste in the code from your Booking Widget page where you want this to live, then click OK.
    Paste the booking widget code directly into the source code
  • Click Save in the popup.
    Click the orange SAVE button after you paste the code
  • Click Save at the top of the page to publish the changes. 
    Click the blue SAVE button to publish the changes

Need more help with your TherapySites? Contact their Customer Care Team for more help.


Squarespace

  • From your Squarespace Pages menu, select or create the page where you’d like to embed your Booking Widget. 
  • Click on the area of the page where you’d like the widget embedded and click the sign (Add Block).
    Click the plus sign on the Squarespace Pages menu to choose an area for the widget
  • Enter 'Code' in the search bar, and select the Code </> icon.
    Selecting the Code icon will allow you to view and edit the source code
  • Remove default code from text box and paste the code from your Booking Widget page > click Apply.
    Insert your new code and click APPLY to aply these changes
  • Click Save. Once you exit editing mode and refresh the page, the embedded widget will display.

Note: If you or your clients notice an issue with the widget not loading after adding it, please disable Ajax Loading.

You can learn more about using the Code Block on Squarespace here: Using the Code Block on the Squarespace.


Weebly

  • From your Weebly site editor, click and drag the Embed Code button from the toolbar into the desired section of your page.
    Drag the Embed Code button to the desired location for the widget
  • Resize margins as needed.
  • Click within margin to set custom HTML > click Edit Custom HTML.
    You can edit the Custom HTML when you click with the margins of a page
  • Paste embed code > click outside of embed box to set changes.
  • Click Publish.
    Click the blue Publish button to apply your edits

Note: Embed code won’t take up the entire page as previewed. Consider resizing it accordingly after publishing and refreshing the page. 

Read more about creating widgets and embedding code with Weebly.


Wordpress using Elementor:

  • Add the CSS and HTML of the Booking Widget to wherever you want it on a given page. However, don't add the JavaScript here. We suggest trying this because WordPress typically strips out JavaScript when going back and forth between the Visual editor and the Code editor for a given page.
  • We suggest adding JavaScript to this page (or the site in general) by copying this code snipped into a Widget and putting this Widget in the footer of the page/site. The way our Booking Widget is built, they do not need to be right next to each other, only that the JavaScript has to come after the button itself in the page.

Note: We recommend that you consult with WordPress support and/or Elementor support directly for more information about how to embed your Booking Widget into your particular website.  


Webflow

Follow these steps to embed your Booking Widget code in your Webflow site: 

  • Copy the SimplePractice Booking Widget code 
  • Navigate to your Webflow project
  • Click Add Elements > Components > Embed 
  • Place the element in a container or anywhere else you'd like
  • Paste the Booking Widget code in the HTML Embed Code Editor window
  • Click Save & Close 

You'll see a placeholder in your project, but you should be able to see the Booking Widget in your live site after you publish your changes. To learn more about embedding code onto your Webflow project, see this resource from Webflow University: Custom code embed


Working with Wix, WordPress, and GoDaddy

Wix currently limits how custom code is added to a website. While you can add it to your site and it will be functional for clients, it won't display as a full-screen modal experience for your clients.

There are many different ways the code can be applied that change depending on how you’re using WordPress. Since there isn’t a generic set of steps that can be applied to all WordPress sites, we recommend that you ask your website administrator or reach out to WordPress support for help.

For GoDaddy, we recommend reaching out to their support team for assistance on embedding the Booking Widget to your site. We've received feedback from customers that the widget isn't able to fully expand on sites hosted through GoDaddy, but you can work with one of their representatives to enter the code so it appears correctly.


Customizing your widget

We don't recommend customizing this unless you're very comfortable editing HTML and CSS yourself. The most common reason you'd want to customize this is to better match your site's design and your existing button styles. Here's how:

  • First, find your existing button classes, and copy them.
    Right-click on the button, and click Inspect (using Chrome) 
    Right-click your desired button and select Inspect to view the button's code
  • Then, double click in the 'class' attribute field, then copy the content here.
    Copy what's between the two quotation marks after class=, known as the class attribute
  • Adjust your embed code by replacing the class 'spwidget-button' with what you just copied.
    Insert the class attribute you just copied to replace the spwidget-button class attribute
  • Next, remove the unnecessary parts of your code—the 'style' and 'div'—so the all that is left is the button itself, the 'a' tag, and the 'script' tag.
    Remove the style and div tags from your code
  • Your Booking Widget should now match your existing styles.

We built this text to say Request Appointment, but you can change this whatever you'd like. 

Note: This is a general guide — these steps may not work for some sites for various reasons. If that's the case, we suggest editing the built-in styles we provide to more closely match your site design.


The client's experience

Here's what a new client will experience when they click your Booking Widget once embedded:

  • They will be able to select from the services you've chosen to offer new clients from the Booking Widget flyout window:requestappointment.simplepractice.bookingwidget.png

Note: Existing clients will be directed to sign into your Client Portal to request an appointment. See What is the Client Portal? to learn more. 

  • New clients will then have the opportunity to select a location. If you have one location, they will select that one to move to the next step:
    selectlocation.simpractice.bookingwidget.png
  • Next, they can figure out which date and time will work for them based off of your Availability settings. Depending on the Availability you have set, they can view and select a date in an upcoming month by using the navigation arrows. Once they select a date, they can then view available appointments by time of day.
    selectdateandtime.simplepractice.bookingwidget.png

Note: For more information about setting your Availability, please see this guide: Managing your Availability. If clients only see the option to Call to book, this means that you will need to manage your Availability so that clients can schedule appointments online.

  • To choose the date and time that works best for their schedule, your client should click the time to select and request their appointment. 

  • Finally, they will enter their information. They will need to enter their name, email address, and phone number to be able to successfully request an appointment:

    yourinformation.simplepractice.bookingwidget.png

For more information about adding the Booking Widget to your website, managing your Availability, setting up Online Booking, and sharing documents, please see these guides:

Have more questions? Submit a request