In this tutorial, we’ll walk you through how to add a full-featured blog to your ActiveCampaign website by simply adding a few lines of code.
ActiveCampaign is a platform that helps you grow and refine your business through advanced automations and a vast collection of powerful tools. The page builder allows you to build impressive landing pages tailored to your audience. The addition of DropInBlog can help you connect even deeper with your customers and can give your pages that content marketing boost you’ve been looking for.
Getting started is easy, all you need is a Plus level (or higher) ActiveCampaign account and a DropInBlog account (which you can create for free with a 14-day trial).
Creating a Blog Page
Assuming you’ve already built your first ActiveCampaign site page, you can simply duplicate it to create a new page for your blog.
Alternatively, you can create a brand new page using a blank template, or any of the expertly designed layouts ActiveCampaign has to offer.
Once your new page is created, you can give it a name... I’d like to suggest “blog”, but you can be as creative here as you’d like. ;)
Connecting DropInBlog to ActiveCampaign
There are a few simple steps we need to take to get DropInBlog and ActiveCampaign talking to each other.
First, hover over your new blog page, and click View Page Settings.
Next, open a new browser window and log in to your DropInBlog account. Navigate to the Code & Layout tab, and copy the lines of code shown under Step 1. They look like this:
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
Finally, switch back to your ActiveCampaign blog page, and paste the code you just copied into the
<body></body> area of the Custom Code section. Click Save.
Displaying the Blog Posts on your Page
Now that your accounts are connected, we need to define where on your blog page the blog posts will actually be shown.
Open your blog page by clicking Edit Design. If you’ve duplicated an existing page, you can delete anything you don’t want showing on your blog page. Otherwise, if you have a blank slate in front of you, you’re ready to rock!
First, grab a Section Block and drag it to the spot on your page where you’d like your blog to be.
Then, grab an Embed Block and drag it into the Section block that you just set on your page.
Now, head over to DropInBlog again, and copy the code shown in Step 2. It looks like this:
Back in ActiveCampaign, click on your Embedded Component, and paste the Step 2 DropInBlog code into the field that appears on the right.
Connecting ActiveCampaign to DropInBlog
For the final integration step, head back over to DropInBlog and navigate to the Settings page. Locate the Blog URL field and input your ActiveCampaign blog page URL. Once you’ve entered this URL into DropInBlog, hit Save All Changes.
To find this URL in ActiveCampaign just click the icon of the three dots next to your page name and select Get URL.
Publishing Your New Blog Page
To publish your new page with these changes click the Publish Page button in ActiveCampaign. You may then navigate directly to your blog URL, or click the three dots icon, and select View Live. And now... behold your beautiful new blog! ✨
Tips for Using ActiveCampaign
ActiveCampaign has a variety of well-designed template layouts and DropInBlog will inherit the styles of those templates automatically.
However, if you want to add some custom styling you can use standard CSS to adjust the look and feel of your blog. Just open the Embed Block where you posted the DropInBlog code from Step 2, and add your custom CSS within
<style></style> tags to begin tweaking the design of your blog.
If you’d like any assistance getting your new blog set up please do get in touch. We’re more than happy to help out. 🤓