Add live chat to website.

How‌ ‌to‌ ‌Add‌ ‌Live‌ ‌Chat‌ ‌to‌ ‌a Website‌

Are you considering adding live chat to your website? On this page, you’ll discover how to do it in under 2 minutes.

Keep on reading for a step-by-step guide to adding live chat on your website, and some ideas for different ways to make the live chat strategy a success.  

But let’s get something out of the way first.

Do You Even Need a Live Chat For Your Website?

I’m sure you know the benefits of live chat already. You know that live chat helps improve sales, increase leads, boost conversions, or enhance customer service.

But if you are a customer-centric brand looking for that final reason to add a live chat widget to your website, these statistics might help you make an informed decision:

  • About 69% of shoppers in the United States demand live chat.
  • Live chat is the #1 customer service choice for customers between 18 and 49 years old.
  • Nearly 73% of customers consider live chat the most satisfactory form of communication with a business.

Incredible, isn’t it? So, let’s see how you could add live chat to your site quickly.

How To Add Live Chat To Your Website? A Step-by-Step Guide

Step-1: Choose the right live chat software

Social Intents is one of the top live chat tools in business, with features suited for brands of all sizes. Over 65,000 businesses use our solution, and you can try our 14-day free trial (no credit card required).

But if you’d like to see all the options first, look for these features: 

  • Cloud-based: Choosing a cloud-based live chat solution means the software company will handle everything – storage, performance, security, and more. You won’t have to host the software on your server and take care of it.
  • Mobile-friendly: Given that mobile devices drove 61% of website visits in 2020, it’s crucial that the chat window looks and performs well on a smartphone.
  • Visitor interface: Not only on mobile, but the chatbox should also look and feel great on any device. Therefore, your live chat software must let you customize the live chat widget.
  • Agent interface: Much more than your customers, your agents will be facing the live chat software interface, so make sure the software’s agent side has well-thought-out UI/UX. 

Here’s where Social Intents shines the most. We integrate with Slack and MS Teams, so your agents will be using either of the two top internal communication platforms they’re likely already familiar with.

  • Asynchronous loading: A live chat widget can hinder your site’s loading speed if it doesn’t load asynchronously.
  • Integrations: Check if the live chat software integrates with your ticketing system, CRM, and other customer service or sales tool before making a decision.
  • Support: It’d be pretty ironic if a company that’s supposed to help you better your customer service doesn’t offer proper customer support.
  • Other features: The above mentioned are fundamental features that if a live chat software doesn’t have, you should disqualify it immediately. Here are a few more important ones: chatbot, file sharing, typing indicator, chat transcripts, chat notifications, rich messages, canned messages, chat routing.

Step-2: Sign up with Social Intents (14-day free trial)

The process for adding live chat to a website differs from software to software, but Social Intent’s setup process is pretty standard, so I’ll go through it step-by-step.

Firstly, go to and sign up for the free live chat trial. You can choose the plan later.

installing live chat on a website.

Sign up using MS Teams, Slack, or email.

Note: You can also directly add Live Chat by Social Intents from the Slack App Directory or MS Teams app store.

If you sign up from the Social Intents website, the next screen you’ll see is this:

instructions for live chat integration.

Click “Add” besides Live Chat to get your personalized code/link/widget key. 

Step-3: Add code to your website

A window with an HTML code and a widget key for WordPress will pop up on adding Live Chat. (If you want to close it for the time being, no worries; you can always get the code and key from the Social Intents dashboard) 

Live chat code to add to HTML.

You can add the HTML code to any website; as instructed, just paste the code before </body> of your website template. If you find it difficult, our developers can help.

To use the widget key, install our WordPress live chat plugin first, and you’ll have the option to add the app key there:

Setting up the live chat widget.

That’s all on embedding live chat to your website front. Your visitors can now see a live chat window on your website.

Step-4: Customize your live chat window

To edit your live chat settings, go to My Apps > Live Chat > Edit Settings

Customizing live chat window.

You’ll have several categorized options to, well, edit your live chat settings.

First up, general settings

Live chat general settings.

Under general settings, you can change/add:

  • Live chat widget name: By default, it’s “Live Chat.” You can change it to anything. For instance, “[Company Name] Customer Support.”
  • Tab Type: Show the live chat tab as an icon or a text strip.
  • Tab color: Add your brand color’s hex code to make your live chat a part of your brand identity.
  • Element visibility: You can switch on/off the chat button when offline, emojis, file upload option, notification counts, chat feedback button, and storing chat transcript history.
  • Chat URL: Customize your live chat URL and then use that URL in your emails, texts, etc. The message receiver (or anyone with the link) can click it to start chatting with your sales or live chat support agents directly.
  • Timeout: End the chat after a specific time of inactivity.
  • Email address to receive chat transcripts and missed chat notifications.

Customize Text

Customizing the text.

Change visibility and content of all the text elements that appear in the live chat widget:

  • User detail fields: Set on/off and required/not required on user data fields – name, email, phone number, and custom. Also, of course, change all the data field texts as you like.
  • Start Message: When visitors click the chat button, they get a default message “Questions? Chat with us – we’re here to help!” Change it to whatever you want.
  • Other messages: Change the text of proactive popup message, timeout message, waiting message, message confirmation, offline message, end message, closed message, confirm close message, etc.
  • Dropdown list: Add a dropdown list for users to select the department they’d like to chat with. For instance, you can add options such as “Support,” “Sales,” “Billing,” etc.
  • Button text: Customize the text of the start button, close button, leave chat button, cancel button, minimize window button, send transcript button, leave feedback button, and send feedback button.
  • Other: Add text for invalid email error, required field error, message area placeholder, and more.

Chat targeting

Customizing targeting options.

Setup exactly how, where, and when your chatbox appears with Social Intents’ targeting rules:

  • Show or exclude the chatbox on or from specific web pages.
  • Set up different live chat triggers for different visitor actions. For example, show a “welcome back” message on their second visit. You can also trigger exit-intent live chat popup with triggers.
  • Avoid spam by blocking specific IP addresses.

Other live chat settings

You also have the option to set up a chatbot or add CSS/Javascript/jQuery code to your chat window.

Furthermore, you can add your Google Analytics tracking ID to track all live chat event data. But, of course, we have our own dashboard ⁠— with all live chat metrics ⁠— for that:

Live chat dashboard.

Step-5: That’s it – Make the most out of the live chat

Step-1 to Step-4 includes all the aesthetic and technical parts of setting up an ideal live chat for your website. Post that, everything is in your/your live chat agents’ hands.

Here are a few live chat best practices and etiquettes to win with live chatting:

  • Do not keep your customers waiting: Most customers choose to use live chat because it’s instant, real-time messaging. If you delay answering here, they’ll be significantly more disappointed than a late reply to, say, an email they sent.
  • Act human: Don’t sound like a bot – start the live chat with a friendly greeting, use emojis and GIFs during live chat sessions, use the agent’s real picture, and empathize with the chatter.
  • Send proper messages: Good messages are short, simple, and easily understandable (jargon-free). Plus, you represent a business, so the messages must be grammatically correct.
  • End on a high note: Ensure you solve users’ queries and ask them if they have any other questions. Also, ask for their feedback on the live chat session to improve your live chat experience.


Adding live chat to your website is super easy, as you discovered in this step-by-step guide.

It’s almost like adding an app from the app store: find the app, click on the install button, and that’s pretty much it. The hardest part is embedding the code, but that’s straightforward too (plus, you can always contact us to help you with it).

Of course, there are quite a few settings you can play with, but they are properly labeled with descriptions wherever needed.

As I stated in the beginning, you’ll add a basic live chat to your website in under 2 minutes, especially if you read this article.

Start your 14-day free trial with Social Intents.

Desplazarse hacia arriba