You can embed any WeTravel widget, such as the Book Now button, Pricing Packages, Contact Form widget, or any other embed, directly into your Squarespace website. This lets your customers view trip details and complete their checkout without leaving your site.
Because Squarespace supports different editing environments, depending on the version (7.0 vs. 7.1) and layout engine (Classic vs. Fluid Engine), this guide covers multiple ways to embed WeTravel widgets, tailored to your specific setup.
These instructions apply to all WeTravel widgets that provide embed code.
💡 Important: The WeTravel embedded checkout pop-up requires JavaScript. It works in all Squarespace plans that support Code Blocks. If you do not see the option to add Code Blocks, your plan may need to be upgraded.
Before You Begin
To embed a WeTravel widget, you first need to copy its code.
Get Your WeTravel Embed Code
Log in to your WeTravel account
Open the trip you want to embed
Go to Promote → Embed
Select the widget you want (Book Now, Pricing Packages, Trip Overview, etc.)
Click Copy Code
You will paste this code into Squarespace using one of the methods below.
Add the Embed Code to Your Squarespace Site
Squarespace has two primary editing experiences:
• Squarespace 7.1 (Fluid Engine) – default for all new sites
• Squarespace 7.0 (Classic editor + sections)
Instructions for both are included.
Option 1: Squarespace 7.1 (Fluid Engine)
Go to the page where you want to embed your widget
Hover your mouse and click Edit
Click the “+” button to add a new block
Search for “Code”
Add a Code Block to your layout
Paste your WeTravel embed code into the Code Block
Click Apply
Save the page
Important: Do not select Markdown, Embed, or HTML inside text — WeTravel embeds must be placed inside a full Code Block.
Option 2: Squarespace 7.0 (Classic Editor)
Edit the page
Click the area where you want the widget
Click Insert Point (the teardrop icon)
Select Code
Paste your embed code
Click Apply
Save and preview
Squarespace 7.0 templates have varied spacing defaults, so be sure to preview on mobile.
Option 3: Embed the Widget Inside a Section or Layout
Squarespace 7.1 sections allow flexible layout placement.
Add a new section or choose an existing one
Add a Code Block
Paste your embed code
Drag to reposition
Resize the block if needed
Save
This is ideal for placing the Book Now button beside pricing, itineraries, or custom content.
Advanced Options for Squarespace
Squarespace does not allow PHP or true “template file editing,” but it does support some advanced workflows.
Using Code Injection
If you want to load a WeTravel script sitewide (for example, for dynamic functions or forms), you can use Code Injection.
Go to:
Settings → Advanced → Code Injection
You may add:
• Header script (loads globally)
• Footer script (recommended for WeTravel embed script references)
Example: <script src="https://demo.cdn.wetravel.com/widgets/embed_checkout.js"></script>
Important: Do not place the full widget embed code here. Only place reusable scripts.
Adding Widgets to Squarespace Commerce Product Pages
If you're replacing Squarespace checkout with WeTravel checkout:
Go to Commerce → Inventory
Open a product
Scroll to Additional Info or Form Customization
Insert a Code Block using the product description or product details area
Paste your embed code
Save
This allows you to override the default “Add to Cart” flow.
Using Squarespace Developer Mode (7.0 Only)
If you are using Developer Mode (rare, advanced users only):
Clone a template file
Find the page region where you want the button (e.g., item view)
Add the WeTravel embed code where appropriate
Save and redeploy
Note: Developer Mode is not supported on 7.1.
Conditional Visibility and Display Rules
Squarespace doesn’t offer conditional logic like WordPress ACF, but you can simulate conditional behavior using:
• Duplicate pages
• Hide/show sections by device
• Custom CSS (visibility toggles)
• Custom code triggered by tags or categories
• Injecting WeTravel widgets only on specific page URLs
Example: You can restrict the widget to only appear on a specific Trip page using: <script> if (!window.location.href.includes("trip-name")) { document.getElementById("wetravel-button-here").style.display = "none"; } </script>
If you'd like, we can help you build a comprehensive conditional setup based on a specific live site.
Replacing the Squarespace Booking Button with WeTravel
If your template has a built-in “Book Now” or “Register” button:
Option A: Replace the link
• Click Edit
• Click the button
• Change the URL to your WeTravel Trip Link
Option B: Replace the entire button using a Code Block
• Add a Code Block
• Paste your embed code
• Delete or hide the default button
Option C: Hide the default button with CSS
• Add section ID
• Go to Design → Custom CSS
• Add: #old-button-id { display: none; }
Troubleshooting
Embedded widget not showing?
Check that you used a Code Block, not “Embed” or “Markdown.”
Make sure you pasted the full embed code
Ensure your Squarespace plan supports Code Blocks
Turn off AMP (Squarespace strips scripts in AMP versions)
Check if Content Security Policy is blocking external scripts
Confirm the page is not using the “Summary Block,” which strips code
Try removing surrounding HTML if pasted from an email or doc
Disable caching temporarily (Cloudflare or Squarespace built-in cache)
Need Help Finding Where to Embed the Widget?
Squarespace setups vary depending on:
• Template family
• 7.0 vs 7.1
• Commerce vs non-Commerce
• Fluid Engine vs Classic
• Whether sections are locked or limited
• Where code blocks are allowed
If you cannot find the correct place, email info@wetravel.com with:
A link to your Squarespace site
A screenshot of your page editor
A description of how you want the booking flow to work
Our in-house team will assist you with the next steps!