SquareSpace: Getting Started

SquareSpace: Getting Started

In order to make our interactive maps more accessible, we have made our Vessel Integration with Squarespace easy.

  • You don't need to download a plugin/app.

  • You don't need an API Key.

Instead, you can just follow the few simple steps below.

1. Accessing Your Vessel Code

In your Vessel Dashboard, click on the embed icon (< >) for your campaign.

embedicon.png


 

2. Copy the Vessel Header Code

The screen (see below) that pops up will show two snippets of code that you need to copy and paste into the intended page. 

Copy the HEADER code first, but keep this window open because we’re coming back to it!

copy1.png

  

3. Add a Code Block on Your Squarespace Page

Go into your Squarespace site and open the page you intend to add your map to. 

Once you've done this, click EDIT

edit blog.png


Locate the area where you'll add your Vessel map and add a Code "Block."

Usually, you can do this by going to the (+) symbol on the editing taskbar and navigating to More.

 

code block.png



 NOTE: Click (HERE) to learn more about Squarespace Blocks. Adding JavaScript or iframes to Code Blocks is a Premium feature in Squarespace's Business and Commerce plans. 



4. Paste the Vessel Header Code In Squarespace

In the Code box that appears in the bottom right, delete "<p>Hello, World!</p>" and paste your HEADER code.

paste1.png


5. Retrieve the Vessel Content Code

Go back into your Vessel dashboard and this time copy the CONTENT code. 

paste2.png




6. Paste the Vessel Content Code then Save 

Now go back to Squarespace and paste the CONTENT code snippet just below your HEADERcode snippet. 

Click APPLY

Then click SAVE. These last two actions are super important!  

paste2.png



7. Refresh Your Page 

Just after hitting SAVE, you might see a few notices that say SCRIPT DISABLED. Please disregard this.

REFRESH the page and your map will appear!

done.png


And just like that, you're ready to start adding Vessel maps to your Squarespace site.

If you have any questions please contact us or leave a comment below! We'd love to hear from you. 

Vessel Help Team