CM Pop-Up Banners (CMPB) - Use Case - Adding Pop-Ups With Image, HTML and Video to Your Site
Use Case - Creating Pop-Ups With Image, HTML and Video
CM Pop-up Banners allows you to show different kinds of banners on your website.
Use Case Front-End
Banner With Video
Use Case Assumptions
In this example use case guide, we'll cover how to create a simple pop-ups with the plugin. We consider that you have already bought the plugin, but not installed it.
- Installing the plugin
- Configuring the plugin
- Adding the first pop-up
- Banner examples
- Recording user statistics
Installing The Plugin
The process is the same for all CM plugins.
- Download the plugin from your customer dashboard
- Log in to WordPress and navigate to the WordPress Admin → Plugins settings
- Click on Add New
- Activate it and add the license
Learn more: Getting Started - Plugin Overview
Configuring The Plugin
What You Can Change
- Turn statistics on or off
- Turn Geolocation on or off
- Show campaigns in different post types
- Max width for displays across all campaigns
Navigate to the Admin Dashboard → CM Pop-Up banners for WordPress → Settings.
In the General Options tab you can find the plugin options.
- Collect Statistics - Turn the Statistics module (views/clicks) ON/OFF.
- Geolocation API Key - enter the Geolocation API Key in the provided box.
Where is Geolocation Used?
The Geolocation will be used for the plugin log file. If it is not present, the log file will not include the country name. You can receive the API key by registering at http://ipinfodb.com/register.php.
- Custom Post Types - Select Custom Post Types on which you want to display Campaigns. Showing a specific campaign on a custom post type also depends on each campaign settings.
- Select max width for mobile devices - Will apply to all campaigns.
Adding First Pop-up
With the plugin ready to go, it's time to add the first pop-up! Navigate to the Admin Dashboard → CM Pop-Up Banners → Add New Campaign.
How It Works
- You can create multiple campaigns
- Each campaign can have multiple banners
- Each campaign has different options, such as when and where it appears.
Enter a title for the new campaign in the provided box. The title will not be shown on the banner itself but will help you identify the campaign in the plugin statistic panel.
In the Advertisement Items box, enter the content for the campaign in the box, as well as any other media, links, etc.
Underneath the box, click on the Add Advertisement Item button to add the new item
This is used in cases where you want to have a random popup to show up or once you have a new and old copy you want to choose between. Click on Show AdDesigner to use a visual designer for the Pop-Up banners.
The pop-up banner can be text only, image only or a mix of both. In the above example, an image was used. You can also place a video inside the box if needed.
Same for Fly-In. It just appears on the corner of the page.
In this section, you can define the size, shape and position of the banner.
- A) Type - Choose the type of campaign you want from the drop-down menu.
- Pop-Up - modal on the center of the screen, with tinted background
- Fly-In Bottom - modal in the bottom right corner of the page
- Full Screen - displays the modal on the full screen, with the background color covering the whole site
- B) Display method - Click the box to select the display method for the campaign, either random or selected. This is used when you have several items available for the same Pop-Up. Once selected is used and you have more than one item please choose the one you would like to show up.
- C) Width - Enter a value in the provided box for the campaign width. Accepted values include: numbers (in pixels), percents (eg 75%) or "auto".
- D) Height - Enter a value in the provided box for the campaign height. Accepted values include: numbers (in pixels), percents (eg 75%) or "auto".
- E) Padding - Campaign padding. If blank defaults to 10px. Please input the value in pixels.
- F) Z-index - The 'z-index' of the banner. If you find that the banner is under other elements, increase this value. If blank defaults to 100. Please input an integer value (0-10000000000).
- G) Background colors - Enter a value in the provided box for campaign background color. Accepts also "transparent".
- H) Background image - Campaign background image. Please the URL of the image you'd like to use for all of the banners in the campaign.
- I) Shape - Choose the shape of the modal from the drop-down menu.
- J Center content vertically/horizontally - If this checkbox is selected then this campaign's banner content will be centered vertically/horizontally.
Define effects, delay, statistics count and d behavior - when it appears and for how long.
- A) Show effect - Choose a show effect for the campaign by selecting from the drop-down menu. The show effect will add
- B) Delay to show - Enter a value in the provided box to choose the delay time before the Pop-Up banner appears on the page.
- C) Show interval - Choose a show interval for the campaign by selecting from the drop-down menu.
- Every Time Page Loads - when this option is selected the banner will be displayed every time, on each page where it's set to show
- Only First Time Page Loads - when this option is selected, the banner will be displayed for each user once on all of the pages where it's set to show.
- Once on Any Page - when this option is selected the banner will be displayed just once per user. If it's set to show on multiple pages it will be displayed only on the first one of them.
- X amount of times till reset - How many times campaign should be shown. Resets after "Interval reset time". This option is good when you want the user to see the campaign only X amount of time and to reset this count every Y days
- D) Underlay type - Choose the underlying type for the campaign from the drop-down menu. In a dark underlay is chosen all the web page content behind the pop-up will be hard to read while pop-up appears.
- E) Statistics clicks counting method - Choose an option for the statistics clicks counting method, either Only one click per banner show or all clicks until close button click. This will affect the information which is collected for the campaign statistics and reports.
Enable a sound triggered when the popup shows.
- None - no sound will be played
- Default - the generic sound bundled with the plugin will be played
- Custom from media library - after selecting this option you'll need to provide the URL of the sound file you would like to play.
For the best results, you should first upload the mp3 file to your Library and copy its direct link.
Define where the pop-up will show and to which users/devices.
- A) User type for pop-up (available from version 1.3.2) - Select which group of users will see the pop-up. The options are:
- All users.
- Only logged-in.
- Only non-logged-in (guests).
- B) Show pop-up after users registration - If this option is enabled, this pop-up will appear when a guest user successfully registers. It requires the CM Registration plugin.
- C) Show on every page - Check the box to display the campaign on all posts and pages.
- D) Show on homepage - Check the box to display the campaign on the homepage.
- E) When fire the popup? - Choose when to fire the popup. Read more on this page.
- F) Minimum device width - Enter a value in the provided box to choose a minimum width for the campaign banner. This option let you limit the campaign to show only on non-mobile devices.
- G) Maximum device width - Similar to the previous option.
- H) Show on URLs matching pattern - Enter a url to display the campaign on the page. You can define a pattern in which this campaign will appear. It can be a category or a permalink path- for example your blog articles /blog/. This will cover all URL with the following pattern /blog/*.
- I) Show on selected posts/pages - Select from the drop down menu to choose the specific pages and posts the campaign will be displayed on. click the add a page button to add a page that is not listed.
- I) Activity dates - Read below:
Determine if the campaign will show up only on specific dates.
Click on the blue plus button to set an activation dates for the campaign. You can define multiple date range including the exact time per each.
Run the campaign at the exact same time every week.
You can specify more than one day for the recurring campaign activity.
TIP: Managing Campaigns
You can manage all campaigns from the Campaigns screen. It's possible to filter and quickly see if a campaign appears across all site (Global column).
TIP: Limiting Campaign to Mobile Devices
As a reminder, on each campaign setting, you can set the maximum width of the screen size in pixels to show on a specific campaign.
This will help you limiting the devices. For instance, Minimum device width 700 will hide the campaign in most smartphones.
Using The AdDesigner
The AdDesigner is a handy tool to generate quick banners. You can customize the size, border, title, font and more.
TIP: Accessing AdDesigner
- Using the controls you can change the way how the banner should look. All the changes are previewed live in the box labeled Banner preview.
- Once you've finished, copy the HTML code from the box labeled Code to copy into the HTML Ad editor.
Example: Banner With Image Form
Adding a banner with one or multiple images is easy!
When creating a banner, you can use the WordPress visual editor, meaning it's easy to upload images anywhere.
Example: Banner With Video
To display video (for example from Vimeo) in the pop-up banner, place <iframe> element with video URL as src attribute in the content (make sure you are in Text mode).
Learn How To Get Embed Code:
You can also set weight and height attributes like shown below:
Scroll down to the Campaign Options.
In the Basic Visual tab, match the values of Width and Heights to the iframe attributes.
To complete Campaign set the rest of pop-up options (read more here) and publish Campaign.
TIP: Adding AutoPlay
Making the video autoplay depends on the parameters you use in the iframe and depends on the platform you use (Vimeo, Youtube, Wistia or other)
For YouTube you need to pass something like this:
<iframe width="640" height="360" src="[YouTube Video URL]?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
For Vimeo simply add ' &autoplay=true' at the end of your embed src URL.
Learn more: CM Pop-Up Banners (CMPB) - Video Pop-Up Banner
Advanced Example: Banner With HTML Form
To create a form in the pop-up banner, navigate to the Admin Dashboard → Add New Campaign.
In the content field place form code (see example code on the below).
As an action attribute set path to the PHP file with function to handle form data after sent. (Writing the PHP code for handling the form won't be covered in this documentation).
Forms Coming From Shortcodes
Most times you will not want to write your own form nor the code handling it, instead, you can place a shortcode coming from the 3rd party plugin which will generate the form HTML automatically and make sure the data sent from the form is saved.
ExamplePop-Up with provided sample form looks like this. After the "Publish" is clicked the data from the form will be sent to the url passed in the "action" attribute of the form.
You can also place JS scripts here to support validation on the client-side, tooltips, etc.
Recording User Statistics
How It Works
- The setting Collect Statistics has to be enabled
- You can track views and clicks of each campaign
- No personal information, such as IP, is collected
Navigate to the Admin Dashboard → CM Pop-Up Banners for WordPress → Statistics.
The report shows the Impressions and Clicks of all of the Campaigns and Banners within the set time frame, divided by each day.
- Click on the Daily Report tab.
- Enter a date in both fields to generate a report based on that time frame.
- Click "Filter" to display the report.
- Click "Clear Dates" to clear the dates and start over.
Report by Period
This report summarizes the usage for each Pop-Up banner over a period of time.
- Click on the Report by Period tab.
- Enter a date in both fields to generate a report based on that time frame.
- Clear the dates to start over.
The access log shows the overall use of pop-up banners on all sites in a histogram graph view, where the values on the X-axis are dates and on the Y-axis are numbers of requests.
- Click on the Access Log tab.
- Enter a date in the boxes provided to generate a report based on that time frame.
- Select the campaign from the drop-down menu.
Following instructions found in the plugin and guides, you should be able to complete the directory with multiple pop-ups.
Use Case Front-End