WordPress Disclaimer Plugin (CMWMD) - Use Case - How to Create a Bottom Notification Bar

Use Case - How to Create a Bottom Notification Bar

Introduction

The WordPress Disclaimer Plugin lets you create custom welcome messages, ask users to accept site legal terms or confirm the age in order to get access to the content.

Use Case Front-End

Example of the bottom notification bar with a simple image banner that contains a link to the target page:

Example of the bottom notification bar with promo text and button with the link:

Example of the bottom notification bar that informs users about using cookies on the site, allowing them to accept these terms:

Use Case Assumptions

In this example use case guide we will consider how to create a bottom notification bar which can contain text, image or action buttons.

It follows:

• Installing the plugin
• Creating bottom bar campaign
  • Activity settings
  • Display options
• Examples of bottom notification bars
  • Bottom bar with image banner
  • Bottom bar with text content
  • Bottom bar with agreement
• End result

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

Creating Bottom Bar Campaign

Let's first consider the process of creating a notification campaign and needed settings, and then create a few examples.

To create a bottom bar notification, navigate to Admin Dashboard → CM Welcome Message & Disclaimer for WordPress → Add New Message.

There will be a form which you need to fill. At the top, write a title of the campaign - it is for the internal usage only, it will not be displayed on the front-end.

Next, under the Message Content section, you need to configure the basic content that will be displayed in the bottom bar message. Here you can add text, media and HTML content using either Visual or Text editor:

Below there's a section with campaign settings, it has a few tabs. Now we will focus mostly on a couple of them that are important for our use case.

Activity Settings

The tab Activity allows you to define where to show the bottom bar message. The options which are important for our use case are marked with green on the screenshot below.

• Show on every page - Enable this option if you want the bottom bar message to be displayed on all pages of your site.
• Show on homepage - Alternatively, you can enable this option if you want to display the bottom bar message on the homepage. Have a note that the previous option for displaying message on every page, also includes the homepage.
• Show on URLs matching pattern - This option allows you to define the specific single page where you want to show the bottom bar message. You need to add URL link of the needed page.
• Show on selected posts/pages - This option allows you define multiple specific pages, where you want to display the bottom bar message. Just choose the page or post from the dropdown list, and click +Add Page button if you want to choose more pages. For our use case, we used this option and chose the specific page.

Display Options

The tab Display Options allows you to choose between notifications types - Pop-up and Bottom Notification Bar.

When you choose Bottom Notification Bar, the relevant options appear below:

• Bottom notification bar height - Define the height of the bottom notification bar in pixels.
• Cover whole bar with link - Makes the whole notification bar clickable to one link.
• Redirection link for banner - Add here a URL which you want to use for a banner. It applies either to the whole banner, if the option above is enabled or to the checkout button which is configured below.
• Label for Checkout Button - Define the label for the button that will be shown in the bottom bar. If this field is empty, then the button will not be displayed.
• Where to show additional buttons - The bottom notification bar can display not only the checkout button, but also Accept and Decline buttons, and Age verification buttons. You can define where to display them:
  • Don't show
  • On the left side from the banner content
  • On the right side from the banner content
  • Below the banner content
• Link for background image banner - Define a campaign background image. Enter the URL of the image you'd like to use for a bottom bar.
• Background image type - You can choose how to process the image to fit the bottom bar size:
  • Centered Image - In this case the image will be cropped to fit the bottom bar size.
  • Full Banner Image - In this case the image will be resized to fit the image to the bottom bar size.
• Message Background color - Define the background color of the bottom notification bar.

To finish creating the notification campaign, click the button Publish in the metabox on the right side:

Now when we're aware about the basic settings, let's get some practice and create a few bottom notification bars.

Examples of Bottom Notification Bars

We will create a few different bottom notification bars as examples of what you can achieve with our plugin:

• A bottom notification bar with a simple image banner that contains a link to the target page.
• A bottom notification bar with promo text and button with the link.
• A bottom notification bar that informs users about using cookies on the site, allowing them to accept these terms.

Bottom Bar With Image Banner

Let's first create the most basic bottom notification bar - just by placing an advertising image under the Message Content section.

Now in the Display Options tab we will configure the following:

• Bottom notification bar height - Set it to 100 px.
• Cover whole bar with link - Enable it, so clicking in any place of the banner will redirect the user to the specified link.
• Redirection link for banner - Here we specify the link where we want to redirect the user.
• Message Background color - Let's set here the same color as on the image.

Message Background color

The image that we added in the section Message Content is not stretched to full width, as we want the main content to be in the middle of the banner. If we don't set anything in the option Message Background color, there will be a default background:

And with the background color that we specified it looks much better:

Now let's save the settings and check the result in action:

Bottom Bar With Text Content

Now let's create another bottom bar using text content and some background image.

Under the Message Content section we add some text and format it using either Visual or Text editors. Using HTML we formatted heading, font size, added a link and added a top padding.

In the Display Options tab, we set the following:

• Change the notification bar height to 120 px.
• Add a URL link for a background image.
• Center the background image.

Let's check the result on the front-end:

Now let's add a call-to-action button. For that we set the following:

• Add a redirection link.
• Define the label for the button.
• Define where to show the button - on the right side from the content.

Here's the result:

Now let's choose the option to show the button on the left side from the banner content:

Result:

When we choose to place the button below the banner content, it's also better to increase the bottom bar height:

And add an extra line to the Message Content to make some space between the content and the button:

Here's the end result:

Additionally, we can switch the option Background image type from Centered Image to Full Banner Image, if we want to fit the image differently:

Result:

TIP - Customize the Checkout Button

You can change the font size, font color and background color of the checkout button. To do this, navigate to Admin Dashboard → CM Welcome Message & Disclaimer for WordPress → Settings → Style tab.

The relevant settings can be found under the Checkout button section:

Learn more about plugin settings in this user guide:

• WordPress Disclaimer Plugin (CMWMD) - General Settings

Bottom Bar With Agreement

One more case that we are going to consider is a banner that informs users about using cookies on the site.

Let's add a corresponding text under the Message Content section:

Under the Accept Button tab, let's enable the option to show the Accept button with the checkbox that includes the link to the agreement text:

And under the Decline Button tab we enable the Decline button, which we rename to "Close" - this button will just allow users to close the notification bar:

Under the Display Options tab we set the following:

• Set the bottom notification bar height to 130 px.
• Place the buttons on the right side from the banner content.
• Keep the background image which we already used there and center it.

Additionally, we can disable the default close button by turning on the setting Disable option to close message window under the Advanced Visual tab:

Now let's check the result on the front-end. We inform the user that the site uses cookies, and we provide him a link to the term of service which he can check and accept, or just close the notification bar:

Similarly we can place the buttons below the banner content. Let's change the relevant option and change the notification bar height under the Display Options tab:

And let's additionally enable 2 more options under the Accept Button tab:

• Show a separate line - To visually divide the section with buttons from the text content.
• Prechecked - Enable it so the checkbox with the agreement text will be checked by default when the page is loaded.

Result:

End Result

Following instructions found in the plugin and guides, you should be able to create a bottom notification bar which can contain text, image or action buttons.

Use Case Front-End

Example of the bottom notification bar with a simple image banner that contains a link to the target page:

Example of the bottom notification bar with promo text and button with the link:

Example of the bottom notification bar that informs users about using cookies on the site, allowing them to accept these terms:

	More information about the WordPress Disclaimer Plugin 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