Blair Wadman
Blair Wadman 5 minute read
April 8, 2020

How to add a modal triggered by a link in ConvertKit

Most sites on the web use simple call to actions with embedded forms that include a field for the reader to add their email address (if they have a call to action at all).

But there is another way. Instead of directly embedding the form, you can make it a two stage process where you first have a button or link for the reader to click, and only after they click it do they see the opt-in form. This opt-in form can either be on a dedicated landing page, or a modal. There are advantages to both landing pages and modals and in this article, I’m going to explore the modal approach.

Two stage opt increases conversions

When you have an embedded form with an email field, you are asking people to make an immediate decision to hand over their precious email address. In many cases, you are asking them to do this after they have read an article of yours. This can be quite a sudden jump in commitment levels. One minute they are happily reading your article, and the next they are presented with a field for them to put in their email address.

If you have a modal instead, you are breaking this transition up into smaller steps. The reader is not being asked to add their email address right away. Instead, the call to action just has a button to click. The commitment level on clicking that button is much much lower, so more people are likely to click it.

They will then get the modal, which does include a field for them to add their email address. It should also include more information on the benefits of handing over their email address. At this stage, they have already made one micro commitment - they have clicked on the button. They are now being asked to make another, bigger commitment. Going from a smaller commitment they have already made to a bigger commitment is a much easier transition for many people than going from nothing to the big commitment. And as a result, you are likely to get more people completing the process and signing up. You are therefore able to help more people with your educational content.

Another advantage is that in many cases it is easier on the eye. Having a button often blends in better with the design of the site than a email address field.

Examples

Let’s take a look at some examples of using modals with trigger links.

Content upgrades

A content upgrade within the body of an article. You can mention the content update and when the reader clicks the link, they get a modal with the opt-in form.

An example of a link that opens a content upgrade form: Content upgrade link

The form opens in a modal:

Content upgrade form

The advantage of using a modal here is that it is much more subtle. Having a bigger form with the email address embedded in an article can really disrupt the flow of the article and this will put some people off.

Footer

A call to action in the footer to join your newsletter.

Primary call to action

Many people use an embedded form, including the email address field, in the primary call to action. But there is no reason why you can’t have a button instead, and when the reader clicks on the button, they get the modal with the opt-in form.

Setting up the modal with ConvertKit

After creating the form, you’ll need to add two pieces of code to your website.

  1. The Javascript code
  2. The link

You’ll find the Javascript code in the embed tab. You can add this anywhere to the page. ConvertKit recommends that you add it just below the link.

Click on the embed tab: ConvertKit embed tab

Copy the embed code:

ConvertKit embed code

The link can be found in the side panel next to the form. You can copy the link, paste it to your site and then adjust the anchor text.

ConvertKit modal link

Ensure it is only triggered by link

ConvertKit comes with three main options to display the modal:

Underneath these three options is the link to to add for the trigger.

The trouble is, if you grab that code and don’t change anything else, the modal will appear after 5 seconds, even if the user doesn’t click on the link. This is because timing is set to 5 seconds by default and there isn’t an obvious option to turn it off, apart from changing it to Exit Intent or Scroll percentage, which will also popup the modal without being triggered by clicking on the link.

The way around this is to set the scroll percentage to 200%. The user will never be able to scroll to 200%, so it will never be triggered except when the user clicks on the link.

Side note: technically you should be able to make this 100%, but I have seen cases where the modal will still appear. So 200% is a safe bet.

Wrapping up

There are some big advantages to creating a two stage option process. You are splitting the commitment level and making it easier for your readers to go from totally anonymous to sign up and enjoying your content over email.

If you’d like help setting this up for your website and ConvertKit account (or another provider), let me know.