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.
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.
- Create a New Optin Campaign
- Design your Optin
- Start the Campaign
- Embed your Optin
- (Optional) Track Conversions
- Frequently Asked Questions
This tutorial will show you the general steps for using Canvas to create a customized popup in WordPress.
From your OptinMonster Dashboard, you need to click the Create New Optin button.
On the next screen, you’ll be prompted to do the following:
- Optin Campaign Title: Give your Optin Campaign a Title.
- Website: Select the Website you’re creating your optin for or add a new website.
- Select Your Design: Select your optin type. In this case, select the Lightbox design.
- Select the Canvas Template.
For now, select the Canvas Theme by clicking Use this Template on the bottom of the template.
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!
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.
At this point, you have 3 options:
- 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.
- 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.
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.
Once your campaign is live you’ll see this status reflected in the top menu bar.
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.
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.
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.
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.
// Your Comments
/* // Your Comments */