Jump to content

Injecting Booking Widget Into Header

Recommended Posts

Site URL: https://goldfish-onion-msnw.squarespace.com/

Hi there,

I'm having trouble injecting code into a site I'm working on for a friend! I would like to insert code for a booking widget to replace the "Book a Session" button on the right side of the header now.

I have successfully used the below code to create a buttons on the body sections of the site, but when I inject the same code into the header, it sits above the header rather than integrates in. Also, I'm not able to get the widget to appear anywhere other than the left-hand side of the site, despite updating the text alignment in the code. I'd love any support in solving this! The code is below:

<style>.spwidget-button-wrapper{text-align: right}.spwidget-button;padding: 18px 40px;color:#81A064 !important;background:#fff ;border: 0;border-radius: 0;font-size: 16px;font-weight: 500;text-decoration: none}.spwidget-button:hover{background: #b2c5a0}.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://jessica-lieb.clientsecure.me" class="spwidget-button" data-spwidget-scope-id="2104a5d4-609f-4c07-81a8-393f6c2d0fe0" data-spwidget-scope-uri="jessica-lieb" data-spwidget-application-id="7c72cb9f9a9b913654bb89d6c7b4e71a77911b30192051da35384b4d0c6d505b" data-spwidget-scope-global data-spwidget-autobind>Book a Session</a></div>
<script src="https://widget-cdn.simplepractice.com/assets/integration-1.0.js"></script>

1698043506_ScreenShot2021-03-17at9_52_16PM.thumb.png.7508f1ae1b989b8318f91d47dbedd449.png

Link to comment
  • Replies 1
  • Views 742
  • Created
  • Last Reply
On 3/18/2021 at 11:53 AM, Lauren-Masterson said:

Site URL: https://goldfish-onion-msnw.squarespace.com/

Hi there,

I'm having trouble injecting code into a site I'm working on for a friend! I would like to insert code for a booking widget to replace the "Book a Session" button on the right side of the header now.

I have successfully used the below code to create a buttons on the body sections of the site, but when I inject the same code into the header, it sits above the header rather than integrates in. Also, I'm not able to get the widget to appear anywhere other than the left-hand side of the site, despite updating the text alignment in the code. I'd love any support in solving this! The code is below:

<style>.spwidget-button-wrapper{text-align: right}.spwidget-button;padding: 18px 40px;color:#81A064 !important;background:#fff ;border: 0;border-radius: 0;font-size: 16px;font-weight: 500;text-decoration: none}.spwidget-button:hover{background: #b2c5a0}.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://jessica-lieb.clientsecure.me" class="spwidget-button" data-spwidget-scope-id="2104a5d4-609f-4c07-81a8-393f6c2d0fe0" data-spwidget-scope-uri="jessica-lieb" data-spwidget-application-id="7c72cb9f9a9b913654bb89d6c7b4e71a77911b30192051da35384b4d0c6d505b" data-spwidget-scope-global data-spwidget-autobind>Book a Session</a></div>
<script src="https://widget-cdn.simplepractice.com/assets/integration-1.0.js"></script>

1698043506_ScreenShot2021-03-17at9_52_16PM.thumb.png.7508f1ae1b989b8318f91d47dbedd449.png

Hi. What is password?

image.thumb.png.fed4c688fdeebb9f7d4356cb46a0c96e.png

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

Archived

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.