Want to display a Corona Banner on your website?

Want to display a Corona Banner on your website?

Help To Flatten the Corona Curve by Displaying a Corona Banner on Your Website.

If you are using the Cookie Notice WordPress Plugin, version 1.3.1 has an option to display a Corona Banner on your website. This includes 5 recommendations by the World Health Organisation to help flatten the curve.

Within the Settings area of this plugin are some options to allow you to configure it. This post is going to focus on the Corona Banner settings within this WordPress Plugin.

For the purposes of this post, I will assume that you have already installed, activated and changed the settings in the Cookie Notice WordPress Plugin to your liking.

How I implemented the Corona Banner on my website

Corona banner with help stop message

I had already been using the Cookie Notice WordPress Plugin on this website for some time. From time to time, when I log into the WordPress Dashboard area for this website, I notice that there is a Plugin update available. This is what happened earlier today. It advised me that there was an update available for the Cookie Notice WordPress Plugin. I simply updated this in the usual manner that WordPress updates are performed and it was done.

Next I went into the Posts option on my WordPress Dashboard and displayed to me was an information screen that provided some information about this Corona Banner along with two options.

Option 1 was to help by implementing the Corona Banner on my website and option 2 was to bypass this option. I’ll took the first option and the Corona Banner was activated.

I would have liked a message that displayed that the Corona Banner was now activated on my website along with where I could tweak it. This is actually very easy once you realise how to do which I explain in the next section below.

How I changed the Corona Banner on my website

The default settings for this Corona Banner looked like this.

Corona banner with default settings

One, I did not want to display the official confirmed and recovered statistics.

Corona banner with default settings

Two, I wanted to change the text in recommendation five to “Stay at home”.

Corona banner with recommendation five edited

Three, I wanted to change the headline text to “Coronavirus: Stay at home. Help stop the spread of coronavirus.”

Corona banner with help stop message

Now I explain how I make those changes.

Corona

1. Within your WordPress Dashboard, select Plugins from the menu on the left hand side, then page down if need be, to Cookie Notice.
As mentioned earlier in this post, I have assumed that you have already installed and activated the Cookie Notice WordPress Plugin.
I also assume that you have upgraded your version of the Cookie Notice WordPress Plugin that has this Corona Banner functionally.

2. The Cookie Notice Settings page is displayed. Page down through this until you reach the Corona Banner section:

Cookie Notice - Corona banner settings section - screen one

a) I unticked the tick against Current Cases as I do not want to display that information.
b) I enabled Text Strings as I want to do some editing.
One, I changed the Headline Message to “Coronavirus: Stay at home. Help stop the spread of coronavirus.”
Two, I paged down to recommendation five and edited “Stay inside” to “Stay at home”.

Cookie Notice - Corona banner settings section - screen one

Three, I paged down to animation and changed that value to none.

Cookie Notice - Corona banner settings section - screen one

Four, I changed the bar opacity value in the colors section to 100.

Five, Then I clicked the “Save Changes” to implement these changes.

When I browsed to my site the tweaked Corona Banner was displayed with these changes done.

Corona banner with help stop message

Later on I decided that I wanted to edit the headline message again.

Corona banner with stay at home, save lives message

That is how I display a Corona banner on my website. Job done.

How to re-display Corona Banner after it is dismissed

This Corona banner has dismiss functionally in place. Once dismissed, the Corona banner is no longer displayed.

This is what I do to re-display the Corona Banner after I have dismissed it. Normally users to a website would not want to see something after they have dismissed it. However I wanted to re-display the Corona Banner for my testing purposes and to also get the screenshots I provided in this post. 🙂

Hope these instructions help you out.

  1. Browse to the site using the Microsoft Edge browser
  2. Press “Alt-X” for “Settings and more”
  3. On the left pane, select “Developer Tools” from the list
  4. Click on the arrow beside “Local Storage”
  5. Click on the website name
  6. See some key values in middle pane
  7. Right click once on the “coronabar” value
  8. Then click on the “Delete Item” entry from a few options
  9. Open up a new Microsoft Edge browser session
  10. Go to the website and the Corona Banner is displayed

These instructions worked for me.

In closing

I was not looking for this functionally. However was happy to activate this functionally on my website to help flatten this curve during the early days.

I am also happy to write this detailed post with detailed how to images/screenshots so that other websites put up similar Corona Banners on their websites to help flatten this curve.

Corona banner with stay at home, save lives message

Stay well and stay safe.

I no longer display this banner on my website as I feel that the message is now well and truly out there. If someone does not know to do these things my now, where were they?

And also because I think that having this logic enabled slows down this website a bit. I like to ensure that this website displays its content as quickly as possible. I recommend using secure WordPress hosting that is also managed. That way you can focus more of your time on building your content. That is what I do. The webhost where this website is hosted is the same webhost that I recommend in my 17 Requirements Secure WordPress Hosting Providers Should Have article. I have come across no other webhost that has all of these requirements. If you want to learn about these requirements, you can read them here.

Leave a Comment