Add Mailchimp Subscribe Modal to your Hexo Blog

Mailchimp Subscribe Modal

Add Mailchimp Subscribe Modal to your Hexo Blog

If you use Hexo for your blog, you know how easy it is to create a beautiful and user-friendly experience for your followers. Even better, Hexo is entirely open-source, which means you are free to customize the code to work best for your needs.

We’ve known for a while that we need a clean way for new visitors to subscribe to our blog. We put it off because we imagined a significant design and implementation effort to integrate it into our MailChimp email list.

Bri loves tinkering with open-source code, and she recently discovered a straight-forward way to modify our Hexo theme (Minos) and allow new visitors to subscribe to our mailing list.

Ready to add this functionality to your blog? Read on!

Step 1: Create a Subscribe Form in MailChimp

First, we need to design the “subscribe” modal in MailChimp. MailChimp already has excellent articles on how to do this, so follow the links below, create and customize your subscribe form, and then come back here.

A) Access the form builder

B) Customize your form

Step 2: Connect your Hexo Blog to MailChimp

Now that you’ve designed your subscribe form in MailChimp, we need to connect Hexo and MailChimp so that they can communicate. Luckily, MailChimp already has excellent instructions on how to accomplish this. Follow the links below, connect MailChimp and your blog, publish your form, and then come back here.

A) Connect your custom website

B) Publish your form

Step 3: Implement the Subscribe Form Code on your Hexo Blog

Now we’re ready to tie everything together and put the subscribe form on our blog.

A) Add the following property to your theme’s _config.yml, replacing the placeholder URL with your own MailChimp URL.

1
2
# Mailchimp subscribe modal script
mailchimp_subscribe: https://chimpstatic.com/mcjs-connected/js/users/<redacted>/<redacted>.js

B) Create a new file, mailchimp_subscribe.ejs, under themes > <theme> > layout with the following content. If you are not using EJS, adapt the code to the templating engine you are using.

1
2
3
4
5
<% if (theme.mailchimp_subscribe){ %>
<script id="mcjs">
!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","<%= theme.mailchimp_subscribe%>");
</script>
<% } %>

C) Integrate this template into your theme and include it on each page of the generated site. For our theme, Minos, we added the following to the layout.ejs file under the <head> tag.

1
<%- partial('mailchimp_subscribe') %>

All Done!

Subscribe Modal

Hopefully, this post helps you set up a beautiful and easy-to-implement subscribe modal.

Have an idea for making this tutorial better? Or have a question? Email us at support@pensivescurity.io and let us know. We’d love to hear your thoughts!

OWASP Application Security Verification Standard (ASVS) January 2021: Cybersecurity Roundup
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×