CM Notification Bar (CMNB) - Use Case - How To Create an Informative Message Bar On Your Site

Use Case - How To Create an Informative Message Bar On Your Site

Back to User Guide

Note: this guide requires:

Video Use-Case

Introduction

CM Notifications Bar allows to create notification campaigns on your WordPress site. The informative message bar can be placed at the top or at the bottom of the site. The notification bar is fully customizable and supports adding images and HTML. 

Use Case Front-End

The notification bars are displayed randomly every time the visitor loads the page. The visitor can see the countdown on the left side of the notification. He can also close the message by clicking on the "X"-button. We've covered the whole bar with one link, so clicking in any place of that message redirects the visitor to the page that we've specified.

Use Case Assumptions

In this example use case guide, we'll cover how to create, customize and display notification campaigns on your WordPress site. 

We assume that you have already bought the plugin, but not installed it yet.

It follows:

Installing The Plugin

The process is the same for all CM plugins and add-ons.

  • 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

Plugin Settings

Let's start with configuring the plugin. Navigate to Admin Dashboard → CM Notification Bar Pro → Settings.

There you can see the following options:

  • Geolocation API Key - Add a Geolocation API to know where visitors who click on the notifications are located. To receive API register at http://ipinfodb.com/register
  • Custom Post Types - Select custom post types on which you want to display Notifications. It relates to global Notifications that are displayed on all posts/pages, and not relates to local Notifications that are displayed on specific posts/pages.
  • Display countdowns by default - Choose whether countdowns will be enabled by default. This option can be overridden specifically for each notification campaign. 
  • Add margin to <body> / <header> - Decide if to display margin to the body or header elements. It may help to solve visual conflicts with some themes.

Click the button Update after changing the settings.

Managing Notification Campaigns

To manage notification campaigns, navigate to  Admin Dashboard → CM Notification Bar Pro → Notifications.

There you can see the table with all created notification campaigns. Here you can do the following:

  • Bulk actions - You can apply bulk actions to notification campaigns: Edit and Move to Trash. You can also edit or delete specific campaign by hovering on it and clicking on corresponding buttons.
  • Date filter - You can filter notification campaigns by dates: month and year.
  • Item name - In this column, you can sort notification campaigns by their names.
  • Global - This column shows if the notification campaign is global or not. It depends on if the notification is displayed on all posts/pages or only on the specific ones.
  • Date - In this column, you can sort notification campaigns by the date of creation.

Creating Notification Campaigns

To create a new notification campaign, click on Add New Notification.

There you will see a form for creating a notification campaign. It consists of two parts - first is for creating the notifications itself, and the second part with options.

  1. Title - Add a name for a notification campaign. It's for internal usage only, it will not be displayed on the front-end.
  2. Toggle All - Clicking on this button toggles all notification items that you've added.
  3. Content - The form for creating a notification itself. It's a Visual and Text editor, so you can add images, add links and use HTML to customize the message.
  4. Add Notification Item - You can add any number of notifications within one campaign by clicking this button.

Let's create two notifications - one with text, another one with the image. They will be displayed randomly on the page.

TIPs

You can toggle notification items to minimize their sizes by clicking on the arrow for the corresponding item.

To delete not needed item - click on the "X"-button:

Now, when the notifications are created, let's configure the behavior and appearance. The second part of the form has a few tabs.

Basic Visual

The options in the Basic Visual tab are:

  • Display method - You can choose between Random or Selected. Random display shows a random notification from the campaign, while selected allows you to pick which notification to shown. This is useful if you want to display specific messages at a certain time during the campaign. Let's choose here Random for our use case.

    • Selected - This option appears if you choose corresponding option. You can choose in the dropdown the notification which should be displayed.

  • Position - Define the position where the notification bar will appear: on Top or at the Bottom of the page.
  • Z-index - If you find that the notification bar is under other elements, increase this value. The default value is 100. Please input an integer value (0-10000000000).

  • Background color - Change the background color using hexadecimal color format or keep the default white. Let's set the same color as in the banner that we've added in the Notification Item #2.

  • Text color - Change the text color of the message using hexadecimal color format or keep the default black. Let's set the dark blue color.

  • Text vertical margin - Specify how wide the text vertical margin is. This determines how far down the text is from the top margin. You can set the value in a few formats - em, px, pt or %.

  • Text line height - Specify the size of the text line height. You can set the value in a few formats - em, px, pt or %. Let's set here the value "2em".

  • Text size - Specify the text size. You can set the value in a few formats - em, px, pt or %. Let's set here the value "16px".

  • Notification bar height - Set the height of the vertical width of the notification bar. You can set the value in a few formats - em, px or pt.

Advanced Visual

Second tab is Advanced Visual. The options are:

  • Show interval - Choose how often the notification bar should be displayed on the page:
    • Every Time Page Loads - Let's choose this option now.
    • Only First Time Page Loads - In this case one more option will appear:

      • Interval reset time - You can set the amount of days, when the notification will be displayed for the visitor again after previous appearance. The default value is 7 days.

  • Statistics clicks counting method - Choose how clicks are counted:
    • Only one click per variant show
    • All clicks until close button click - Let's choose this option now.
  • Cover whole bar with link - Makes whole notification bar clickable to one link that you've specified in the notification message. Let's enable this option.

Activity

Next tab is Activity. The options are:

  • Device type - Choose the device type where to display the notification bar:
    • All devices
    • Desktop
    • Mobile
  • Show on every page - If this checkbox is selected, then this notification will be displayed on each post and page of your website. This way, this notification campaign will be global - we've talked about it earlier. Note: if you have created another notification campaign that is specified to be displayed on the specific page, then this campaign will have higher priority than global.
  • Show on homepage - If this checkbox is selected, then this notification will be displayed on the homepage (main URL of your site).
  • Minimum device width - Select the minimum width of the device (in pixels) where the notification should be displayed. "700" will hide it on most smartphones, but not tablets. Shows on all devices if blank.
  • Show on URLs matching pattern - Set URLs, where the notification campaign should be displayed. Permalinks must be enabled for this function to work. You can set either full URL, for example - https://your-site.com/example/, or a slug of needed page, e.g. - /example/.

  • Show on selected posts/pages - Another way to specify, where to display the notification campaign. Let's choose this option. You can find needed post or page in the dropdown. Let's choose one of the pages.

    You can add any number of posts or pages by clicking on the button +Add Page, toggle the items to minimize their sizes or delete not needed ones:

Countdown

Last tab is Countdown. The options are:

  • Enable countdown - If this checkbox is selected, then the countdown will be displayed next to the notification message. It is useful, when you need to propose some limited offer to your visitors. The dates and time for counters are configured lower. Let's enable this option.

  • Countdown text - You can specify text which will be displayed with the countdown. To choose the custom place for the countdown, put the placeholder {{countdown}} in the needed place of that text.

  • Countdown placement - If this checkbox is selected, then countdown text will be displayed on the right side of the actual notification content. Let's keep this option unchecked to display the countdown on the left side.

  • Activity dates - You can set the specific dates or period of times when the notification campaign will be displayed. Just click the "+"-button to add new dates. Let's set a couple of periods.

  • Activity days - You can choose the activity days and time for current notification campaign. It is useful, if you want some notifications to be constantly displayed on specific days of the week. If no days are chosen, then it will be displayed every day. We're not going to set any days here for our use case, as we've already specified some days in the previous option.

The configuration is done, now scroll up and click the button Publish to create the notification campaign.

Result

Now let's check how it looks like on the front-end.

The notification bars are displayed randomly every time the visitor loads the page. The visitor can see the countdown on the left side of the notification. He can also close the message by clicking on the "X"-button. And as we've covered the whole bar with one link, clicking in any place of that message redirects the visitor to the page that we've specified.

Statistics

The plugin also allows you to monitor the statistics of your notifications. Navigate to Admin Dashboard → CM Notification Bar Pro → Statistics.

There you can see 3 tabs with different types of reports. For all types of statistics you can set a date range.

Daily Report

Daily Report shows statistics by dates. Here you can see all notifications events like clicks on bars, amount of impressions, ratio (clicks to impressions). If the notification has a few variants - you can see the statistics for all of them.

Report by Period

Report by Period displays statistics by notifications items. Here you can see data for each notification and variant like amount of impressions, clicks and ratio.

Access Log

Access Log shows statistics as graph. You can choose to see all notifications statistics of just select the specific one. For this type of statistics you can set a time range and also choose if you want to see statistics for a single notification or all for all notifications on one graph.

End Result

Following instructions found in the plugin and guides, you should be able to create, customize and display notification campaigns on your WordPress site. 

Use Case Front-End

The notification bars are displayed randomly every time the visitor loads the page. The visitor can see the countdown on the left side of the notification. He can also close the message by clicking on the "X"-button. We've covered the whole bar with one link, so clicking in any place of that message redirects the visitor to the page that we've specified.


More information about the CM Notifications Bar

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Support Documents