- WhatsApp Chat widget for websites
- How to add WhatsApp Chat to website with GTM
- How to integrate a WhatsApp Chat HTML code
- WordPress WhatsApp Chat plugin
- How to add the chat to Magento 2
- How to add the chat to Shopify
- How to add the chat to Squarespace
- How to add the chat to Wix
- How to add WhatsApp chat to Joomla
- How to add the chat to Opencart
- How to add WhatsApp chat to Drupal
- WhatsApp Chat templates
- FAQ
WhatsApp Chat is one of the most wide-spread messengers around the world. No matter if you wish to contact people in your location not far from your store, or you want to reach out to people in different parts of the world, you can always be sure that WhatsApp Chat will be helpful in all cases.
WhatsApp Chat widget for websites
You always have an opportunity to integrate a WhatsApp chat to the website with the help of an official WhatsApp Chat API. However, you’ll need to understand all the slight nuances of its API, and, what is more, you’ll have to design the chat box through CSS and JavaScript code, which is twice as difficult and lasts forever. It’s quite a great option to make the widget appear in certain cases, for example, when the user intends to exit the web page.
You have a wealth of options for all these and many other settings if you use a WhatsApp Chat widget for websites.
Everything’s simple: you create the chat button in a special visual configurator, set up its behavior, copy and paste the installation code in your web page. That’s everything you need, and no coding skills required.
By using specifically Elfsight WhatsApp Chat widget, you’ll get a bunch of other amazing benefits:
- It’s the easiest way to add WhatsApp Chat to almost every website
- Editable name, caption, and account picture
- Reply time option can be switched on and off
- Four open chat triggers: scroll position, exit intent, time on site, time on page
- Opportunity to show the chat on selected or all web pages, not to show on excluded ones
- 3 chat locations on a web page: embed chat window, embed bubble, floating bubble
- Opportunity to hide or show the chat depending on the type of visitor’s device
You can try all these and many other perks in the online demo.
Don’t worry if you’ve never ever coded - with our configurator you won’t need to write a single line yourself, you’ll set up WhatsApp chat online and visually.
Our chat widget works on all popular platforms including WordPress, Magento, Squarespace, Wix, and Joomla. It also performs amazingly on OpenCart and Drupal. So, give it a try and get familiar with the processes of installation on all the most popular platforms.
How to add WhatsApp Chat to website with GTM
In most cases, CMS and website builders provide an opportunity to add a custom HTML to the website template or web page code. Nevertheless, there are some platforms that don’t give such a chance. But don’t worry, it doesn’t mean you’ll have to code yourself, there is a great way out: you can use a special solution called Google Tag Manager.
In a nutshell, this instrument opens up a chance to create a tag, a trigger, and add a widget to your website. Here’s how you can add a WhatsApp Chat with GTM a bit more specifically:
- Log in or sign up to Google Tag Manager
- Make a new tag there, select ‘Custom HTML’
- Put the first line of the Elfsight installation code to the created tag
- Create a trigger and the tag to the web page
- Save the tag and publish the changes
Good job! Your chat box will appear on a website as soon as this.
How to integrate a WhatsApp Chat HTML code
You can create any type of content with the help of three programming languages: HTML, CSS, and JavaScript. It’s quite easy to deal with the first two, however, when creating any dynamic content for a website, you’ll need to handle JS, and it’s not an elementary task.
The greatest way to create animated content and program its behavior is to use a widget. You’ll make up a chat button in a visual configurator and choose such settings as performance logic for different users and types of devices. Afterwards, you’ll get just two lines of code instead of tens, and simply paste them to the template or web page code.
Please note: if you want to integrate the chat to all the pages of a website and make it floating, you’ll need to paste the installation code to the <head> or <footer> section.
If you need to embed the chat to a specific section on a single page, you’ll effortlessly do it by using an embed template. Find more about the process of adding WhatsApp chat to HTML and watch a video tutorial on the WhatsApp Chat for HTML page.
WordPress WhatsApp Chat plugin
WordPress is among the main platforms for those who build sites for their businesses. Being a website owner, it’s somewhat clear that you are willing to save your money and time, and your best choice here is to use a ready-made tool called plugin.
Benefits you get by using a plugin
- You don’t need to code anything in your WordPress live chat
- There are many templates putting forward professional ideas for your WhatsApp chat box
- You make the chat button on your own, without a web developer or designer, and you never have to bother about the widget design and functionality
- You can try out the widget in a online editor
With the Elfsight plugin you may promptly place any of WhatsApp templates on the website, improve the UX in mere seconds and customize the chat box the way you wish.
Features of the Elfsight WhatsApp Chat box for WordPress
- This is the easiest method to add WhatsApp Chat window to website
- Opportunity to hide or show the chat based on the type of visitor’s device
- 4 open chat triggers: scroll position, time on page, time on site, exit intent
- Option to present the chat on all or selected web pages, not to show on excluded ones
- Three chat locations on a web page: embed bubble, embed chat window, floating bubble
You are free to explore the widget in greater detail in online demo without registration.
What is more, keep in mind that there are nine professional adjustable templates that you can conveniently discover in the free online demo. You can discover how to display different types of Chats, whether it’s consultations, a support chat, or a sales chat. Below, you can find some of the examples, have a look:
- Support
- Sale
- Booking
How to add a WhatsApp Chat plugin to WordPress
There’s a chance to add the WhatsApp Chat widget to WordPress in a few different ways. You may smoothly do it on your own after watching a video and viewing our guideline on this page.
Below you’ll find some more methods to install the WhatsApp Chat on WordPress. For example, you may attach the tool with the help of Google Tag Manager.
Install the plugin through WordPress admin panel
- Go to the ‘Appearance’ section and select ‘Customize’.
- Click ‘Widgets’, then ‘Add a widget’.
- Choose ‘Custom HTML’, and paste the installation code.
- Press ‘Done’, and publish the changes.
That’s it, your widget will come out on the website right after you finish!
Ask a professional Elfsight support team to help:)
And, of course, in case your widget is on any paid plan, you can always drop them a line and they’ll be happy to add the WhatsApp Chat plugin for you. Barely reach them out through the Elfsight Help Center and obtain the WhatsApp Chat plugin installed by professional developers!
How to add the chat to Magento 2
Magento is among the very best platforms for anyone creating a website for their business. Very likely you need to gain time and truly need your WhatsApp chat to look masterly on the website. In such circumstances, the best decision is to use an exclusive widget.
Benefits you get by using a plugin
- You don’t have to write JS code in your Magento live chat
- There are a lot of templates offering professional ideas for your chat box
- You make the chat window on your own, with no web developer or designer, and you would never bother about the widget functionality and design
- You have an opportunity to test the widget in a free visual editor
With the Elfsight plugin you may immediately position any of WhatsApp on the website, strengthen the UX in mere seconds and personalize the chat box the way you want.
Features of the Elfsight WhatsApp Chat box for Magento
- It is the simplest way to add WhatsApp Chat to website
- Three chat locations on a web page: floating bubble, embed chat window, embed bubble
- Possibility to present the chat on selected or all web pages, not to show on excluded ones
- Option to show or hide the chat based on the type of user’s device
- 4 open chat triggers: time on page, exit intent, scroll position, time on site
You can take a closer look at the widget in online configurator without logging in.
In addition, take into account that there are 9 premade adjustable templates which you are free to quickly discover in the free online demo. You are welcome to consider how to show diverse types of Chats, whether it’s consultations, a sales chat, or a support chat. Below, you can find some of the templates, enjoy:
- Support
- Sale
- Booking
How to add a WhatsApp Chat plugin to Magento
There’s a possibility to add the WhatsApp Chat widget to Magento in a few diverse ways. You can smoothly do it yourself after viewing our guideline and minding a video on this page.
Below you’ll find some more methods to install the WhatsApp Chat on Magento. For instance, you can attach the widget with the help of Google Tag Manager.
Install the plugin through Magento 2 admin panel
- Go to Admin panel of the edited website
- Select Content, and then Configuration.
- Choose the store view where you want to change the header or
Select Global to change the header everywhere.
- Navigate to the HTML section.
- Add your code in the Scripts and Style Sheets field.
- Click Save Configuration
This is like this, your widget will appear on the website as soon as this!
Ask a professional Elfsight support team to help:)
Yes, in case you use a widget on any paid plan, you can always ask them for installation and they’ll be happy to install the WhatsApp Chat plugin for you. Barely contact them through the Elfsight Help Center and obtain the WhatsApp Chat plugin added by professionals!
How to add the chat to Shopify
Our straightforward tutorials are designed to guide you through every possible method of embedding the Shopify WhatsApp app into your site, ensuring a smooth and efficient setup process.
Specific page for Online Store 2.0
- Log in to your Shopify admin panel and navigate to Sales Channels → Online Store.
- Click the Customize button to access the visual editor.
- To change the page, use the dropdown list at the top.
- Click Add Section, then select Custom Liquid.
- Paste your WhatsApp Chat's code into the Custom Liquid field, adjust colors and paddings if needed, and save.
Vintage Themes
- Access your Shopify backend, go to Online Store → Themes, and hit Customize.
- In the visual editor, use the dropdown to select a different page.
- Click Add Section and pick Custom Content.
- Remove unnecessary blocks if needed, then click Add Block and choose Custom HTML.
- Insert your chat's code, set Container width to 100%, and save.
For all pages
- Depending on your theme version, navigate to Sales Channels → Online Store or find it in the menu for Vintage themes.
- Click the ... button and choose Edit Code.
- In Layout, select the theme.liquid file.
- Paste the app's code before the closing </body> tag and save.
Product pages for Online Store 2.0
- Go to Products in your Shopify backend and select the page to integrate the app.
- In the Description HTML editor, paste your app's code and save.
Adding to all product pages
- From the Online Store page, navigate to Sales Channels → Online Store for Online Store 2.0 themes.
- Click the ... button, choose Edit Code, and go to Sections → main-product.liquid.
- Paste the code of your WhatsApp Chat where you want it displayed and save.
Ask a professional Elfsight support team to help:)
And, of course, if you use a widget on any paid plan, you are always most welcome to drop them a note and they’ll be happy to add the WhatsApp Chat widget for you. Simply contact them through the Elfsight Help Center and get your Shopify WhatsApp Chat widget installed by professionals!
How to add the chat to Squarespace
Squarespace is one of the main platforms for those who create websites for their businesses. Probably you wish not to waste your time and truly want your WhatsApp chat to appear professional on the website. In this case, the best choice is to use a special widget.
Benefits you get by using a plugin
- You don’t have to code anything in your Squarespace live chat
- There are a lot of templates presenting professional ideas for your chat box
- You build the chat button on your own, with no web designer or developer, and you should never bother about the widget functionality and design
- You may test the plugin in a online demo
With the Elfsight plugin you can instantly spot any of WhatsApp templates on the website, strengthen the UX in mere seconds and personalize the chat box anyhow you want.
Features of the Elfsight WhatsApp Chat box for Squarespace
- This is the easiest method to add WhatsApp Chat window to website
- 4 open chat triggers: exit intent, time on site, scroll position, time on page
- Chance to hide or show the chat depending on the type of visitor’s device
- Opportunity not to show on excluded web pages, to show the chat on selected or all ones
- 3 chat locations on a web page: floating bubble, embed chat window, embed bubble
You are free to get a closer look at the widget in online demo.
Moreover, keep in mind that there are 9 professional customizable templates that you can quickly discover in the free online demo. You are free to consider how to display different types of Chats, whether it’s a support chat, a sales chat, or consultations. Below, you can find some of the examples, enjoy:
- Support
- Sale
- Booking
How to add a WhatsApp Chat plugin to a Squarespace website
There’s an opportunity to add the WhatsApp Chat widget to Squarespace in a few different ways. You may easily do it on your own after watching a video and checking our guideline on this page.
Here are a few more ways to add the WhatsApp Chat to Squarespace. For instance, you can attach the tool with the help of Google Tag Manager.
Install the plugin through Squarespace admin panel
- Log into the website admin panel
- Open the edited site
- Click on the ‘Settings’ in the left-hand menu and choose ‘Advanced’
- Select ‘Code injection’ and paste the installation code to the ‘Header’ field
- Save the changes
This is like this, your widget will come out on the web page as soon as this!
Ask a professional Elfsight support team to help:)
Yes, if your widget is on any paid plan, you are always most welcome to drop them a line and they’ll be happy to install the WhatsApp Chat widget for you. Just reach them out through the Elfsight Help Center and get your WhatsApp Chat plugin added by professional developers!
How to add the chat to Wix
Wix is among the very best platforms for those who create sites for their businesses. Very likely you want to gain time and truly need your WhatsApp chat to look professional on the site. In such circumstances, the wisest decision is to apply a special widget.
Benefits you get by using the app
- You don’t need to write JS code in your Wix live chat
- There are many templates presenting professional ideas for your chat box
- You build the chat window yourself, without a web designer or developer, and you should never bother about the widget functionality and design
- You have an option to check the plugin in a free visual configurator
With the Elfsight plugin you may promptly spot any of WhatsApp templates on the website, enhance the UX in mere minutes and customize the chat box anyhow you need.
Features of the Elfsight WhatsApp Chat box for Wix
- It’s the most convenient method to insert WhatsApp to site
- Four open chat triggers: time on site, scroll position, time on page, exit intent
- Three chat placements on a web page: floating bubble, embed bubble, embed chat window
- Option to show or hide the chat depending on the type of visitor’s device
- Opportunity not to show on excluded web pages, to show the chat on all or selected ones
You are most welcome to explore the widget in more detail in online demo without even logging in.
What is more, take into consideration that there are 9 premade adjustable templates that you are free to quickly find in the free online demo. You are free to explore how to present different types of Chats, whether it’s a sales chat, a support chat, or consultations. Below, are some of the templates, enjoy:
- Support
- Sale
- Booking
How to integrate a WhatsApp Chat widget to Wix
You can add the WhatsApp Chat widget to Wix in a few various ways. You can easily do it yourself after minding a video and viewing our guideline on this page.
Below there are some more methods to install the WhatsApp Chat on Wix. For instance, you can add the tool with the help of Google Tag Manager.
Install the plugin through Wix admin panel
- Choose a website for the widget.
- Open the ‘Settings’ section in the Dashboard menu.
- Choose the ‘Tracking Tools’ option.
- Click the ‘New Tool’ button
- Select ‘Custom’ in the drop-down list.
- Embed your widget installation code into the ‘Paste the code snippet here’ box.
- Click ‘Apply’ to save the changes.
That’s it, your widget will appear on the website right after you finish!
Ask a professional Elfsight support team to help:)
And, of course, if you use a widget on any paid plan, you are always most welcome to drop them a note and they’ll be happy to add the WhatsApp Chat widget for you. Simply contact them through the Elfsight Help Center and get your WhatsApp Chat widget installed by professionals!
How to add WhatsApp chat to Joomla
Joomla is one of the best platforms for those who build sites for small businesses. It’s somewhat apparent you want to save your time and money, and the best idea here is to use an already created no-code solution called WhatsApp plugin.
Benefits you get by using a plugin
- You don’t need to write JavaScript code in your Joomla live chat
- There are various templates offering professional ideas for your chat box
- You make the chat button yourself, with no web developer or designer, and you never have to bother about the widget's design and functionality
- You can test the plugin in a free online editor
With the Elfsight plugin you may immediately spot any of WhatsApp templates on the site, strengthen the UX in just minutes and customize the chat box anyhow you need.
Features of the Elfsight WhatsApp Chat box for Joomla
- It is the simplest method to add WhatsApp to site
- 4 open chat triggers: time on page, time on site, exit intent, scroll position
- Opportunity to show or hide the chat depending on the type of visitor’s device
- Three chat placements on a web page: floating bubble, embed chat window, embed bubble
- Opportunity not to show on excluded web pages, to show the chat on selected or all ones
You are free to explore the widget in more detail in online configurator.
Also, take into account that there are nine professional customizable templates which you are free to conveniently discover in the free online demo. You are welcome to discover how to present different types of Chats, whether it’s a support chat, a sales chat, or consultations. Here are some of the examples, have a look:
- Support
- Sale
- Booking
How to integrate a WhatsApp Chat plugin to Joomla
There’s a possibility to add the plugin to a Joomla website in diverse ways. You may effortlessly do it on your own after checking our guideline and minding a video on this page.
Below there are a few more ways to add the WhatsApp Chat to Joomla. For example, you may add the widget with the help of Google Tag Manager.
Install the plugin through Joomla admin panel
- Log into Joomla Admin Panel
- Go to the “Extensions” tab.
- In the drop-down list choose “Templates” and click on “Templates”.
- Select the theme you are currently using on the website.
- Open the code in the “index.php” file.
- Paste the installation code right after the opening “Body” tag.
- Save the changes.
That’s it, your widget will appear on the web page as soon as this!
Ask a professional Elfsight support team to help:)
Yes, if you use a widget on any paid plan, you can always ask them for installation and they’ll be happy to add the WhatsApp Chat plugin for you. Just reach them out through the Elfsight Help Center and get your WhatsApp Chat plugin added by professionals!
How to add the chat to Opencart
Opencart is among the very best platforms for anyone creating a site for their business. It’s fairly clear you wish to save your time and money, and the best choice here is to use a ready-made tool called WhatsApp widget.
Benefits you get by using a widget
- You don’t have to write JavaScript code in your Opencart live chat
- There are numerous templates putting forward professional ideas for your chat box
- You create the chat box on your own, with no web developer or designer, and you will never bother about the widget functionality and design
- You can check the widget in a free visual editor
With the Elfsight plugin you can promptly spot any of WhatsApp templates on the site, enhance the UX in just minutes and personalize the chat box anyhow you need.
Features of the Elfsight WhatsApp Chat box for Opencart
- It’s the simplest method to insert WhatsApp Chat box to website
- Three chat placements on a web page: embed chat window, floating bubble, embed bubble
- Opportunity to hide or show the chat based on the type of user’s device
- Possibility to present the chat on selected or all web pages, not to show on excluded ones
- 4 open chat triggers: scroll position, exit intent, time on site, time on page
You are most welcome to get a closer look at the widget in online configurator without logging in.
Moreover, take into consideration that there are 9 ready-made adaptive templates which you can easily find in the free online demo. You can consider how to present different types of Chats, whether it’s consultations, a support chat, or a sales chat. Here you can find some of the templates, have a look:
- Support
- Sale
- Booking
How to add a WhatsApp Chat plugin to Opencart
There’s a possibility to add the plugin to the Opencart website in diverse ways. You can easily do it on your own after watching a video and checking our guideline on this page.
Here are a few more ways to integrate the WhatsApp Chat to Opencart. For example, you can add the tool with the help of Google Tag Manager.
Install the plugin through Opencart admin panel
- After you’ve logged into your Opencart Admin Panel, go to the Design section and choose Theme Editor
- Click on ‘Common’ and go to the footer template
- Paste the widget's installation code before the closing </footer> tag
- Save the changes
That’s it, your widget will show up on the web page as soon as this!
Ask a professional Elfsight support team to help:)
And, of course, if you use a widget on any paid plan, you are always most welcome to ask them for installation and they’ll be happy to add the WhatsApp Chat widget for you. Simply contact them through the Elfsight Help Center and acquire the WhatsApp Chat widget added by professional developers!
How to add WhatsApp chat to Drupal
Drupal is among the best platforms for those who create websites for their businesses. Most likely you wish to save your time and truly wish your WhatsApp chat to appear professional on the site. In such circumstances, the wisest decision is to apply a special widget.
Benefits you get by using a plugin
- You don’t have to code anything in your Drupal live chat
- There are numerous templates putting forward professional ideas for your chat box
- You create the chat window yourself, without a web developer or designer, and you never have to bother about the widget's design and functionality
- You have an opportunity to try out the plugin in a free visual configurator
With the Elfsight plugin you may promptly position any of WhatsApp templates on the site, enhance the UX in just minutes and personalize the chat box the way you wish.
Features of the Elfsight WhatsApp Chat box for Drupal
- It is the simplest way to insert WhatsApp to site
- Option to show or hide the chat based on the type of user’s device
- Three positions of the chat on a web page: embed chat window, floating bubble, embed bubble
- 4 open chat triggers: scroll position, time on site, exit intent, time on page
- Possibility not to show on excluded web pages, to present the chat on selected or all ones
You are welcome to explore the widget in more detail in online demo.
In addition, keep in mind that there are 9 premade adaptive templates which you can easily discover in the free online demo. You can explore how to display various types of Chats, whether it’s a sales chat, consultations, or a support chat. Here are some of the examples, enjoy:
- Support
- Sale
- Booking
How to add a WhatsApp Chat plugin to a Drupal website
There’s an opportunity to integrate the plugin into Drupal in a few diverse ways. You can easily do it yourself after checking our guideline and watching a video on this page.
Below, you’ll find some more methods to add the WhatsApp Chat to Drupal. For example, you can attach the widget with the help of Google Tag Manager.
Install the plugin through Drupal admin panel
- Log into the Drupal Admin Panel
- Go to the “Structure” tab.
- Click “Block Layout”.
- Choose any Footer section, for example, “Footer First”, and click “Place Block”.
- Press “Add custom block”. Enter the name of the block.
- Convert the page into Full HTML format and submit content in the initial HTML view.
- Paste your installation code and save the changes.
- Uncheck “Display title”, and check all the pages where you need to display the widget, on the “Content types” tab.
- Select the needed Region and click “Save” to apply the changes.
- Scroll down to the bottom of the page and click “Save blocks”.
This is like this, your widget will show up on the web page right after you finish!
Ask a professional Elfsight support team to help:)
Yes, if your widget is on any paid plan, you are always most welcome to drop them a note and they’ll be happy to install the WhatsApp Chat plugin for you. Just reach them out through the Elfsight Help Center and acquire the WhatsApp Chat widget added by professionals!
