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.
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!
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.
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.
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.
5. Retrieve the Vessel Content Code
Go back into your Vessel dashboard and this time copy the CONTENT code.
6. Paste the Vessel Content Code then Save
Now go back to Squarespace and paste the CONTENT code snippet just below your HEADER code snippet.
Then click SAVE. These last two actions are super important!
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!
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