How to integrate whatsapp in html website


Add Whatsapp Live Chat code to HTML website (in 2 minutes)

The easiest communication channel for your website visitors

Description

WhatsApp widget by Elfsight is a simple tool for your website customers to stay connected with you and hear answers to their questions and requests. Be available live for clientele in their most favorite messenger all day long. Set up сhat on website and it will appear on specified pages or for specified groups of viewers. You can establish start-chat triggers, write your unique welcome message, choose icons, and even more. With the help of HTML Chat code embedded on web page, you will remain connected with your viewers anytime and from any place.

WhatsApp chat is there to help you with not only improving your website’s performance metrics, but also in terms of design. With this widget, you can add a floating or fixed messenger button to any page of your website. You can even choose the audience who will be able to see the chat and send a message to you using it. WhatsApp floating button can become an extremely effective tool for your business. The widget is a perfect solution for providing all sorts of help for our users – from customer support to common talks on messenger. And using WhatsApp to send a message or two to your users will only add points to you as it’s one of the most used messengers in the world.

The WhatsApp plugin is also extremely easy to personalize in terms of design, and that is good news as you can turn it into an unmissable block on your website’s page. Simply start with choosing the right colors for your WhatsApp button design. Your first message can become an unforgettable experience for users of the WhatsApp chat as you can completely alter the widget’s original look. Try it yourself and enjoy the result!

Where can I integrate this Whatsapp plugin

The widget can show on every page of your website, or only on particular pages. You can as well exclude selected pages if you want them without the chat.

What benefits does it give me?

It will help more viewers contact you with their questions and requests or problems. It may help increase the amount of leads and purchases. Another advantage is that swift responding and personal approach will enhance the quality of your customer interaction.

How can I add Whatsapp Chat box on my website?

You only will need three minutes of your time to have the widget up and running. Adding is super swift, free, and coding-free.

You can place the widget to the web page in our service. For it you will need to apply the guide hereafter on this page.

Features

In order to get a full idea of the Chat box, view the list of its essential features. They make the widget incredibly effective for your promotion:

  • Integrate WhatsApp messenger on your web page to stay connected with clients;
  • Respond to messages right from your WhatsApp account;
  • Try 3 options of chat location: floating bubble, embed bubble, and embed chat window;
  • Use a collection of bubble icons to choose from;
  • Enter your own text of the chat bubble.

To explore more features, see our demo

How to add the Whatsapp Chat code to your HTML page

These several actions are the only thing you need in order to have Whatsapp up and running.

  • Generate your customized WhatsApp Live Chat
    With the help of our free editor, generate a plugin with a custom interface and functions.
  • Acquire the personal code to install the widget
    After you have set your plugin, you will receive the installation code from the popup notification on Elfsight Apps. Copy it.
  • Publish the widget on your HTML site
    Define the place you would like to embed the plugin to and insert the saved code there. Publish the results.
  • Congratulations! You have just published the Chat widget!
    Enter your page, to see your widget.

Still not decided? Or stumbled upon anything? Just a single request to our customer service will resolve any kind of matter.

Is there an option to add Whatsapp Chat to my HTML homepage with no coding experience?

Elfsight company provides a Cloud solution that enables users establish a Whatsapp Chat app yourself, check how easy it is:

  • Go to the online Editor to generate a Whatsapp Chat section you would like to include on your HTML site.
  • Pick one of the premade templates and modify the Whatsapp Chat settings, update your content, change the layout and color of the elements without coding experience.
  • Click to save the settings you’ve made to Whatsapp Chat and get the installation code, that you can embed in your HTML website free of charge.

With our straightforward Configurator every internet user can establish Whatsapp Chat and simply embed to any HTML site. It’s not necessary to pay or disclose your card credentials to access the Editor. If you encounter any obstacles of any kind, don’t hesitate to address our support team.

Pricing

14-day money back guarantee. Risk-free, you can cancel at anytime.

Elfsight Apps

Cross-platform digital solution that works on any site

from $0 / month

start with free plan

Unlimited websites

Free customer support

Charge-free installation help

Limited time offer for multiple apps

Fully customizable

Add to website

How to add WhatsApp as chat on your website - a complete guide

WhatsApp is the most popular messaging app worldwide. Over 2 billion of active users are on the platform to communicate with friends, family, and businesses. For businesses, WhatsApp is a gateway for personal, accessible, and informal conversations with their customers. A very valuable channel to be present on indeed!

To introduce WhatsApp as a channel into your customer journey one of the first steps is to add the WhatsApp chat button on your website. It’s simply done and the best way to keep the conversation with visitors going after they leave.

In this article, we’ll show you how you can add a WhatsApp chat to your website and start.

Sounds good? Start the 14-day free trial to integrate WhatsApp on your website in no time.

Why you should add a WhatsApp webchat to your website

There are three main reasons why you should consider embedding WhatsApp on your website.

First of all, your team can keep in touch after the visitor leaves

When a website visitor reaches out via live chat, your team won’t be able to contact them after they leave. And with patience running thinner every day, customers tend to leave faster than ever. Unless your team has the time to instantly reply all day long (which they don’t).

But when a visitor gets in touch via WhatsApp, they get the same experience — without having to stay on your website to await an answer. This gives them a better experience, and it gives you more time to reply.

Reactivate cart abandonment

People can abandon their carts because of many reasons. But for most, it will definitely benefit to follow up. Because whether they still have some doubts or they simply forgot to follow through, it often doesn’t take more than a nudge via WhatsApp to persuade them towards a purchase.

When someone for instance has doubts about a specific item, you can send a quick message including a similar item but with better features. And this gives your team the chance to both convert this customer and upsell. There are very few ways to optimize your conversion rate as easily as this.

Add a personal touch

Where live chat used to feel informal and personal, it has grown into a communication channel that many businesses treat the same way as email. This makes it less attractive and special for website visitors.

WhatsApp, on the other hand, is an app we all use to talk to our friends and family every single day. By inserting your business into that environment, you automatically build a more personal relationship with your customer. Especially if you can manage to reply fast and use the right informal tone of voice.

How to embed a WhatsApp chat on your website

There are three ways to let your customers contact you via WhatsApp as a chat on your website.

  • Click and chat
  • QR code
  • Trengo multichannel widget

1. Click to chat

The click-to-chat feature lets customers click an URL in order to directly start a chat with another person or business via WhatsApp. You don’t need to save any phone numbers in your phone to do this. With the link, you simply open a chat and start typing. This works for the smartphone app as well as for WhatsApp Web.

With this feature, you could add a Whatsapp link to the website and for instance hyperlink a sentence such as ‘WhatsApp us!’ to WhatsApp. You could also type out your phone number and hyperlink it.

A click-and-chat link is obviously fine to offer on your contact page, but it gets a little difficult when you want to offer WhatsApp throughout your entire online customer experience. Having to share this link on every single page will make your website look messy.

How to add a WhatsApp link to a website

To make a click-to-chat link, you need to edit this link: https://wa.me/[WhatsAppNumber]. Replace ‘WhatsAppNumber’ with the phone number you would like to use.

2. QR code

Having to add a phone number to your contacts to start a WhatsApp conversation can feel time-consuming for your customers. Especially when you want to offer this channel as a business, this isn’t a feasible way. Think about the steps a customer has to take:

  1. First, they have to look up your phone number
  2. Next, they have to save you as a contact. This includes the name of your company and phone number. If they need to do this for all the companies they are in contact with, their contact list may explode one day.
  3. Finally, the customer has to navigate to WhatsApp, look you up, and only then can they start a chat.

This doesn’t take hours. But it also doesn’t make for a flawless customer experience. And that’s the goal.

That’s why some companies have started to create QR codes to start a conversation. All they have to do is create the code and place it on their website for customers to easily start a chat.

To create such a QR code, one must first create a click-to-chat link. This link can then be turned into a QR code via websites such as QR Code Generator or QR Code Monkey.

Want to know how using a QR code feels for a customer? Try out starting a conversation with our own Trengo WhatsApp account via this QR code:

3. Trengo multichannel widget

So far, we’ve discussed two options. But neither of them is a true WhatsApp integration with your website.

The best way to add a WhatsApp chat icon on your website is by using a multichannel chat widget, such as the one part of Trengo’s WhatsApp Business solution. Because via this solution, and the widget, your customers can contact you via a WhatsApp button on your website.

An example of a Trengo WhatsApp integration with website plus WhatsApp Business as one of the available channels.

Another important advantage is that Trengo offers the possibility to use WhatsApp with multiple users, which isn’t possible with the official app. Your team can easily collaborate on conversations in one WhatsApp account. In the inbox, they can @tag each other and assign messages to specific colleagues or teams.

Add WhatsApp button to your website: HTML code or Google Tag Manager

Once you have started your free trial at Trengo, you can add a WhatsApp chat widget to your website in two different ways:

  1. By pasting the widget script into your website’s HTML source code.
  2. By using Google Tag Manager.

For a technical explanation of both methods, you can visit this article.

How to integrate WhatsApp into a WordPress website

We often get asked how businesses can add a WhatsApp chat to their WordPress website. With Trengo, the process to get this done is straightforward. Simply add the Javascript code to the header or footer of your WordPress website with this plugin.

You can also ask for some help from your developer and add the source code to your WordPress template.

Use cases of a WhatsApp widget on your website

Marketing and sales

Online shopping is bigger than ever. But it still doesn’t come close to the experience of shopping in the real world. Seeing and feeling the products. Trying on a new pair of shoes. Having a conversation with the store assistant.

By adding a WhatsApp chat to your website, you add a conversational element to the online experience. It enables your team to collect leads, advise products, and even make sales — all in a personal and informal way.

Once the customer leaves the website, the conversation still continues on WhatsApp. This is a big benefit of using WhatsApp live chat over regular live chat.

Learn how automotive company Muntstad collects leads via WhatsApp on their website.

Customer service

Modern consumers shun phone calls or emails. They take too much effort and time. When they have a question, they prefer asking it via a messaging app or simply looking up the answer themselves in a help center.

That’s why WhatsApp is a great solution for your customer service team. Because of WhatsApp’s informal etiquette, you can have a personal and authentic conversation that’s efficient for both the customer and your team.

How to automate the WhatsApp chat on your website

Customers will wait two days for a reply to an email. They’ll sit in a waiting line on the phone. But when they’re using WhatsApp, they expect almost instant replies. For customer service teams, these expectations are both a gift and a curse. If you deliver, customer satisfaction sky-rockets. But if you fail, you frustrate your customers.

With these automations in place, you enable your team to keep up with the expected speed.

Quick replies

Ever get any repetitive questions? About your business hours, stock, return policy, or delivery methods? Of course you do. And if you don’t automate answering these questions, you’ll waste valuable time.

An example of a quick reply for webchat WhatsApp.

By creating templated messages, a.k.a. quick replies, you can automate answering these FAQs. Here are 15 templates you can use right away.

Auto-replies

By setting an auto-reply, your customers always get an instant response. This buys you some time when you’re not able to respond right away. Which especially comes in handy outside of business hours.

An auto-reply outside of business hours.

Here are 8 auto reply samples for some inspiration.

Rules

If you’re dealing with a lot of inbound messages, it can be tough to stay organized. By creating rules, you can automate this organization process. In Trengo, you can also do this for your WhatsApp conversations.

With this rule, messages that contain the word ‘orders’ get assigned to Anna Davis.

You can automatically add labels to conversations, assign conversations to a team member and inform customers during peak hours.

Chatbots

If you’re ready to take it to the next level, you can also use Trengo to build a chatbot for the WhatsApp chat on your site. A bot will answer frequently asked questions and even collect leads — also outside of opening hours.

A bot informs a customer about the shipping costs.

Building a bot all by yourself may sound intimidating. But with Trengo, you can use a no-code chatbot builder. It’s straightforward and fast. You can even test and play around with it before you go live.

Add a WhatsApp chat to your website today

The WhatsApp chat can make the difference between someone leaving and someone converting. Because your team can really keep the conversation going. Even after visitors leave, and potential customers abandon their carts.

So include WhatsApp as a channel in your customer journey. And start by adding a WhatsApp chat to your site. Official WhatsApp Business Solution Provider Trengo can set everything up for you. So all you have to do is test and take the time to see how your visitors react to the WhatsApp chat.

Start a Trengo trial and watch the WhatsApp chat in action.

Further reading

  • How to use WhatsApp Business with multiple users
  • How to add Facebook Messenger to your website
  • All you need to know about the WhatsApp Business API

Written by Pim de Vos

More great articles

how to integrate whatsapp on the site?

Skip to content

Search for:

By Milena Anderson Reading 3 min. Views 9 Posted by

nine0004 Short answer

  1. There are several ways to do this.
  2. The first is the use of an iframe, which allows you to embed one web page within another.
  3. You can also use a plugin or API.

How to add whatsapp click to chat to any website

how to add whatsapp chat to wordpress site

div>

how to link whatsapp to my site's html?

There is no one-size-fits-all answer to this question as the process for linking WhatsApp to a website depends on the specific website platform you are using. However, a good starting point is to look for online guides or tutorials that are specifically tailored to your website platform.

How do I integrate WhatsApp into WordPress?

There are several different ways to do this. One way is to use a plugin. There are several different plugins available, but one of the popular options is the WhatsApp plugin for WordPress. This plugin allows you to add a WhatsApp button to your messages and pages that people can use to contact you directly from your website. nine0041 Another way to integrate WhatsApp into WordPress is to use a shortcode.

How do I send a WhatsApp message in HTML format?

To send a WhatsApp message in HTML format, you need to format the text as HTML and then copy and paste it into the WhatsApp chat window.

Is this whatsapp business API free?

Can I use the WhatsApp logo on my website?

What is WP WhatsApp?

WP WhatsApp is a messaging application that allows users to communicate with each other using voice and text messages. It is similar to WhatsApp but is designed for Windows phones. nine0003

Can I use the WhatsApp logo on my website?

Yes, you can use the WhatsApp logo on your website. However, you must comply with the WhatsApp trademark guidelines.

How to install WhatsApp in PHP?

WhatsApp is a popular messaging application that can be installed on various devices. To install WhatsApp in PHP, you need to create a WhatsApp account and then download the application. After downloading the application, you can create a new PHP file and enter your WhatsApp account details into it. nine0003

How can I get the free WhatsApp API?

There is no free WhatsApp API. To use the WhatsApp messaging service, you must have a WhatsApp account.

How to use WhatsApp Web with Javascript?

To use WhatsApp Web with Javascript, you must first open the WhatsApp web page. You then need to scan the QR code on the page using the WhatsApp mobile app. After scanning the code, your WhatsApp account will be connected to the WhatsApp web page..

How much does WhatsApp Business API cost?

WhatsApp Business API is a paid subscription service. The cost depends on the number of messages you send each month.

Which WhatsApp API is better?

There is no one size fits all answer to this question as the best WhatsApp API depends on your specific needs and requirements. However, some of the most popular WhatsApp APIs include WhatsApp Business API, WhatsApp Marketing API, and WhatsApp Chat API. nine0003

Is the WhatsApp API open?

To use WhatsApp Web with Javascript, you must first open the WhatsApp web page. You then need to scan the QR code on the page using the WhatsApp mobile app. After scanning the code, your WhatsApp account will be connected to the WhatsApp web page.

Is twilio WhatsApp free?

No, Twilio WhatsApp is paid. To send and receive messages, you need to have a Twilio account and purchase credits. nine0003

Is the WhatsApp messaging API free?

Yes, the WhatsApp messaging API is free to use. However, you will need to create a WhatsApp account to use the API.

How to set up and place WhatsApp chat on the site and widget integration

WhatsApp button, widget and chat on the site

Today we will tell you how we chose and set up a chat for the WhatsApp site for one of our customers. He needed a WhatsApp chat on the site for feedback from customers, since not everyone is comfortable calling if they have questions. It turned out that without the opportunity to get advice on WhatsApp, a certain part of the target audience is simply lost. Naturally, this had to be corrected. nine0003

In addition, whatsapp is better than a regular chat on the site in that when a client contacts us, we immediately get his contact details and then we can involve him in the sales funnel. In a regular chat, the client can remain anonymous and the contact will simply be lost.

If the client was the first to contact us via WhatsApp and, thus, left his contacts, this already means a high level of trust on his part, approximately the same as double opt-in - subscribing to an email newsletter, when the client not only provides your email, but also confirms it. After that, you can safely send him marketing content to warm up his interest. nine0003

Speaking of promotional mailings, it is worth noting that WhatsApp mailings also have certain advantages compared to email mailings:

  • First, it is the ease of creating messages. They can be quite short, a couple of sentences and a link, nothing else is required.
  • Secondly, this is a significantly higher percentage of open messages (95-100%, i. e. almost everything sent out will be mandatory) and link clicks (about 60%), while for email newsletters this indicator is now good if reaches 5%. nine0018

Accordingly, sales are also increasing.

Chat requirements for the WhatsApp website

At the beginning of the search, there were the following requirements for online chat on the WhatsApp website:

  • Support for most popular instant messengers - Telegram, Skype, WhatsApp for business.
  • Possibility to have several conversations in parallel in the chat on the site in the WhatsApp messenger.
  • Ability to integrate WhatsApp with a CRM system, or at least store communication history, help desk and WhatsApp integration. nine0018

WhatsApp button, widget and chat on the site

The idea of ​​simply adding a WhatsApp button to the site was immediately abandoned, since it did not solve any of these problems.

After searching and comparing the options, we chose the https://chat2desk. com service and with its help added the WhatsApp chat widget to the client's website.

Our decision to focus on this application was influenced by the following features, in addition to the above: the client base is being collected, and not only the names and phone numbers of clients, but also the requests with which they addressed. Thanks to this, in the future, you can assign tags to various groups of customers and send targeted advertising that will match their interests. nine0018

  • The ability to set up a Whatsapp chat bot (there are no own bots in WhatsApp), automatic responses to standard requests, automatic menus in order to unload customer and technical support operators through Whatsapp from the most routine and frequent questions.
  • Chat on the site with WhatsApp integration allowed, in addition to text messages, to exchange images, videos, even links to coordinates on the map, which turned out to be very valuable in some cases.
  • How to place a WhatsApp chat on a website with the Chat2Desk service:

    1. Register at https://chat2desk.

      Learn more