Jump to content

Booking widget in header

Recommended Posts

  • Replies 6
  • Views 1.2k
  • Created
  • Last Reply

You can add the code to Settings > Advanced > Code Injection so it will appear on every page.

Link to comment

Thanks! This is the code for my booking widget:

<!-- Start SimplePractice Booking Widget Embed Code -->

<style>.spwidget-button-wrapper{text-align: center}.spwidget-button{display: inline-block;padding: 12px 24px;color: #fff !important;background: #C43DB2;border: 0;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none}.spwidget-button:hover{background: #C43DB2}.spwidget-button:active{color: rgba(255, 255, 255, .75) !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset}</style>

<div class="spwidget-button-wrapper"><a href="https://lisa-van-eyndhoven.clientsecure.me" class="spwidget-button" data-spwidget-scope-id="118bffc3-7b94-49e8-bb03-e0d28feac0fa" data-spwidget-scope-uri="lisa-van-eyndhoven" data-spwidget-application-id="7c72cb9f9a9b913654bb89d6c7b4e71a77911b30192051da35384b4d0c6d505b" data-spwidget-scope-global data-spwidget-autobind>Book an appointment</a></div>

<script src="https://widget-cdn.simplepractice.com/assets/integration-1.0.js"></script>

<!-- End SimplePractice Booking Widget Embed Code -->

Just inputting it into the code injection doesn't seem to do anything. Should I be turning off my button element in my header first? 

Link to comment
20 hours ago, Lisave said:

Ooh, I see what happened. It came above my nav bar and was under my announcement bar. Any suggestions to move it? And to change the font to my custom font?

I don't see the problem. Have you solved it yet?


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.