Quick Guide: Adding WhatsApp Widget HTML Code to Your Site

Improving customer support on your website is essential for engaging visitors and increasing conversions. By adding a floating WhatsApp Chat widget HTML to your site, you facilitate real-time communication and smooth interaction. This simple guide will show you the easy steps to integrate a floating WhatsApp button HTML into your website, enhancing user experience and customer engagement.

How To Create a Floating WhatsApp Button

1. Go to Clickiny App and Create an account.

Clickiny signup for WhatsApp Chat Widget

2. Once you login, click on the “Create New” button on the dashboard

Clickiny - create WhatsApp Chat button

3. In the Editor, you’ll have different customization options, which we’ll touch on below.

In the “Button” section you can change the position, label and feel of the button.

  • Change the position on Desktop and Mobile
  • Change the label text, color, type
  • Change the button Icon, shape and colors.

4. On the Widget section, you’ll see two tabs – Design and Agents.

At this stage of the customization you can click on the button to expand the widget.

5. Under the “Business Details” tab, edit your business name, phone number for the chat, and the welcome message the user will see when they open the widget.

6. The “Chatbox Style” tab allows you to customize:

  • Add your brand logo for the chat box
  • Brand color widget
  • Widget title and description

7. In the scenario where you have multiple agents to handle support, you can add agents by going to the “Agents” tab under “Widget” section and click the “Add New Agent” button to add an agent.

Customize the details of the agent: agent image, name, role and phone number. You can also add the availability of the agent.

NOTE: the display of the widget will change when you start adding agents.

8. Click on “save” and then “publish.”

NOTE: Always make sure you click “save” after making edits to your WhatsApp Chat Widget.

9. Copy the resulting HTML code.

Embedding the Floating WhatsApp Button HTML to your Site

10. Locate the page you want the WhatsApp chat to appear in and insert the code snippet before the closing </body> tag.

RELATED BLOGS

How to add floating Whatsapp button to WordPress website

How to add floating Whatsapp button to Wix website

How to add floating Whatsapp button to Squarespace website

How to add Whatsapp floating button to Leadpages website

How to add floating Whatsapp button to Framer website

How to add floating Whatsapp button to Weebly website

How to add floating Whatsapp button to Instapages website

How to add floating Whatsapp button to Carrd website

How to add floating Whatsapp button to Webflow website

How to add floating Whatsapp button to Clickfunnels website

How to add floating Whatsapp button to Ghost website

How to add floating Whatsapp button to Unbounce website

Facebook
Twitter
WhatsApp
Email

Leave a Reply