How to Add a WhatsApp Button to a Systeme.io Website with a FREE Code Snippet

Introduction

Hey everyone! Are you looking to add a Floating Action Button (FAB) to your website that connects directly to WhatsApp? In this article, we’ll cover how to set up a WhatsApp button on your website using a free code snippet. This tutorial came as a question from The Bros Bittes based on our previous FAB video, which I'll link along with Bros Bittes’ YouTube channel in the description below.

Step-by-Step Guide

Step 1: Copy the Code

First, head over to the free Zero to Income Toolbox. Find the WhatsApp FAB tool and click on the “Copy Code” button. There’s also a how-to video available if you need further guidance.

Step 2: Edit Your Website

Next, open the page you want to edit in Systeme.io. I’ve been playing around with a template here. Scroll down to find a raw HTML element, and drag it to the desired location on your page.

Step 3: Insert the Code

Click on the “Edit Code” button on the raw HTML element and paste the copied code. Save the changes.

Step 4: Add Your Phone Number

To function correctly, you’ll need to add your phone number to the code. Click “Edit Code” again and scroll down to where the phone number should be inserted. Include your full phone number along with the appropriate country code.

Step 5: Save and Test

Save your changes, preview the site, and test the WhatsApp FAB by clicking on it. It should open WhatsApp and begin a chat with the number you entered.

Customization: Changing Colors

Do you want to change the button colors? Here’s how:

Click on “Edit Code.”
Look for the hex codes for background and hover colors. For example, the background color is marked as #25d366, and the hover color is #128c7e.
Replace these hex codes with your desired colors.

Conclusion

That’s how you set up a WhatsApp Floating Action Button on your website. You can apply this code snippet to any platform that supports raw HTML elements. Whether it’s Systeme.io, Wix, or any other service, you’ll find this method incredibly versatile.

If you're enjoying these tutorials and want more content focused on Systeme.io, we have an entire playlist dedicated to it. Check it out!

Keywords

WhatsApp Floating Action Button
Systeme.io
Raw HTML Element
Code Snippet
Customization

FAQ

Q: Can I use this code snippet on platforms other than Systeme.io? A: Yes, this code snippet is compatible with any platform that supports raw HTML elements, including Wix, Go High Level, and more.

Q: How do I change the colors of the WhatsApp button? A: Edit the code and replace the hex codes for the background and hover colors according to your preference.

Q: How do I add my phone number to the WhatsApp button? A: Click on “Edit Code” and scroll down to the section where the phone number is required. Enter your full phone number, including the country code.

Q: Is there a video tutorial available for this process? A: Yes, the original video is linked in the description, along with a tutorial on using the free Zero to Income Toolbox.

Q: What if I don't want people to see my phone number directly? A: The phone number in the code is not visible on the webpage. It is only used as a click-to-chat link for WhatsApp.

And that’s how you customize your website with a WhatsApp Floating Action Button using a simple code snippet. If you find this guide helpful, don’t forget to check out our other videos and tutorials focused on Systeme.io!

Enjoy your newly added WhatsApp button and happy coding!