How to Add Live Chat to a Website

There’s an opportunity to add any kind of chat to a website and contact users via their favourite messenger. However, if you know that your audience can be reached in many different apps and you don’t know exactly which one to choose, there’s a solution right for you - add a Live Chat box to the website. 

Chat widget for website

All-in-One chat, or Live Chat is a tool which allows you to add several chats to one box: WhatsApp, Line Chat, Viber, Facebook Messenger, RumbleTalk, Telegram - all at once. It means that your website users will see a chat window with numerous chats and will have an opportunity to contact you in any of them. 

If you wish to add such a chat on your own, you’ll come across many difficulties, including the necessity to code and understanding the nuances of the platforms’ APIs. However, you are always welcome to choose a ready made solution called Live Chat widget, which allows you to fetch a chat box to the website without coding.

Benefits of using a Live Chat widget

While using a Live Chat widget, you get a great chance to change the design of your chat box, messages, and its behavior on a web page. For example, you can make it appear in a certain time of the page, time on site, or scroll position. You can add as many messengers as you wish, upload a profile photo so people know they’re talking to a real person, ta-da! - your widget is ready to be installed on any website!

If you choose specifically Elfsight Live Chat, you’ll have many gorgeous perks:

• Opportunity to answer users’ questions directly from your account
• 3 chat positions on a web page: embed bubble, floating bubble, embed chat window.
• Editable account picture, name, and caption in the chat header
• Chance to show the chat on all or selected web pages, not to show on excluded ones
• Option to show the chat to all visitors, new, or returning ones
• Option to show or hide the chat depending on the type of user’s device
• 4 open chat triggers: time on site, time on page, scroll position, exit intent
• Switchable reply time option

And many other settings. You can try them all in the free online demo.

Never mind if you’ve never tried coding - creating and styling a chat box in Elfsight demo won’t require any programming skills.

Elfsight chats work on all website builders and CMS: Squarespace, Shopify, WordPress, Opencart, Webflow. They can be added via GTM (or Google Tag Manager), inserted to Joomla and Drupal.

Below, you’ll be able to find the most thorough guides on all the installations, enjoy.

How to add chat to website with GTM

Most website builders and CMS allow you to place custom HTML code to add different widgets. However, there are a few of them, like Shopline, that don’t offer such an opportunity. It doesn’t mean you should start coding a live chat box yourself, you can use a special tool called GTM (or Google Tag Manager), create a tag and add dynamic content to your website.

You should do the following to get a chat box live:

1. Log in or sign up to Google Tag Manager
2. Make a new tag there, select ‘Custom HTML’
3. Put the first line of the Elfsight installation code to the created tag
4. Create a trigger and the tag to the web page
5. Save the tag and publish the changes

That’s it! Now, you are ready to add a Live Chat box with GTM.

How to add Live Chat in HTML code

You can build any kind of website with the help of HTML, CSS, and JS. However, when it comes to creating some additional dynamic elements, it seems so difficult, even experienced web developers want to have ready-made solutions.

The easiest way to add a chat to the website code is to create a special tool called widget. You can simply create the chat box in a visual editor, copy and paste its installation code to the website or web page code.

If you need the chat to show up on only one page, you should simply add the Live Chat code to the needed section. If you want to learn more about the installation process and the perks of the Live chat in HTML code, you are welcome to see this page.

How to add the chat to Squarespace

Squarespace is one of the best platforms for those who make sites for their businesses. Most likely you wish not to waste your time and really wish your files to appear professional on the site. In such circumstances, the best choice is to apply a special widget. 

Benefits you get by using a plugin

1. You don’t have to code anything in your Squarespace Chat
2. There are many templates offering professional ideas for your chat box
3. You create the chat button yourself, without a web developer or designer, and you never have to bother about the widget design and functionality
4. You may check the widget in a free visual editor

With the Elfsight plugin you can instantly spot any of 6 messengers on the website, improve the UX in mere seconds and personalize the chat box anyhow you need!

Features of the Elfsight Live Chat box for Squarespace website

• Possibility to add up to 6 messengers: Facebook Messenger, RumbleTalk, WhatsApp, Line Chat, Telegram, and Viber - all at once
• Four open chat triggers: scroll position, exit intent, time on page, time on site
• Three chat placements on a web page: floating bubble, embed chat window, embed bubble
• Possibility not to show on excluded web pages, to show the chat on all or selected ones
• Chance to hide or show the chat depending on the type of user’s device

You are free to explore the widget in greater detail on this page.

Moreover, take into account that there are eight ready-made adjustable templates that you are free to quickly discover in the free online demo. You are free to consider how to display diverse types of chats, whether it’s a support, onboarding or feedback chat. Here you can find some of the templates, have a look: 

• Support
• Sale
• Booking

How to add a Live Chat plugin to a Squarespace website

You can add the plugin to Squarespace in different ways. You may easily do it on your own after minding a video and reading our guideline on this page. 

Below you’ll find some more methods to install the Live Chat on Squarespace. For example, you can attach the widget with the help of Google Tag manager. Here's how you can add a Chat through website admin panel:

1. Log into the website admin panel
2. Open the edited site
3. Click on the ‘Settings’ in the left-hand menu and choose ‘Advanced’
4. Select ‘Code injection’ and paste the installation code to the ‘Header’ field
5. Save the changes

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:)

And, of course, if your widget is on any paid plan, you can always drop them a note and they’ll be happy to install the Live Chat widget for you. Barely reach them out through the Elfsight Help Center and get the Live Chat plugin added by professionals!

---

How to add the chat to Shopify

Shopify is among the very best platforms for those who create sites for small businesses. It’s somewhat clear that you want to save your time and money, and your best choice here is to use a no-code solution called plugin. 

Benefits you get by using the app

1. You don’t need to write JS code in your Shopify Chat
2. There are various templates presenting professional ideas for your chat box
3. You build the chat box on your own, without a web developer or designer, and you never have to bother about the widget functionality and design
4. You have an opportunity to check the plugin in a free visual editor

With the Elfsight app you may promptly spot any of six messengers on the site, strengthen the UX in mere minutes and personalize the chat box the way you want. 

Features of the Elfsight Live Chat box for Shopify

• Three chat positions on a web page: embed chat window, floating bubble, embed bubble
• 4 open chat triggers: time on site, time on page, scroll position, exit intent
• Option not to show on excluded web pages, to present the chat on selected or all ones
• Opportunity to show or hide the chat depending on the type of user’s device
• Opportunity to add as many as six messengers: Facebook Messenger, RumbleTalk, WhatsApp, Line Chat, Viber, and Telegram - all in one

You are welcome to explore the widget in more detail on this page. 

Moreover, bear in mind that there are eight ready-made adaptive templates which you are free to find in the free online demo. You are free to consider how to show various types of Chats, whether it’s a sales chat, consultations, or a support chat. Here you can find some of the examples, have a look: 

• Support
• Sale
• Booking

How to add a Live Chat plugin to a Shopify website

You can add the Chat app to Shopify in a few different ways. You may effortlessly do it yourself after watching a video and viewing our guideline on this page. 

Here are some more methods to add the Live Chat plugin to Shopify. For example, you may add the tool with the help of Google Tag manager. Here's how you can add a Chat through website admin panel:

1. Log into Shopify admin panel
2. Go to the Online store, Themes
3. Click ‘Actions’ on the Current theme card, choose ‘Edit code’ in the dropdown menu
4. Go to ‘theme.liquid’ file
5. Paste the installation code of your Live chat after the <body> tag
6. Save the changes

That’s it, your widget will come out on the website right after you finish! 

Some of the themes don’t have such a tag or a ‘theme.liquid’ file. If you come across any difficulties during installation, you are always welcome to follow the next piece of advice!

Ask a professional Elfsight support team to help:)

And, of course, in case your widget is on any paid plan, you are most welcome to drop our support team a line and they’ll be happy to install the Live Chat widget for you. Simply reach them out through the Elfsight Help Center and get the Online Chat widget added by professionals!

---

WordPress Live Chat box

WordPress is among the main platforms for those who build sites for their businesses. It’s somewhat apparent you wish to save your money and time, and the best idea here is to use a no-code instrument called plugin. 

Benefits you get by using a plugin

1. You don’t have to code anything in your WordPress Chat
2. There are various templates presenting professional ideas for your chat box
3. You build the chat window on your own, with no web designer or developer, and you will never bother about the widget's functionality and design
4. You can check the widget in a free visual editor

With the Elfsight plugin you may promptly place any of 6 messengers on the site, enhance the UX in just seconds and personalize the chat box anyhow you need. 

Features of the Elfsight Live Chat box for WordPress

• 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 chat window, embed bubble, floating bubble
• Four open chat triggers: time on page, time on site, exit intent, scroll position
• Chance to show or hide the chat based on the type of visitor’s device
• Chance to add up to 6 messengers: Viber, Telegram, RumbleTalk, Facebook Messenger, and WhatsApp - all in one

You are free to explore the widget in greater detail on this page. 

In addition, take into account that there are eight professional adaptive templates that you are free to conveniently discover in the free online demo. You can explore how to show different types of Chats, whether it’s a sales chat, consultations, or a support chat. Here are some of the templates, enjoy: 

• Support
• Sale
• Booking

How to add a Live Chat plugin to a WordPress website

You can add the plugin to WordPress in diverse ways. You can effortlessly do it yourself after reading our guideline and watching a video on this page. 

Below there are a few more ways to install the Live Chat on WordPress. For example, you can add the widget with the help of Google Tag manager. Here's how you can add a Chat through website admin panel:

That’s it, your widget will come out on the web page as soon as this! 

Ask the professional Elfsight support team to help: )

And, of course, in case you use a widget on any paid plan, you can always drop them a line and they’ll be happy to install the Chat widget for you. Simply contact them through the Elfsight Help Center and acquire the Live Chat plugin installed by professional developers!

---

Live Chat for Opencart

Opencart is one of the best platforms for anyone creating a site for their business. It’s somewhat evident that you are willing to save your time and money, and your best choice here is to use an already created no-code solution called plugin. 

Benefits you get by using a plugin

1. You don’t need to write JavaScript code in your Opencart Chat extension
2. There are many templates presenting professional ideas for your chat box
3. You build the chat button yourself, with no web designer or developer, and you would never bother about the widget's design and functionality
4. You may test the widget in an online editor

With the Elfsight plugin you can immediately position any of 6 messengers on the site, enhance the UX in mere seconds and customize the chat box anyhow you wish. 

Features of the Elfsight Live Chat box for Opencart

• Four open chat triggers: exit intent, time on page, time on site, scroll position
• Chance to hide or show the chat based on the type of user’s device
• Option to add six messengers: Viber, WhatsApp, Line Chat, Facebook Messenger, RumbleTalk, and Telegram - all at once
• 3 chat positions on a web page: embed chat window, embed bubble, floating bubble
• Chance not to show the chat on excluded web pages, to present it on selected or all pages

You can get a closer look at the widget on this page. 

What is more, take into account that there are 8 ready-made adaptive templates that you can easily find in the free online demo. You can consider how to present diverse types of Chats, whether it’s a support chat, a sales chat, or consultations. Here are some of the extension examples, enjoy: 

• Support
• Sale
• Booking

How to add a Live Chat plugin to Opencart website

There’s a possibility to add the plugin to Opencart in various ways. You may effortlessly do it on your own after minding a guideline on this page. 

Below there are some more ways to add the Live Chat to Opencart. For instance, you may attach the tool with the help of Google Tag manager. Here's how you can add a Chat through website admin panel:

1. After you’ve logged into your Opencart Admin Panel, go to the Design section and choose Theme Editor
2. Click on ‘Common’ and go to the footer template
3. Paste the widget's installation code before the closing </footer> tag 
4. Save the changes

This is like this, your widget will appear on the website 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 drop them a line and they’ll be happy to install the Live Chat widget for you. Just reach them out through the Elfsight Help Center and get the Chat widget added by professionals!

---

How to add a Live Chat to Webflow

Webflow is among the very best platforms for those who make websites for their businesses. Probably you need not to waste your time and truly want your files to appear masterly on the site. In this case, the best decision is to apply an exclusive widget. 

Benefits you get by using a plugin

1. You don’t have to write JavaScript code in your Webflow Chat
2. There are a lot of templates putting forward professional ideas for your chat box
3. You create the chat window yourself, without a web designer or developer, and you should never bother about the widget's design and functionality
4. You can test the widget in an online demo

With the Elfsight plugin you can immediately place any of 6 messengers on the site, enhance the UX in just minutes and customize the chat box the way you need. 

Features of the Elfsight Live Chat box for Webflow website

• Chance to add up to six messengers: RumbleTalk, Viber, WhatsApp, Line Chat, Telegram, and Facebook Messenger - all at once
• Option to present the chat on selected or all web pages, not to show on excluded ones
• Four open chat triggers: time on site, time on page, exit intent, scroll position
• Option to show or hide the chat depending on the type of visitor’s device
• 3 chat positions on a web page: floating bubble, embed bubble, embed chat window

You can explore the widget in greater detail on this page. 

Also, take into consideration that there are 8 professional adaptive templates which you are free to discover in the free online demo. You can discover how to display different types of Chats, whether it’s a sales chat, a support chat, or consultations. Here you can find some of the examples, enjoy: 

• Support
• Sale
• Booking

How to add a Live Chat plugin to a Webflow website

There’s an opportunity to add the plugin to Webflow in different ways. You may smoothly do it on your own after watching a video and reading our guideline on this page. 

Below there are some more methods to add the Live Chat to Webflow. For instance, you may add the widget with the help of Google Tag manager. Here's how you can add a Chat through website admin panel:

1. Log in to your Webflow Admin Panel
2. Click on the dots icon and choose Settings in the menu that comes up
3. Click ‘Custom Code’
4. Paste the widget’s installation code to the ‘Head Code‘ field. 
5. Press ‘Save‘, and publish 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:)

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 Live Chat for you. Simply contact them through the Elfsight Help Center and acquire your Live Chat widget added by professional developers!

---

How to add a Live Chat to Drupal

Drupal is one of the best platforms for anyone creating a site for their business. Most likely you want to save your time and really need your files to appear professional on the site. In this case, the wisest decision is to use an exclusive widget. 

Benefits you get by using a plugin

1. You don’t need to write JS code in your Drupal Chat
2. There are various templates presenting professional ideas for your chat box
3. You make the chat button on your own, without a web designer or developer, and you should never bother about the widget functionality and design
4. You have an opportunity to check the widget in an online demo

With the Elfsight plugin you may instantly place any of 6 messengers on the website, strengthen the UX in just minutes and adjust the chat box the way you want. 

Features of the Elfsight Live Chat box for Drupal website

• Three chat locations on a web page: embed bubble, embed chat window, floating bubble
• Opportunity not to show on excluded web pages, to present the chat on all or selected ones
• Four open chat triggers: exit intent, scroll position, time on page, time on siteOption to add 6 messengers: Telegram, WhatsApp, Line Chat, RumbleTalk, Viber, and Facebook Messenger - all at once
• Opportunity to hide or show the chat based on the type of user’s device

You can get a closer look at the widget on this page. 

Also, take into consideration that there are eight professional adjustable templates which you are free to discover in the free online demo. You are free to discover how to show various types of Chats, whether it’s a support chat, consultations, or a sales chat. Here you can find some of the templates, have a look: 

• Support
• Sale
• Booking

There’s a chance to add the Embed plugin to Drupal in a few diverse ways. You can effortlessly do it on your own after reading our guideline and minding a video on this page. 

Here are some more ways to install the Live Chat on Drupal. For instance, you may attach the tool with the help of Google Tag manager. Here's how you can add a floating Chat box through website admin panel:

1. Log into the Drupal Admin Panel
2. Go to the “Structure” tab. 
3. Click “Block Layout”. 
4. Choose any Footer section, for example, “Footer First”, and click “Place Block”. 
5. Press “Add custom block”. Enter the name of the block. 
6. Convert the page into Full HTML format and submit content in the initial HTML view.
7. Paste your installation code and save the changes. 
8. Uncheck “Display title”, and check all the pages where you need to display the widget, on the “Content types” tab. 
9. Select the needed Region and click “Save” to apply the changes. 
10. Scroll down to the bottom of the page and click “Save blocks”.

That’s it, your widget will show up on the web page as soon as this! 

Ask a professional Elfsight support team to help:)

Yes, in case your widget is on any paid plan, you can always drop them a line and they’ll be happy to install the Live Chat for you. Simply contact them through the Elfsight Help Center and acquire the Live Chat installed by professionals!

---

How to add the chat to Joomla

Joomla is among the main platforms for those who make sites for small businesses. It’s fairly apparent you are willing to save your money and time, and the best choice here is to use an already created no-code tool called plugin. 

Benefits you get by using a plugin

1. You don’t have to code anything in your Joomla Chat
2. There are many templates presenting professional ideas for your chat box
3. You make the chat box yourself, without a web developer or designer, and you would never bother about the widget's functionality and design
4. You can check the plugin in a free online editor

With the Elfsight Chat plugin you may immediately spot any of six messengers on the site, strengthen the UX in just minutes and personalize the chat box the way you want. 

Features of the Elfsight Live Chat box for Joomla website

• Opportunity to show the chat on selected or all web pages, not to show on excluded ones
• 3 chat locations on a web page: floating bubble, embed bubble, embed chat window
• Possibility to add six messengers: RumbleTalk, WhatsApp, Line Chat, Facebook Messenger, Telegram, Line Chat and Viber - all at once
• Possibility to hide or show the chat based on the type of visitor’s device
• 4 open chat triggers: time on site, time on page, scroll position, exit intent

You can take a closer look at the widget on this page. 

What is more, keep in mind that there are 8 professional customizable templates which you can find in the free online demo. You can explore how to present various types of Chats, whether it’s consultations, a support chat, or a sales chat. Below are some of the templates, enjoy: 

• Support
• Sale
• Booking

How to add a Live Chat plugin to a Joomla website

There’s an opportunity to add the Embed plugin to Joomla in diverse ways. You can easily do it on your own after checking our guideline and watching a video on this page. 

Below there are a few more methods to install the Live Chat on Joomla. For instance, you may attach the tool with the help of Google Tag manager. Here's how you can add a Chat through website admin panel:

1. Log into Joomla Admin Panel
2. Go to the “Extensions” tab. 
3. In the drop-down list choose “Templates” and click on “Templates”. 
4. Select the theme you are currently using on the website. 
5. Open the code in the “index.php” file. 
6. Paste the installation code right after the opening “Body” tag. 
7. Save the changes.

This is like this, your widget will appear on the web page right after you finish! 

Ask a professional Elfsight support team for help:)

And, of course, in case your widget is on any paid plan, you are always most welcome to ask them for installation and they’ll be happy to add the Live Chat for you. Barely reach them out through the Elfsight Help Center and acquire your Live Chat widget added by professional developers!

---

Live Chat Examples

Below, you can find a few chat examples for any website. They look professional, appealing and yet simple. Those templates are totally customizable, and you can adjust all elements any way you wish.

General

This is the most common template, containing the most important settings. It matches with any website design and at the same time makes opportunity to get your support noticeable.

Feedback

If you wish to get reviews about anything special on your website, you can choose this template. It has a bright design and floating position, so visitors will see your chat all the time while exploring the website.

Onboarding

You can welcome people in your services with the welcome message and navigation info, so website visitors would find all the needed details with ease.

Find all these templates and many others on this page and remember: you will never have to code if you use Elfsight's free online configurator. You’ll simply switch the sliders on and off, adjust all the elements visually - everything you do will appear on screen right away.

FAQ

There are some more topics that you need to learn before starting to work with the Chat widget. You might be wondering whether it’s possible to install the Live chat on different platforms for free or not, how many chats you can add to one chat box, or if you want to get answers to some other questions. Here are the most frequently asked ones.

However, if you have any other doubts regarding Live chat widget, you are always welcome to drop a line to our professional support specialists: they’ll eagerly guide you and help in Elfsight Help Center.