The SimplePractice appointment-request widget is a tool that makes it easy for potential clients to view your availability and request an appointment online.

In this guide, we’ll cover:

• Viewing the appointment-request widget
• Adding the appointment-request widget to your external practice website 

Note: The appointment-request widget is only available on the Plus plan.

Viewing the appointment-request widget

To preview your appointment-request widget: 

• Navigate to Settings > Widget
• Click Preview Widget

Before diving in, keep in mind that: 

• New clients will be able to schedule an appointment right from the Appointment-request widget on your website.
• Existing clients will be redirected to your Client Portal, where they can sign in and select an appointment. This way, their appointment is connected to their existing client file. This guide walks existing clients through the steps of requesting appointments from the Client Portal: Viewing and requesting appointments in the Client Portal.

Here's what a new client experiences when they click your embedded appointment-request widget:

• If there are multiple clinicians in your practice, the client will be prompted to select a clinician

Note: Existing clients will be directed to sign into the Client Portal to request an appointment. To learn more about how clients can request appointments through their Client Portal, see Getting started guides for clients: How to request appointments.

• They'll be able to choose from the services you've decided to offer new clients

• New clients can then select a location
  • If you have one location, they must select it to move to the next step

• Next, they can determine which date and time will work for them based on your Availability
  • Depending on your set Availability, they can view and select a date in another month by clicking the navigation arrows on the calendar 
  • Once they choose a date, they can view available appointments by time of day
  • For more information on setting your Availability, see Managing your Availability

Note: If clients see that a Call to request is required, they won’t be able to request an appointment without contacting you directly. To learn how to enable or disable this requirement, see Designating service codes for online appointment requests, allowing new clients to book online, and requiring clients to call to request.

• Once the client has selected a date and time, they can enter their information
  • They’ll need to enter their name, email address, phone number, and date of birth to successfully request an appointment

For more information on setting up online appointment requests and sharing documents, see these guides:

• Sending intake forms and documents to clients
• Enabling online appointment requests

Adding the appointment-request widget to your external practice website

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

Note: With the Professional Website by SimplePractice, 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: 

• Navigate to Settings > Widget
• Select Copy code

Tip: If you update the default domain of your external website, you’ll want to remove the code from your website, then re-embed the widget code from Settings > Widget to your website. This will make sure that the widget continues to appear on your website.

In this section, we’ll cover how to embed code for different website builders:

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

Note: Our Customer Success Team can’t help with troubleshooting non-SimplePractice products. If you have additional questions about embedding the widget on your external website, please reach out to the website platform’s support team to resolve any issues.

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 > Widget
• 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 > Widget 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:

• Navigate to your Squarespace Pages menu
• Select or create the page where you’d like to embed your appointment-request widget
• Click Edit
• Click + Add Block in the area where you’d like to embed your widget

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

• Double click the text box
• Copy and paste the code from Settings > Widget into the Content box
• 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:

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

• Click within margin to set custom HTML
• Select Edit Custom HTML

• Copy and paste the code from Settings > Widget
• Click outside of the HTML box to set changes
• 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: 

• Copy the code from Settings > Widget 
• Navigate to your Webflow project
• Click + > Elements > Advanced > Embed 
• Place the element in a container or anywhere else you'd like
• Paste the 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 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.

Customizing your widget

Important: 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. To do this:

• Right-click on an existing button, and click Inspect or Inspect Element

• Double click in the 'class' attribute field, and copy the content

• Navigate to your appointment-request widget code on your website
• Replace the content for the class 'spwidget-button' with what you just copied

• Remove the unnecessary parts of your code (ex: the 'style' and 'div') so that all that's left is the button itself, the 'a' tag, and the 'script' tag

Your appointment-request widget should now match your existing styles. Additionally, the default text will say Request Appointment, but you can change this whatever you'd like.

As this is a general guide, these steps may not work for some sites for various reasons. If this is the case, we suggest editing the built-in styles we provide to more closely match your site design.