How To Style Your Simple Practice Booking Widget on Squarespace
Making the booking process as easy as possible is the best way to increase the effectiveness of your existing marketing efforts and ensure that your website is doing what it’s supposed to do - send you clients.
Simple Practice is one of the best practice management tools available to therapists today; the user-friendly, HIPAA compliant online scheduling, automatic invoicing, and insurance billing features make it my top recommended resource for therapists who want to book more clients through their website.
One of the best Simple Practice features is its’ booking widget, which you can embed on any page of your website to have clients schedule an appointment without every leaving your site. The problem? It’s default color is orange, which might not match your website’s color scheme.
In this post, I’m going to show you how to customize the color and wording of your Simple Practice booking widget to complement your website design.
Step 1: Find your booking widget code
Follow this simple help article from Simple Practice to find your booking widget code. When you’ve found your code, copy it and move to step 2.
Step 2: Embed your widget on your Squarespace website
From your Pages panel, select the page where you’d like to embed your booking widget.
Click on the area of the page where you’d like the booking widget to appear, click an insert point, and select the Code block.
3. Remove the default code from the text box and paste your booking widget code from Step 1. Click Apply.
4. Click Save. Refresh the page to display the booking widget.
Step 3: Change the text on your Simple Practice booking button
Click Edit on the code block where you just pasted your Simple Practice code.
Scroll down through the code until you see the black text that says “Request Appointment”. Replace these words with the text that you want to appear instead. Click Apply.
3. Click Save and refresh the page.
Step 4: Change the color of your Simple Practice booking button
Using the code block, you can customize the style of your booking button to match the other buttons on your website. In most cases, this is an advanced procedure, so for the sake of ease, I’m going to share code that you can simply copy/paste into your code block to change the color to either black or white.
Option 1: Change the button color to black
Replace the style portion of your booking widget code with the following:
<style>.spwidget-button-wrapper{text-align: center}.spwidget-button{display: inline-block;padding: 12px 24px;color: #fff !important;background: #000;border: 0;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none}.spwidget-button:hover{background: #383838}.spwidget-button:active{color: rgba(255, 255, 255, .75) !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset}</style>
Option 2: Change the button color to white
Replace the style portion of your booking widget code with the following (using the same method as above):
<style>.spwidget-button-wrapper{text-align: center}.spwidget-button{display: inline-block;padding: 12px 24px;color: #000 !important;background: #fff;border: 0;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none}.spwidget-button:hover{background: #e8e8e8}.spwidget-button:active{color: rgba(255, 255, 255, .75) !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset}</style>
Option 3: Change the button color to one of your brand colors (advanced)
For this option, you’ll need the HEX code of the specific color to which you want to change your button. If you’ve worked with a brand designer, you should have your HEX codes in your Brand Style Guide.
If your custom color is on the darker end of the spectrum, and white text will show up best on top of it, use this code to replace the default style portion, and replace the bolded portion with your HEX code:
<style>.spwidget-button-wrapper{text-align: center}.spwidget-button{display: inline-block;padding: 12px 24px;color: #fff !important;background: #000;border: 0;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none}.spwidget-button:hover{background: #383838}.spwidget-button:active{color: rgba(255, 255, 255, .75) !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset}</style>
As seen here:
If your custom color is on the lighter end of the spectrum, and black text will show up best on top of it, use this code to replace the default style portion, and replace the bolded portion with your HEX code:
<style>.spwidget-button-wrapper{text-align: center}.spwidget-button{display: inline-block;padding: 12px 24px;color: #000 !important;background: #fff;border: 0;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none}.spwidget-button:hover{background: #e8e8e8}.spwidget-button:active{color: rgba(255, 255, 255, .75) !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset}</style>
And there you have it! Now your Simple Practice booking widget button will complement the rest of your website design, and your website can start to send you clients seamlessly.
Want more Squarespace tips for your private practice website?
Stay up to date by joining Website Supervision, a weekly newsletter where I share marketing tips, Squarespace hacks, and website best practices:
Disclaimer: Some of the links contained in this article are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.
