How to Use WordPress Shortcodes with Canvas

OptinMonster allows you to easily use Shortcodes from your WordPress plugins or theme with our Canvas Technology. Follow our documentation to learn how to use WordPress Shortcodes with Canvas.

REQUIREMENTS: Canvas requires a Pro Subscription.
  1. Add Your Shortcode
  2. Refresh Optins in the OptinMonster API Plugin
  3. Go Live
  4. View & Test Your Optin
  5. Make Style Adjustments (optional)
  6. FAQs

Step 1 – Add Your Shortcode

In this demo we’ll add a WPForms shortcode, so we can copy the shortcode for our form after selecting the Embed button in the plugin’s form builder.

Copy the WPForms shortcode for your form to add to a Canvas optin.

Once you’ve copied the shortcode you’ll need to add it to the Canvas Custom HTML field in the Optin panel of the builder.

Paste your WPForms shortcode into the Canvas Custom HTML field.

Note: The optin builder will not show you a live preview of the parsed shortcode; no need to worry that the shortcode appears in the preview exactly as you pasted it into the Canvas Custom HTML field.

Save the changes to your Canvas optin before proceeding.

Step 2 – Refresh Optins in the OptinMonster API Plugin

Before the optin can display the shortcode it contains, the optins list in the OptinMonster API plugin needs to be refreshed. This needs to be done every time you add, edit or remove a shortcode from the optin.

Navigate to the WordPress Admin > OptinMonster > Optins tab view and select the Refresh Optins button.

Select the Refresh Optins button in the OptinMonster plugin to download the latest version of your optins to WordPress.

Step 3 – Go Live

Next, in the OptinMonster plugin, select the Go Live link for your optin to output the embed code across your site.

Enable your optin in the OptinMonster API plugin by selecting the Go Live link in the Optins list view.

NOTE: The OptinMonster API plugin controls where the embed code is placed throughout your site. For specific page targeting we recommend you use the Display Rules in the optin builder following our page-level targeting guide.

Step 4 – View & Test Your Optin

Go ahead and load the front-end of your site where you’ve specified the optin should load to ensure the shortcode is being correctly parsed.

Correctly parsed shortcode in Canvas.

Here the shortcode is being correctly parsed, but there are a few more things we can do to make our form look more enticing.

Step 5 – Make Style Adjustments (optional)

As with any Canvas optin, you may wish to add CSS to control the appearance of the optin’s contents.

You can easily add CSS to your Canvas optin in the Optin panel’s Custom CSS field.

Add Custom CSS to Canvas in the Optin panel of the builder.

Save any changes before returning to the front-end of your site to view the updated optin.

Custom CSS can help you achieve the desired appearance for your optin form.

That’s it! Using Canvas and Shortcodes from WordPress allows you to very quickly create a customized optin to fit your needs!


FAQs

Q: What if I’m using Google Tag Manager to display my optins on my site?

A: If you’re using Google Tag Manager to embed your optins instead of the OptinMonster API plugin for WordPress the shortcodes will not be parsed in your optins. If you want to use shortcodes in your optins you’ll need to use the OptinMonster API plugin to control where the optins appear on your site instead of Google Tag Manager.


Q: What if I’m manually adding the optin embed code to my site?

A: If you’re manually adding the optin embed code to your WordPress site instead of the OptinMonster API plugin for WordPress the shortcodes will not be parsed in your optins. If you want to use shortcodes in your optins you’ll need to use the OptinMonster API plugin to control where the optins appear on your site instead of Google Tag Manager.