How to Integrate ActiveCampaign with Squarespace - Video Tutorial

If you're a Squarespace user looking to integrate ActiveCampaign without a third party automation app, this tutorial offers a solution. If you are not yet using Squarespace and are wondering whether or not you can integrate your current email service, I'm here to tell you YAS, YOU CAN!

There are third party apps that can send user data from a Squarespace form, to a Google doc, then over to ActiveCampaign, but these apps are not free. If you haven't got the budget for yet another monthly expense, this tutorial is for you. However, this will take a little bit of effort on your part. You will need to inspect elements using your browser and you will need to use the Code Block, but don't worry, I'm here for you.

How to integrate ActiveCampaign with Squarespace - Video Tutorial

You can successfully integrate ActiveCampaign and Squarespace by creating a modal (via good ol' JavaScript) which pops up when a user clicks on a button, and embedding your ActiveCampaign form inside of that modal. 

Are you still with me? 

If this is already confusing you, rest assured that I am going to walk you through everything assuming you know nothing about HTML, CSS, or JavaScript.

And just so we're clear...

This is NOT a tutorial on how to use ActiveCampaign itself, but a tutorial on how to get it connected and working with your site.

UPDATE: Thanks to some user feedback, I've also included a video tutorial at the bottom of this post!

Step 1: Add jQuery & jQuery Modal to your site

I will spare you the explanations here, but you're going to need to install jQuery and jQuery Modal.

From your Squarespace menu, click on:
Settings > Advanced > Code Injection > Header

Click, copy, paste, save the following

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.7.0/jquery.modal.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.7.0/jquery.modal.min.js"></script>

Step 2: Create & hide your modal

Using the Code Block, copy & paste the following, then click on 'apply'. 

<div id="name-of-optin" style="display:none;"> 

This is the placeholder for where you will embed your form link

</div>

Since this div is going to be hidden, I recommend putting it down at the bottom of your post, that way you can easily find and edit it.

Make sure that you change the "name-of-optin" text to something that makes sense for you. You can name it anything you want i.e. "content-upgrade" or "newsletter-signup".

You're going to reference back to that name later on. Save.

Step 3: Create a custom button 

Add a Button to your post, format it the way you want it to look in your post (small, medium, large, text, etc.) and save it. 

Next, open the page you are working on in another window in your browser. Make sure that you are viewing the page while you are NOT in editing mode.

You'll probably need to be in a Chrome or Firefox browser to inspect elements, so now is a good time to wean yourself off of Safari. 

Find the button on your page, right click on it, and click on Inspect Element. This will open up your browser's inspector. The HTML should be highlighted but if it isn't, simply highlight the button again with your pointer and find the code. Then right click and select Copy outerHTML.

Okay, you've got the HTML copied to your clipboard. Now, you've gotta go back into your Squarespace page editor, delete the button you just inspected, and replace that button with Code Block so we can paste in that HTML.

So go ahead and delete that button, and replace it with another Code Block and paste in your HTML.
It will look a little something like this: 

paste html into code block

Step 4: Link to the hidden modal

In this step we are going to create a link with rel="modal:open" and set the href attribute to the modal's DOM id.

Let's go back inside that code block and add the hightlighted text:

create link within html

You will need to replace the '#name-of-optin' with the name of the hidden modal you created back in Step 1.

Save that.  

Go ahead and test your button at this point to make sure it works. 

Step 5: Embed ActiveCampaign form

Okay, let's take a break from Squarespace for a quick minute and go to your ActiveCampaign Dash. 

Navigate to your Forms, click on whatever form you want to integrate to this particular opt-in, customize your form, and then click on **Integrate**. 

Integrate your activecampaign form with Squarespace

Copy the Simple Embed code and head back into your page editor.

Remember that hidden modal we created back in Step 2? Go back into that code block and replace the placeholder text with the Simple Embed. Click Save. 

You should now have a modal that opens when you click on the button with your ActiveCampaign form!

Step 6: Customize Your Modal

The modals are easily customizable. 

You can change the look of the modal by adding something like the following to your **Custom CSS** or to the **Header** of a specific page.

    .modal {
        background-color: pink;
        border: 2px solid limegreen;
        width: 500px;
    }

The above CSS would create a really ugly modal, but you get the idea. Go crazy here.

Fade

Because I like you so much, I've got some sprinkles for you.

Go to Page Settings >Advanced > PAGE HEADER CODE INJECTION

Copy + Paste:

<script>
    $("#fade").modal({
        fadeDuration: 100
    });
</script>

TA-DA!

Now, go to the kitchen, make yourself a breakfast margarita and plant your cheeks next to the pool because you are DONE!

You have successfully integrated ActiveCampaign with Squarespace without breaking a sweat.

Now, for your viewing pleasure, enjoy this video.


Video tutorial


Over to you

Have any of you found alternative ways to get ActiveCampaign to place nicely with Squarespace? Please comment below, I'd love to hear how you did it! 

Note: If you are experiencing issues with certain themes, please let me know in the comments.