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.
- Create a New Campaign
- Design your Campaign
- Embed your Campaign
- (Optional) Track Conversions
- 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
For this guide, you should select the Lightbox Popup Campaign Type.
Then, select the Canvas Campaign Template.
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!
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.
2) Canvas Custom HTML
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 campaign, 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, 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.
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.
// Your Comments
/* // Your Comments */
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='https://optinmonster.com' 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.