Transcript of video (modified slightly to read better)
Hi, in today’s quick vid, I’m going to show you how to add a Cookies Popup in WordPress. So, let me show you what I mean.
Reference: What is a cookie?
How to Add a Cookies Popup in WordPress
- If I go to this website, down the bottom you’ll see a banner. It says, “this website uses cookies to ensure you get the best user experience on our website”.
- And then they’ve got a link to their cookies policy and then a button to agree.
- So, it’s pretty simple.
- See screenshot below.
- So, what we’re going to do is go back to our WordPress dashboard and then go down to ‘Plugins’.
- Then click ‘Add New’.
- And in the search box we’ll type in ‘Cookies’.
- The one I’m going to use is this one here (see screenshot below).
- Because it has a lot of installations and it was recently updated.
Install and activate the cookies popup in WordPress
- We’re going to click the ‘Install’ button and once it’s installed click ‘Activate’.
- And once it’s activated, you’ll see it’s got a link to the ‘Settings’, or over on the left hand side you’ll see that it’s got its own panel.
- If you click on ‘Settings’, you’ll see here ‘Enable Cookie Bar’ is automatically turned on. See screenshot below.
What the cookies consent banner looks like
- Let’s go have a look and see what it looks like on the front end (yours will already be open, mine was closed because I’ve already done this once before).
- This is what the default banner looks like.
- See screenshot below.
- The banner includes; text and the Cookie settings. Which basically, you can turn on and off the ones that you don’t agree to.
- Then, once you’re happy with that you can click ‘Agree’.
- I’m not happy with that colour, so I might change that to a black background with white writing and a blue button.
- So to do that lets go back into the dashboard and click on the ‘GDPR Cookie Consent’ panel.
Basics settings of the cookie consent plugin
- Just before we customise the look, I’ll just go through the settings.
- Where it says, ‘Select the type of law’, if you live in Australia, it has to be this one here (GDPR), which is the European Union.
- If you’re in California then it’s this one (CCPA). We will leave these default settings here, and then click on the ‘Customise Cookie Bar’ tab.
- So, let’s change the Cookie Bar colour. See screenshot below.
- This is the background colour. So, select the colour and then change that to black.
- If you go down to ‘Text Colour’ and click that, I’m going to change that to white.
- And then just update your settings.
- Next, go and have another look (at the front end). That’s looks better.
The next thing to do is change the button color
- We’ll change that to blue.
- So, I have this really cool tool called ‘Colorzilla’.
- You can install it with Chrome and all you do is click the little colour picker and then go and choose a colour.
- I’m going to choose this blue (from my website).
- (The color picker) copies the colour code.
- Next, go back into the dashboard and click back on the ‘Cookie Consent’ panel.
- And then go to the ‘Customise Buttons’ tab. See screenshot below.
- And you’ll see there’s that green color.
- So that’s what I want to change. So, if you click the green and then paste over the colour that you want.
- Then click ‘Update Settings’.
Add text to the banner
- I’m just going to check (the other buttons) – accept button, reject button, to make sure there’s no more green buttons in there.
- So, if you click ‘Accept Button’ then you can change that one to blue as well.
- And I think the reject button and (the settings) button are fine, and the ‘read more’ is fine.
- Now, if you go back to the ‘Customise Cookie Bar’ tab, you’ll see some text. See screenshot below.
- I’m just going to open up the front end of the website in a new tab and show you (so that’s the text there).
- You can also see my button updated to the blue which looks a lot better.
- I’m going to shorten this text. So if we go back to our example, I’m just going to copy what they’ve got because it’s short and sweet, and put that into the box.
- And you just want to make sure that when you paste in your text, you don’t delete any of this code here.See screenshot below.
- Just highlight the text that you want to change and paste the new text in.
- And then ‘Update Settings’.
Change the button text
- One thing I wanted to show you also was how to change the button text.
- If you want to change the button text to something else like ‘Got it’, ‘Agree’.
- Go to the ‘Customise Buttons’ tab, ‘Accept All’ button tab and then you can put the new text.
- See screenshot below.
- So, I’m just going to type ‘Got it’.
- Then click ‘Update’.
- (If you go to the front end of the website) I’m just going to refresh that.
- And that looks better.
Cookie policy generator
- Another thing that I find very useful about this plugin is it actually creates a policy page.
- Underneath the (GDPR Cookie Consent)panel on the left hand side you’ll see ‘Policy Generator’.
- So click on that link.
- This is basically what is in the policy so it has an ‘About This Cookie Policy’ section, and this is the text that corresponds with that.
- And then it says, ‘What are Cookies?”, and then it tells you what a Cookie is so, each of these headings will be inserted into a page.
- Which is really good because you don’t have to think about what you’re going to write, it’s already there, written for you (just double-check it).
- Because I’ve already done this before it’s saying, ‘Update existing Cookie policy page’, but yours should have ‘Create Cookie policy page’.
- So, I’m just going to click ‘Update’, and there it is.
- See screenshot below.
Add the policy link to the banner
- What I want to do with this (policy) page now is actually put the link into this (banner) text.
- So, I’m going to go back to my pages, and (publish) my Cookie policy.
- Once published, you’ve got the option to view the page or copy the link, I’m just going to copy the link.
- And then, I’m going to click back to my ‘Cookie Consent’ panel and then go to the ‘Customise Cookie Bar’ tab.
- In here, I’m going to make an html link. See screenshot below.
- Next, update settings.
- And then we’re going to go and have a look at it to make sure that actually worked.
- Yep, so there’s the link there.
Other settings
- So, when you click on the link it should take you to the Cookie policy page.
- Now let’s go back to the plugin.
- Under ‘Customise Cookie Bar’ you can also choose whether you want the banner or a pop-up instead, or you could have a widget and put that in the footer.
- If you wanted to change the position of the banner you could put it in the header as well instead of the footer. So, you’ve got all these different options here. I actually prefer it in the footer because it’s kind of out of the way down there.
Ok, so that’s done. So I’ve shown you how to add a cookies popup in WordPress including how to install the plugin, set it up, add a Cookie policy page, and change the colours and text.
Thanks for watching. Bye.
