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.
Of course, in the future, the WordPress developers for this WordPress plugin may remove this functionally.
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 this corona banner on my website
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 realize how to do which I explain in the next section.
How I changed this corona banner on my website
The default settings for this corona banner looked like this.
One, I did not want to display the official confirmed and recovered statistics.
Two, I wanted to change the text in recommendation five to “Stay at home”.
Three, I wanted to change the headline text to “Coronavirus: Stay at home. Help stop the spread of coronavirus.”
Now I explain how I make those changes.
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:
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”.
Three, I paged down to animation and changed that value to none.
Four, I changed the bar opacity value in the colors section to 100.
Five, Then I clicked “save changes” to implement these changes.
When I browsed to my site the tweaked corona banner was displayed with these changes done.
Later on I decided that I wanted to edit the headline message again.
That is how I display a corona banner on my website. Job done.
How to re-display this 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.
- Browse to the site using the Microsoft Edge browser
- Press “alt-X” for “settings and more”
- On the left pane, select “developer tools” from the list
- Click on the arrow beside “local storage”
- Click on the website name
- See some key values in middle pane
- Right click once on the “coronabar” value
- Then click on the “delete item” entry from a few options
- Open up a new Microsoft Edge browser session
- Go to the website and the corona banner is displayed
These instructions worked for me.
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.
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.