How to Create Custom Designs in OptinMonster with Canvas

Canvas is a dream come true for all DIY users and developers!

It allows you to create completely custom popups by simply inserting your own HTML and CSS while enjoying the page-level targeting, A/B testing, exit-intent, cookie configuration, and everything else that you have come to love about OptinMonster.

Aside from using OptinMonster popups 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 want. 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 optin so that your website visitors can like your Facebook page straight from your popup!

Click on the button below to see an example of the MonsterEffects™ “Flip Down” animation integrated with the Canvas Technology to show a Facebook like popup box for OptinMonster.

Click Me to See MonsterEffects™ + Canvas in Action!

With OptinMonster, you can create a Canvas popup optin 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 Optin Campaign
  2. Design your Optin
  3. Start the Campaign
  4. Embed your Optin
  5. (Optional) Track Conversions
  6. 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 Optin Campaign

From your OptinMonster Dashboard, you need to click the Create New Optin button.

Select the Create New Optin button from your OptinMonster Dashboard to begin creating your optin.

On the next screen, you’ll be prompted to do the following:

  1. Optin Campaign Title: Give your Optin Campaign a Title.
  2. Website: Select the Website you’re creating your optin for or add a new website.
  3. Select Your Design: Select your optin type. In this case, select the Lightbox design.
  4. Select the Canvas Template.

Choose the Canvas Template to begin configuring your Canvas optin.

For now, select the Canvas Theme by clicking Use this Template on the bottom of the template.

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

Step 2 – Design Your Canvas Optin

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

Your Canvas optin will appear completely blank when first created.

To configure the appearance of your Canvas optin there are two important fields:
Custom CSS: this is where you’ll place any CSS styles you want to apply to your Canvas optin. This field is located in the Setup panel of the optin builder.

Custom CSS for Canvas

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 optin. This field is located in the Optin panel of the optin builder.

Custom HTML for Canvas

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 optin, 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, since 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 optin’s unique selector which can be found by selecting the question mark icon next to the Custom CSS field label.

Each optin uses a unique CSS selector you can prepend your CSS styles with.

Step 3 – Start the Campaign

When you create a new optin, it’s Paused by default.

Once you’ve finished configuring your optin and it’s ready to be displayed on your site, hover over the status bar in the top menu and choose Start Campaign.

You can toggle the optin's status from Paused to Live in the optin builder by selecting the Start Campaign button from the top toolbar.

Once your campaign is live you’ll see this status reflected in the top menu bar.

The status of your optin is displayed in the top toolbar of the optin builder as either Live or Paused.

Need to pause your campaign again? You can do that in the optin builder too; simply hover over the status bar again and this time choose Pause Campaign.

You can Pause your optin campaign within the builder by selecting the Pause Campaign button from the top toolbar.

Step 4 – Embed Your Canvas Optin on Your Website

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

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

(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 adding 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.

Frequently Asked Questions

Q: What types of optins support Canvas?

A: All of our optin types support Canvas!

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.