Text2MySite™

Squarespace Integration

Add Text2MySite™ SMS alerts to your Squarespace website

Setup time: 3-5 minutes

Squarespace provides a couple of primary methods for embedding code or widgets, depending on your needs. The most common and user-friendly way is to use a Code Block, but for site-wide scripts, you'll need to use Code Injection.

1
Using the Code Block
Perfect for embedding a widget on a specific page or blog post
Recommended for specific pages

This method is perfect for embedding a widget on a specific page, blog post, or in a footer area. It's the go-to option for things like social media feeds, third-party forms, or interactive maps.

Step-by-Step Instructions:

  1. Add a Code Block: While editing a page or post, click on an insertion point (the + icon) to add a new content block.
  2. Select "Code": From the menu that appears, scroll down and select the Code block.
  3. Paste Your Code: Click the pencil icon on the code block to open the editor. Paste your widget's HTML, JavaScript, or CSS code into the text field.
  4. Important: By default, the type is set to HTML. For CSS, you should wrap your code in <style></style> tags. For JavaScript, wrap it in <script></script> tags.
  5. Save and Preview: Click "Apply" to save the code block. Your widget will often not render in the editor itself for security reasons. To see it, save the page and view it live.

Note on Plans:

Functional JavaScript is only supported on Business and Commerce plans or higher. If you have a Personal plan, the code block will not execute JavaScript, but it will work for simple HTML and CSS.

2
Using Code Injection (Advanced)
For adding code snippets that need to load on every page of your site
For sitewide scripts

This method is for adding code snippets that need to load on every page of your site. This is typically used for tracking pixels, analytics scripts, or custom CSS/JavaScript that affects your entire site's design or functionality.

Step-by-Step Instructions:

  1. Access Code Injection: From your Squarespace dashboard, go to Settings → Advanced → Code Injection.
  2. Choose Header or Footer: You'll see fields for Header and Footer.
    • Header: Code placed here loads before the page content. This is the ideal spot for analytics scripts like Google Analytics or Facebook Pixel.
    • Footer: Code placed here loads after the page content. This is a good place for live chat widgets or scripts that don't need to load immediately to avoid slowing down your site's initial load time.
  3. Paste and Save: Paste your code into the appropriate field and click "Save."
Limitations and Considerations

Support:

Squarespace's customer support does not provide assistance with custom code. If you encounter issues, you may need to troubleshoot on your own, use the Squarespace Forum, or hire a Squarespace Expert.

Security:

Always ensure that the code you're embedding is from a trusted source to prevent security risks to your website.

Previewing:

As a security measure, some embedded code will not be visible to you when you are logged into your Squarespace account. To test if the code is working, you will need to log out or view your site in an incognito window.

Plan Requirements:

As mentioned above, some features like JavaScript in a Code Block require a Business plan or higher.

YouTube Tutorials
Watch step-by-step video guides for embedding code in Squarespace

Adding Custom Code | Squarespace 7.1

Official Squarespace guide for adding custom code

From the Squarespace Help channel • 2 minutes 34 seconds

Watch Tutorial

How To Embed Code Squarespace Tutorial

Step-by-step tutorial for embedding code in Squarespace

From the Blooming channel • 2 minutes 7 seconds

Watch Tutorial