The SimplePractice Appointment-request Widget makes it easy for potential new clients to find your availability and request an appointment online.
In this guide, we’ll cover:
- The Appointment-request Widget
- Adding the Appointment-request Widget to your external practice website
- The client's experience
Note: This feature is only available on the Plus Plan.
What is the Appointment-request Widget?
The Appointment-request Widget is a tool you can use to connect your online appointment requests to an external website. The Appointment-request Widget is intended for new clients, and many websites allow the embedding of widgets from other sites.
To view your Appointment-request Widget, navigate to Settings > Widget.
To preview what new clients will see when requesting an appointment through the Appointment-request Widget, click Preview Widget:
Adding the Appointment-request Widget to your external practice website
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. Learn more about setting up your Professional Website.
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 or have questions about embedding the widget on your website, please reach out to their support team to resolve any issues.
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.
To locate the code needed to embed your Appointment-request Widget on an external website, navigate to Settings > Widget. Scroll down to the code section, and select Copy Code:
You can follow our instructions on how to embed code for different website builders below:
- Brighter Vision
- TherapySites
- Squarespace
- Weebly
- WordPress using Elementor
- Webflow
- Working with Wix, WordPress, and GoDaddy
- Customizing your widget
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 Appointment-request Widget page. You can find this by going to Settings > Widget. The code is there, ready for you to copy and email to support@brightervision.com.
- In the email, copy and paste this text so they’ll understand what to do:
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. - Send the email & wait for them to add this for you.
TherapySites
To embed the SimplePractice Appointment-request Widget into your TherapySites website, reach out to their Customer Care Team for help. By providing the code from Settings > Widget to their team, they can help with embedding it into your website.
Squarespace
- From your Squarespace Pages menu, select or create the page where you’d like to embed your Appointment-request Widget.
- Click on the area of the page where you’d like the widget embedded and click the + sign (Add Block).
- Enter 'Code' in the search bar, and select the Code </> icon.
- Remove default code from text box and paste the code from your Appointment-request Widget page > click Apply.
- 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. However, if you're using version 7.1, please connect with a SquareSpace representative for further assistance.
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.
- Resize margins as needed.
- Click within margin to set custom HTML > click Edit Custom HTML.
- Paste embed code > click outside of embed box to set changes.
- 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.
Wordpress using Elementor:
- Add the CSS and HTML of the Appointment-request 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 Appointment-request 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 Appointment-request Widget into your particular website.
Webflow
Follow these steps to embed your Appointment-request Widget code in your Webflow site:
- Copy the SimplePractice Appointment-request 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 Appointment-request 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 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 Appointment-request 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 try working 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)
- Then, double click in the 'class' attribute field, then copy the content here.
- Adjust your embed code by replacing the class 'spwidget-button' with what you just copied.
- Next, remove the unnecessary parts of your code—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.
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 embedded Appointment-request Widget:
- If there are multiple clinicians in your practice, the client will be prompted to select a provider.
Note: Existing clients will be directed to sign into the Client Portal to request an appointment. See Setting up the Client Portal to learn more.
- 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 the Availability you have set, they can view and select a date in upcoming months by clicking the navigation arrows. Once they choose a date, they can view available appointments by time of day.
Note: For more information on setting your Availability, see: Managing your Availability. If clients only see the option to Call to request, this means that you'll need to update your Availability to allow new clients to request appointments online.
- The client can click the date and time that works best for their schedule.
- Finally, they’ll 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 managing your Availability, setting up online appointment requests, and sharing documents, see these guides:
