Why Add a Floating Message Icon?
If you want to make it easier for visitors to get in touch with you, adding a floating message icon to your Divi site just like the one you see on this page is a brilliant move. It’s clean, non-intrusive, and always visible, inviting engagement without disrupting the user experience.
- Increases Conversions: Keeps a clear “Get in touch” action visible.
- Boosts UX: Non-intrusive and accessible from any page.
- Stylish & Professional: Adds a modern, polished touch.
The Best Way to Add It
The best way to add a floating message icon to your Divi site is by using the Divi Theme Options > Integration > Add code to the < body > (good for tracking codes such as google analytics).
This section is ideal for custom code, tracking scripts (like Google Analytics), and small custom features.
I simply pasted all the following HTML and CSS together into that section, and it worked perfectly.
Step 2: Customize Your Icon and Link
- Change the link: Update the a href “/get-in-touch” to wherever you want users to land.
- Change the icon: Swap the w code to another icon from Divi’s built-in icon font.
- Change colors: Modify the background colors to match your branding.
Bonus: Track Clicks with Google Analytics
Want to track how many people click your floating button?
Add this simple JavaScript snippet right after your button and CSS code.
You’ll now see the event “floating_button_click” in your GA4 dashboard!
<script>
document.addEventListener("DOMContentLoaded", function() {
var floatingButton = document.querySelector('.floating-message-icon');
if (floatingButton) {
floatingButton.addEventListener('click', function() {
if (typeof gtag === 'function') {
gtag('event', 'floating_button_click', {
'event_category': 'Engagement',
'event_label': 'Floating Get In Touch Button',
'value': 1
});
}
});
}
});
</script>
Final Thoughts
Adding a floating message icon to your Divi site is a simple but powerful way to boost conversions and improve user experience. By using the Divi Theme Options > Integration method, you keep your custom code organized, lightweight, and easy to manage.
Happy coding!