How to Add a Cookie Banner to Your Website Using OzSpeed hPanel

A Cookie Banner informs users about the use of cookies on your website and allows them to consent to cookie usage. This is a legal requirement under regulations like GDPR and CCPA, and it helps build trust with your visitors by being transparent about data collection. Here’s a step-by-step guide on how to add a cookie banner to your website using OzSpeed’s hPanel.

---

Step 1: Choose a Cookie Banner Tool #

You can either code a simple cookie banner manually or use a third-party tool for a customizable solution. Popular cookie consent tools include:

• CookieYes
• OneTrust
• Osano
• Cookiebot

These tools provide ready-made banners and handle compliance with privacy regulations.

Tip: #

• Using a third-party tool saves time and ensures your banner meets legal requirements.

---

Step 2: Create a Cookie Banner (Manual Method) #

If you prefer to create a cookie banner manually, you can use a simple HTML, CSS, and JavaScript code snippet.

Example Code for Cookie Banner: #

htmlCopy code<!-- Cookie Banner HTML -->
<div id="cookie-banner" style="position: fixed; bottom: 0; width: 100%; background-color: #333; color: #fff; padding: 15px; text-align: center; z-index: 1000;">
  <p>We use cookies to improve your experience. By using our site, you agree to our <a href="/privacy-policy" style="color: #ffd700;">Privacy Policy</a>.
    <button id="accept-cookies" style="background-color: #ffd700; color: #333; padding: 10px 20px; border: none; cursor: pointer;">Accept</button>
  </p>
</div>

Example JavaScript Code: #

htmlCopy code<script>
  document.getElementById('accept-cookies').addEventListener('click', function() {
    localStorage.setItem('cookieConsent', 'accepted');
    document.getElementById('cookie-banner').style.display = 'none';
  });

  // Check if consent is already given
  if (localStorage.getItem('cookieConsent') === 'accepted') {
    document.getElementById('cookie-banner').style.display = 'none';
  }
</script>

Tip: #

• Customize the styles and wording to match your website’s design and tone.

---

Step 3: Add the Cookie Banner Code Using hPanel #

To display the cookie banner on your website, add the HTML and JavaScript code using OzSpeed’s hPanel.

How to Add the Code: #

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Settings > Custom Code.
3. Paste the HTML code in the Body Code section and the JavaScript code in the Footer Code section.
4. Click Save.

Tip: #

• Placing the JavaScript code in the footer ensures it loads after the main content, improving site performance.

---

Step 4: Test the Cookie Banner #

Before going live, test the cookie banner to ensure it functions correctly.

How to Test: #

1. Open your website in a new browser tab.
2. Check if the cookie banner appears at the bottom of the page.
3. Click the Accept button and refresh the page to ensure the banner no longer appears.
4. Clear your browser cache and test again to verify the banner reappears for new visitors.

Tip: #

• Test the banner on different devices (desktop, tablet, and mobile) to ensure responsiveness.

---

Step 5: Add a Link to Your Privacy Policy #

To comply with regulations, include a link to your Privacy Policy in the cookie banner.

How to Add a Privacy Policy Link: #

1. Update the HTML code of your cookie banner with a link to your Privacy Policy page:htmlCopy code<a href="/privacy-policy" style="color: #ffd700;">Privacy Policy</a>
2. Ensure your Privacy Policy page includes information about the types of cookies used, their purpose, and how users can manage cookie settings.

Tip: #

• Clearly explain how your website uses cookies to help users make informed decisions.

---

Step 6: Use a Third-Party Cookie Consent Tool (Optional) #

If you prefer a more advanced solution, use a third-party cookie consent tool like CookieYes or Cookiebot.

How to Integrate Cookiebot: #

1. Sign up for a free account at Cookiebot.
2. Copy the script provided by Cookiebot.
3. Log in to hPanel > Website Settings > Custom Code.
4. Paste the Cookiebot script in the Header Code section.
5. Click Save.

Tip: #

• Third-party tools automatically scan your website for cookies and provide a detailed consent banner.

---

Troubleshooting Tips #

1. Cookie Banner Not Displaying:
   • Ensure the HTML code snippet is added correctly in the Body Code section of hPanel.
   • Clear your browser cache and test again.
2. Banner Not Disappearing After Accepting:
   • Check the JavaScript code for errors in the console (F12 > Console tab).
   • Verify that the localStorage is being set correctly.
3. Non-Compliant Banner:
   • Ensure your cookie banner provides a clear opt-in option and links to your Privacy Policy.
   • Regularly review regulations like GDPR and CCPA to ensure compliance.

---

Additional Tips: #

• Customize the Banner: Tailor the appearance and wording of the cookie banner to align with your website’s branding.
• Provide an Opt-Out Option: Include an option for users to decline cookies for full compliance with privacy laws.
• Regularly Update Your Privacy Policy: Keep your Privacy Policy up to date with details about the cookies used on your website.