Home
blogging tips
html-project

Floating Badge for Source Preferences – Boost Engagement HTML CSS JS

Add a floating badge with HTML, CSS & JS to boost engagement. Responsive, customizable, and perfect for better clicks via Source Preferences.
Aaqib Amin
Floating Badge for Source Preferences

Boost your website’s engagement instantly with a sleek floating badge built with HTML, CSS, and JavaScript. This small, interactive element appears on the side of your page, guiding visitors to take action, like following your brand on Google using Source Preferences.

The badge features clean styling, smooth hover effects, and a recognizable Google logo. Its structure makes it easy to place anywhere, and the script ensures it appears after a few seconds and can be closed easily by the user.

This beginner-friendly tool improves click-through rates and brand visibility, allowing visitors to interact seamlessly without disturbing your website’s flow using Source Preferences.

Table of Contents

How to Install the Floating Badge:

Below are the steps to install this floating badge on your website. Read the instructions carefully and copy the code completely before using it. Skipping any step may cause it to not work properly.

  1. Source Preferences HTML code:

     <!-- Floating Badge HTML -->
<div class="floating-badge-wrapper" id="floatingBadgeWrapper" style="display:none;">
  <div class="floating-badge" id="floatingBadge">
    <span style="line-height: 1.5; margin: 0;">Choose EduSynth <br />on Google</span>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8e-ZmGLL6ijlVzNq1VwDfOuXKYrzBhMFMUi0j2P-_tyn9YboSBfVzD5NX8FgSjX3SHd7kRsxncor4QnbtXtTQismZ_Ouw3eZpV9OrzhHP59xRJ52bfln5er7GNb_-Ufm_C50KhlA36Br2lhwOlzrEIF37yPe_dp69Jpi_IHZTjX4Dycs1UZcfaqjOk8/s1600/images-removebg-preview.png" alt="Google" class="google-logo" />
  </div>
  <button class="close-btn" onclick="closeBadge()">×</button>
</div>

    Copy the HTML code.

    Replace your website name or text where needed.

    Paste it above the closing </body> tag in your website.

  2. Source Preferences CSS code:

     <style>
.floating-badge-wrapper {
  position: fixed;
  bottom: 20%;
  right: 0;
  z-index: 9999;
}

.floating-badge {
  background:#000;
  color: white;
  padding: 10px 20px;
  border-radius: 50px 0 0 50px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

.floating-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  background:#000;
}

/* Google Logo */
.google-logo {
  width: 20px;
  height: 20px;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 0px;
  right: 1px;
  /*background: rgba(128, 128, 128, 0.5);*/
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #fff;
}
</style>

    Copy the CSS code.

    No changes are required unless you want to customize colors or fonts.

    Add it inside a <style> tag in your <head> section or in your existing stylesheet.

  3. Source Preferences JavaScript code:

     <script>
// Show badge after 6 seconds
window.addEventListener('load', function() {
  setTimeout(function() {
    document.getElementById('floatingBadgeWrapper').style.display = 'block';
  }, 6000); 
});

// Click badge to go to Google
document.getElementById('floatingBadge').addEventListener('click', function(e) {
  if(!e.target.classList.contains('close-btn')) {
    window.open('https://www.google.com/preferences/source?q=edusynth', '_blank');
  }
});

// Close badge function
function closeBadge() {
  document.getElementById('floatingBadgeWrapper').style.display = 'none';
}
</script>

    Copy the JavaScript code.

    Replace the website name at the end of the URL, the same name shown on Google.

    Paste it just before the closing </body> tag.

Floating Badge preview
Info! If your website name doesn’t appear when searched by its name on Google, this won’t work. You can try using the direct domain, but your site should be somewhat popular. (Your website name must show up on Google search.)

Floating Badge Features:

This badge is designed to appear a few seconds after the page loads to avoid affecting your website’s loading speed. It is fully customizable and ensures that visitors can notice it without disrupting their browsing experience.

  1. Delayed appearance for smooth performance
  2. Fully responsive and works on all devices
  3. Close button lets users dismiss the badge easily
  4. Clickable link directs visitors to your chosen Google page
  5. Easy to adjust position, colors, and text via HTML and CSS

Benefits of Using the Floating Badge

Adding this floating badge increases user interaction by highlighting important links without being intrusive.

It helps in boosting click-through rates on your preferred Google page via Source Preferences.

The badge is non-intrusive and ensures smooth browsing, even on mobile devices.

It provides a modern, professional look to your website, subtly guiding visitors to take action.

What is Google Preferences Source?

Google Preferences Source is a settings page where users can control their search experience. From here, you can personalize options like language, region, SafeSearch, and content sources to get more tailored search results.

How does the floating badge improve user engagement?

It draws attention to key actions or links, encouraging visitors to interact with your website without being intrusive.

Can the badge increase click-through rates?

Yes. By highlighting important links, it naturally encourages visitors to click, boosting your website’s click-through performance.

Does it make my website look more professional?

Absolutely. A sleek, modern badge adds a polished look to your website while guiding users effectively.

Is the badge non-intrusive for visitors?

Yes. It appears subtly after a few seconds, so it doesn’t disrupt browsing or overwhelm visitors.

Can it help in brand visibility?

Yes. By encouraging visitors to interact with key links, it increases your brand’s exposure and recognition.

Is the floating badge easy to implement?

Yes. With simple HTML, CSS, and JavaScript, the badge can be added to any website in minutes without advanced coding knowledge.

Can I customize the badge using code?

Absolutely. You can modify the badge’s text, colors, position, and link directly through the HTML, CSS, and JavaScript code.

Related Posts

Final Thoughts

The floating badge is a simple yet powerful tool to enhance user engagement and highlight important links on your website. By implementing it with HTML, CSS, and JavaScript, you can create a professional, interactive experience for your visitors without affecting site performance.

With its responsive design, delayed appearance, and easy customization options, this badge is perfect for any website looking to boost click-through rates and brand visibility via Source Preferences.

Post a Comment