whatsapp chat banner

How to Add Whatsapp Chat in HTML Website

How to Add Whatsapp Chat in HTML Website Without Coding

Nowadays, It’s very important to have a strong connection with your audience because better engagements create more chances of sales. Most of the time, users visit the website but in case of any confusion, they are unable to talk with the support team. Here, we lose the interest of our customers or visitors. So, we need the best way to create a bridge between visitors and the support team.

There could be different ways to communicate with your consumers but Whatsapp Chat Integration with your website is the best option. But why? because Whatsapp is the most widely used messaging app in the World. People use it most often. So, having a Whatsapp Chat option on your website would be a convenient approach to get in touch with your customers.

Adding Whatsapp Chat in HTML Website

In this tutorial, I’ll teach you that how you can integrate Whatsapp Chat with your HTML Website. Actually, you can integrate it with any kind of website by following this method. Whatever backend coding is being used. But in the case of WordPress, there could be a slight difference in the steps. So, Let’s start!

 To make it simple, We have divided it into the following steps:
  1. Create Widget
    1. Configure the widget
    2. Customize
  2. Signup for elfsight.io
  3. Copy & Paste the Code

Create Widget

 

Here we have a simple HTML Website. There is no chat option in the bottom right.

Without Chat

 

Go to this link to create a Whatsapp Chat widget:  elfsight.io

You will see this webpage.

Elfsight

 

Scroll Down until you get this screen. Click on Create Widget (Highlighted)

Create Widget

 

Configuration & Simple Customization

You will be redirected to the below page/section. Here we have many more themes to choose from. You can choose the best fit according to your requirements. If you don’t like any of them, don’t worry! you can create a customized design for you easily by exploring the other options we shall discuss later.

 

Now, choose the template and click on the “Continue with this template” button.

Continue button

 

Add your Whatsapp Number in the highlighted textbox. We are going to explore the below options one by one.

whatsapp chat box

 

If you want to change the Widget Icon which we get in the bottom right (when we open the site). Click the “Chat Bubble” option.

bubble Icon

Change Profile Picture

 

Definitely, you will be looking for a way to change the profile picture in the widget. Just go to the second option which is “Chat Header”. Click on Reupload icon and replace the image by uploading it from a Computer or from your existing Library on the site. You can easily change your name as well by editing the name in the below text box.

 

Go to the next option to change the welcome message according to your needs.

Welcome Message


In-depth Customization

If you want to customize the widget design you can see the Settings and Appearance option. In this way, you can customize it as much as you want. You can change the positions, triggers, and notifications by looking into the “Settings” tab. By playing with “Appearance” you can make all kinds of changes in the design. You can also add Custom CSS to full fill your dream design. Now, Go to the “Add to Website” Option.

add to website

Signup for elfsight.io

It will require you to Sign Up if you have not done it before. Add the Email and Password to signup.

signup

 

Click the Save Button.

 

Choose the package according to your requirements. You can simply choose FREE Package at the start. Don’t worry! you will have 200 views per month in the LITE Package (Free).

lite free package


Copy & Paste the Code

You will get this page with the code. Copy the code by clicking on it.

code

 

Paste it anywhere on the Page. (NOTE: Only paste in HTML, not in CSS or inside script tags)

code pasted

 

Save the page and browse it. You will see the updated results on the browser. Click on the Whatsapp Widget Icon. Start a Chat. If you already have a Whatsapp installed on your PC, It will open up that.
Otherwise, You can download it OR you can use Whatsapp Web.

Website without Chat

Now you have learned the best way to integrate Whatsapp Chat widget with your website without any coding. I hope, you enjoyed this tutorial. Follow our step-by-step instructions on how to add the Zendesk chat to your WordPress site.

If you did or you face any problem, please let us know in the comment box below.
Thanks for staying with us!

Leave a Comment

Your email address will not be published. Required fields are marked *