Adding the appointment request widget to your website

If your practice uses an external website, you can add the appointment request widget, which will allow prospective clients to view your Availability schedule and request appointments online. Appointment requests submitted via the widget on your website will appear in your SimplePractice account, where they can be accepted or declined.

Note: The appointment request widget is only available on the Plus plan. To learn more about our plans, see Comparing SimplePractice features by plan.

If your practice has a website hosted on an external website builder, you can embed the appointment request widget directly.

Note: With the SimplePractice Professional Website, the online appointment request flow is seamlessly incorporated into your website, so there's no need to embed the appointment request widget. The widget is only intended for external websites. 

To locate the code needed to embed your appointment request widget: 

1. Navigate to Settings > Scheduling and inquiries > Widgets
2. Select Copy code

If you’re part of a group practice, click Copy code next to your name to preview your clinician-specific widget.

To learn more about clinician-specific links for group practices, see Managing clinician-specific scheduling and contact form links.

Note: If you change your Client Portal default domain, you’ll need to update your appointment request widget. To do this, remove the code for the appointment request widget from your external website, then re-add code from Settings > Scheduling and inquiries > Widgets.

After copying the code, you can add it to your external website. Below, you can find instructions for embedding the appointment request widget code for various website builders:

• Brighter Vision
• TherapySites, GoDaddy, and Wix
• Squarespace
• Weebly
• Webflow
• WordPress

Note: Our Customer Success Team can’t help with troubleshooting non-SimplePractice products. If you have questions about adding the widget to your external website, please reach out to their support team directly.

Brighter Vision

The easiest and best way to add the appointment request widget to your Brighter Vision website is to contact their support team and ask them to do it for you. To do this:

• Copy the code in Settings > Scheduling and inquiries > Widgets
• Send an email to Brighter Vision’s support with the following:
  • Please make the appointment request 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.

Once you’ve sent this email, allow some time for the appointment request widget to be added to your website.

TherapySites, GoDaddy, and Wix

To embed the SimplePractice appointment request widget into your TherapySites or GoDaddy website, reach out to the platform’s support team for assistance. You’ll want to share the code from Settings > Scheduling and inquiries > Widgets with their team, which they can use for your website.

We've received feedback from customers that the widget isn't able to fully expand on sites hosted through GoDaddy, but you can try working with one of their representatives to embed the code successfully.

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

Squarespace

To embed your appointment request widget on your Squarespace website:

1. Navigate to your Squarespace Pages menu
2. Select or create the page where you’d like to embed your appointment request widget
3. Click Edit
4. Click + Add Block in the area where you’d like to embed your widget

5. Enter code in the search bar, and select the Code </> icon

6. Double click the text box
7. Copy and paste the code from Settings > Scheduling and inquiries > Widgets into the Content box
8. Click Apply > 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. However, if you're using version 7.1, please connect with a SquareSpace representative for further assistance.

To learn more about using the Code Block on Squarespace, see Code blocks.

Weebly

To embed your appointment request widget on your Weebly website:

1. Navigate to your Weebly site editor
2. Click and drag the Embed Code button from the toolbar into the desired section of your page

3. Click within margin to set custom HTML
4. Select Edit Custom HTML

5. Copy and paste the code from Settings > Scheduling and inquiries > Widgets
6. Click outside of the HTML box to set changes
7. Select Publish

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

For more information, see Add External Content and Widgets With Embedded Code.

Webflow

To embed your appointment request widget code in your Webflow site: 

1. Copy the code from Settings > Scheduling and inquiries > Widgets
2. Navigate to your Webflow project
3. Click + > Elements > Advanced > Embed 
4. Place the element in a container or anywhere else you'd like
5. Paste the widget code in the HTML Embed Code Editor window
6. Click Save & Close

You'll see a placeholder in your project, but you should be able to see the appointment request widget in your live site after you publish your changes. To learn more about embedding code onto your Webflow project, see Custom code embed.

Wordpress

If you’re using Wordpress, there are many different ways the code can be applied that will depend on how you’re using the platform. 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.

If you’ve built a Wordpress website through Elementor, we recommend adding the CSS and HTML of the appointment request widget to wherever you want on a given page, rather than the JavaScript. WordPress typically strips out JavaScript when going back and forth between the Visual editor and the Code editor for a given page.

If you’d like to add the JavaScript to your Wordpress website through Elementor, we suggest adding JavaScript to your site by copying this code snipped into a widget and putting this widget in the site’s footer. Based on the way our appointment request widget is built, the Javascript doesn’t need to be right next to the CSS and HTML - it only has to be placed after the button itself in the website’s coding.

For more information on embedding your widget with Elementor, consult Elementor support directly.

To learn more about customizing your widget, see Customizing your appointment request widget.