Jump to content

Third Party Widget Placement Issues

Recommended Posts

For starters I am not a coder and much of this is foreign to me, though I can usually figure things like this out with detailed instructions.

I have added a third-party "book now" widget button from wetravel to my site, but am having an extremely difficult time getting it to place where I want on the website. After much trial and error (constant moving, saving, and previewing), I've been able to get it to appear properly on the desktop website when viewed at 100% zoom, but it then goes off center when zoomed further in/out or viewed on mobile devices. Currently I have only added one of these widgets until I am able to figure this out, but have plans to replace all of the "book now" buttons on my website with it once a solution is found. It seems to be the safe mode messaging thats interfering, but I cant say this for certain.

This is the code that wetravel has provided for the button (I would honestly prefer it be a bit larger to match the style of the other buttons native to squarespace, but don't see a way to edit the size on their website) : 

<button class="wtrvl-checkout_button" id="wetravel_button_widget" data-env="https://www.wetravel.com" data-version="v0.3" data-uid="1009729" data-uuid="61034387" href="https://www.wetravel.com/checkout_embed?uuid=61034387" style="background-color:#000000;color:#ffffff;border: 0px;border-radius: 5px;font-family: 'Poppins', sans-serif;font-weight: 400;font-size: 14px;-webkit-font-smoothing: antialiased;text-transform: capitalize;padding: 13px 24px;text-decoration: none;text-align: center;line-height: 14px;display: inline-block; cursor: pointer;">Book Now</button> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <script src="https://cdn.wetravel.com/widgets/embed_checkout.js"></script>

Any help here will be GREATLY appreciated!

IMG_3320.PNG

Screen Shot 2024-03-24 at 7.46.32 AM.png

Screen Shot 2024-03-24 at 7.46.46 AM.png

Screen Shot 2024-03-24 at 7.47.07 AM.png

Edited by hmkelsey
Link to comment
  • Replies 1
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.