How to Add a Simple Practice Scheduler on Your Website - A DIY Guide
If you’re currently using Simple Practice and you’re worried that having your own website in addition to that will lead to managing multiple disjointed platforms, rest assured that is not the case. In just a few simple steps, you can integrate your Simple Practice appointment scheduler right on your website, where their booking flow will then take over. This example is specific to Squarespace, but all website editors will have a similar “code block,” and the steps will generally be the same.
No filler here, let’s get started.
STEPS WITHIN SIMPLE PRACTICE
Step 1 - From the Calendar screen, click Settings.
Step 2 - Within Scheduling, click on Widget.
Step 3 - Select Copy Code.
Step 1 - On the Calendar screen, click Settings
Step 2 - In scheduling, click Widget
Step 3 - Select Copy Code
STEPS ON YOUR WEBSITE
Step 4 - Select the Page and Section where you want your Simple Practice scheduler button to be located.
Step 5 - Select Add Block (Squarespace only. Other editors may say “Add Element”).
Step 6 - Select the </> Code Block, and place it wherever you like.
Step 7 - Click the edit button and paste the code.
Adding the </> Code Block
Press edit on the code block, and paste in the code
Customizing the Look of the Button
Now. you’ve got the button on your page. All good, right? Well like a lot of things, the answer is “it depends.”
Unless the primary color you use on your page is “Simple Practice Orange,” you’re probably going to want to match it to your site, and YOUR buttons. Here’s how.
In that code block, if you click your cursor and move to the right, there is a lot of code there.
You won’t want to change everything, but here are a few areas to focus on:
color: #fff - This is the color of the font. You can change this to any HEX code you want. Look in the color section of Squarespace to find your site colors.
background: #de6a26 - This is the background color of the button. This color should match the rest of the buttons on your site.
border-radius: 4px - This is how rounded the corners of your buttons will be. In this example, I set mine to 15px.
font-size: 16px - The size of the font. 16 is standard.
font-weight: 500 - The thickness of the font characters. 400 = light, 600 = bold, and so on.
spwidget-button:hover{background: #de6a26} - This is the hover background color (the “shift” when your cursor moves over the button). I’d make this either the same as your main background color OR just slightly different.
UPDATE BUTTON TEXT: Find where it says “Request Appointment” and change it to say whatever you like.
Go through the code and make changes to the look. You can always re-paste the code back in if you “break” something.
Your button will start to take on a more cohesive look with the rest of your site. Just be careful not to change the color or it will save (notice the new darker blue button at the top—oops!).
The button is done, and matches the site!
Hopefully you found this helpful in updating your website while keeping the look and feel you want.
I’m sure you tackled this like a champ, but if you have any updates you want to make to your website but need some help, feel free to reach out.
My Digital Maven can help with website reviews, renovations (updates) and brand new websites, catered specifically to therapists.
