How to add the Booking Widget to your website

You can embed the SimplePractice Booking Widget directly into your existing website. This feature makes it easy for potential new clients to view your availability and request an appointment.

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

For more information about the Booking Widget and what clients will experience, please see this guide: What is the SimplePractice Booking Widget?

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

We know the embedding process can be confusing, so we put together a how-to guide for some common website builders - Brighter Vision, TherapySites, Squarespace, and Weebly

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

  • 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 client file.

Let's get to it:

Note: The Booking Widget does not 100% work with Wix because their system imposes certain restrictions on customization. While you can add it to your site, and it will be functional, it won't display as a full-screen modal experience for your clients.

Note: When it comes to WordPress, there are many different ways the code can be applied, which 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.

To embed the widget on your Brighter Vision website:

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:

  1. 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
  2. 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.
  3. Send the email & wait for them to add this for you!

To embed the widget on your TherapySites website:

  1. From your TherapySites Pages menu, select or create the page where you’d like to embed your Booking Widget.
  2. Click on the area of the page where you’d like the widget embedded and click anywhere in the body.
  3. Click Source in the editing popup.
  4. Paste in the code from your Booking Widget page where you want this to live, then click OK.
  5. Click Save in the popup.
  6. Click Save at the top of the page to publish the changes. 

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

To embed the widget on your Squarespace website:

  1. From your Squarespace Pages menu, select or create the page where you’d like to embed your Booking Widget. 
  2. Click on the area of the page where you’d like the widget embedded and click the sign (Add Block).
  3. Enter 'Code' in the search bar, and select the Code </> icon.
  4. Remove default code from text box and paste the code from your Booking Widget page > click Apply.
  5. Click Save. Once you exit editing mode and refresh the page, the embedded widget will display.

Note: After adding this to your website, if you or your clients notice an issue with the widget not loading, please disable Ajax Loading.

Read more about Using the Code Block on the Squarespace.

To embed the widget on your Weebly website:

  1. From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page.
  2. Resize margins as needed.
  3. Click within margin to set custom HTML > click Edit Custom HTML.
  4. Paste embed code > click outside of embed box to set changes.
  5. Click Publish.

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.

Customizing your widget

We don't recommend customizing this unless you are 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 to do this:

  1. First, find your existing button classes, and copy them.
    Right-click on the button, and click Inspect (using Chrome) 
  2. Then, double click in the 'class' attribute field, then copy the content here.
  3. Adjust your embed code by replacing the class 'spwidget-button' with what you just copied.
  4. Then, 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.
  5. Your Booking Widget should now match your existing styles.

Note: This is just a guide, on some sites this will not work for various reasons. If that is the case, we suggest editing the built-in styles we provide you to more closely match your site design.

You can also change the text here: we built this to say Request Appointment, but you can change this whatever you'd like. 

Have more questions? Submit a request