How to Create Custom Designs in OptinMonster with Canvas

Would you like to create a completely customized campaign? Do you have a pre-made form but want OptinMonster’s amazing page-targeting? With the Canvas Template, you can create custom designs in OptinMonster.

With OptinMonster, you can create an OptinMonster campaign and use the Canvas Template in just a few easy steps. Make sure you have an OptinMonster Pro subscription before we begin. If you don’t have a Pro subscription, you can upgrade by following this guide.

  1. Create a New Campaign
  2. Design your Campaign
  3. Embed your Campaign
  4. (Optional) Track Conversions
  5. Frequently Asked Questions

This tutorial will show you the general steps for using Canvas to create a customized popup in WordPress.

Step 1 – Create a New Canvas Campaign

The first step is create a new campaign by determining it’s type and title according to our guide.

For this guide, you should select the Lightbox Popup Campaign Type.

Choose Lightbox Campaign

Then, select the Canvas Campaign Template.

Select Canvas Theme

NOTE: You can use Canvas with all of our campaign types! While this guide walks you through creating a Lightbox Canvas campaign the same steps can be followed when creating any other campaign type.

Step 2 – Design Your Canvas Campaign

The next step is to design your popup. When the Builder opens you will notice an entirely blank campaign. Don’t panic, it is supposed to be blank to start with!

Canvas Overview

To configure the appearance of your Canvas campaign there are two important fields:

1) Custom CSS

This is where you’ll place any CSS styles you want to apply to your Canvas campaign. This field is located in the Optin panel of the campaign builder.

Add Custom CSS

2) Canvas Custom HTML

This is where you’ll place any HTML, Javascript, shortcodes or other embed codes (like a Facebook page widget) to be displayed in your campaign. This field is located in the Optin panel of the campaign builder.

Add Custom HTML

At this point, you have 3 options:

  1. Code It Yourself: If you are a savvy coder, you can place custom HTML and JavaScript in the Canvas Custom HTML field and you can place your custom CSS in the Custom CSS field.
  2. Use a Shortcode: Certain platforms, like WordPress, allow you to use another plugin’s form creator around your site by using a shortcode. For WordPress users, you can follow our guide here for embedding shortcodes in your campaign, like we did with Gravity Forms. Shortcodes can be placed in the Canvas Custom HTML field.
  3. Use Embeddable Code: You can also input code generated by another tool. For instance, if we want to make a Facebook Likebox Popup, we can use Facebook’s own code generator to create the custom code for us. Or we can use Twitter’s Dev Tools to Make a Twitter Follow Box. You can even connect with survey forms to create custom surveys.
Please remember when you are adding your Custom CSS, that it must be added according to our guide. Namely, make sure each new line of CSS begins with your specific campaign’s unique selector which can be found by selecting the question mark icon next to the Custom CSS field label.

Question Mark Icon

Step 3 – Embed Your Canvas campaign on Your Website

Once you finish designing your Canvas campaign you’re ready to embed it on your website!

Check out our Platform Docs for guides on adding OptinMonster to many popular platforms.

Step 4 – (Optional) Track Conversions

You can track conversions by adding the class om-trigger-conversion to your Submit Input Button to trigger a conversion when a form is submitted. This could also be added to a link as a class if you want to count a “click on a link” as a conversion.

For more information and walkthrough, check out our guide for Tracking Conversions when using OptinMonster Canvas Technology.

Looking for an example of using the Canvas theme? Check out our guide on how to create a Facebook Like Box using Canvas!

Frequently Asked Questions

Q: What types of campaigns support Canvas?

A: All of our campaign types support Canvas!

Q: Can I only use the Canvas Template to collect emails?

Aside from using OptinMonster campaigns to build your email list, you can use our Canvas technology to display special coupons, e-commerce applications, related products, Facebook like box, or basically anything else that you can code or embed.

Check out our blog post where we show you 9 Creative Ways you can use OptinMonster’s Canvas Technology.

For instance, have you ever wondered how to create a Facebook like box popup? With OptinMonster’s Canvas Technology, you can create a customized Facebook campaign so that your website visitors can like your Facebook page straight from your OptinMonster campaign!

Q: Why are my inline comments being wrapped by multi-line comments?

A: OptinMonster will wrap all inline comments into multi-line comments, which is necessary for OptinMonster’s proper handling and processing of the code involved.

Therefore, this:

 // Your Comments 

becomes this:

 /* // Your Comments */ 

Q: Why doesn’t my Custom HTML with JavaScript allow the Tracking of Conversions?

A: If your custom code is using JavaScript on the submit event, then you need to make sure when possible that your last line on that submit JavaScript is:

return true;
Exception: If you are doing any sort of redirect if the submission is successful on your customized submission JavaScript code then there is nothing OptinMonster can do to track the conversion.

Q: Is there a way track a conversion but not track cookies and run the success event?

A: Yes, if you don’t want any cookies set for an alert such as a floating bar that shows information, you use Custom HTML. However, for tracking conversions this way, you will add the class om-trigger-alt-conversion. So a link could look like:

<a href='' class='om-trigger-alt-conversion'>Check out OptinMonster!</a>

This class will also bypass the success function and not set cookies as well, including not setting any global cookies, etc.