How to Add Live Chat to Your Website: A Step-by-Step Guide

To add live chat on website pages, you create an account with a chat provider, register your site's exact address, copy the provider's script snippet and paste it once into your site's shared template, usually right before the closing </body> tag. Then you decide who answers, write a greeting, choose which pages show the chat and send test messages from a computer and a phone. The whole job takes an hour or two; most of that time goes into the decisions around the code, not the code itself.

This guide walks through each step in order and ends with a checklist you can use before you tell customers the chat is live.

Before you install: decide what the chat is for

A chat button that nobody answers does more harm than no button at all. Before you touch any code, write down three things:

1. The job of the chat. Pre-sale questions, order help, technical support, booking — or all of them. This decides who answers and which pages need the chat most.

2. Who answers and when. Name the people, their hours and what happens outside those hours. If there's no answer at night, say so in the greeting, or plan for an AI assistant to cover the first reply (see the section on automation below).

3. What "answered" means. A target for the first reply (for example, two minutes during working hours) and a rule for handing a conversation to a colleague.

If you're still choosing a provider, our separate guide on how to choose live chat software covers the comparison. This article assumes you've picked one and want it working.

Step 1: Choose where the chat appears

Most providers show a floating button in a corner of every page. That's a sensible default, but it's worth deciding page by page:

Also decide which corner. If your site already has a cookie banner, a "back to top" arrow or a mobile bottom menu in the bottom-right corner, put the chat on the other side, or the two will overlap on phones.

Step 2: Register your site and copy the code

Every chat provider ties the widget to a site so that a copied snippet can't be reused on someone else's domain. The details differ, but the pattern is the same:

1. Create a workspace or project for your business.

2. Add the site with its exact address. https://example.com and https://www.example.com are different origins for browsers; if your site answers on both, add both.

3. Copy the installation snippet. It usually contains a public site key — that key isn't a secret, but don't reuse a key from another site.

A typical snippet is one or two <script> tags with an async attribute, so the page doesn't wait for the chat to load.

Step 3: Paste the snippet once, in the shared template

The rule is simple: one copy of the code, on every page where you want the chat, loaded from the template all pages share.

• Hand-coded or framework sites. Paste the snippet before </body> in the main layout file. In a single-page application (React, Vue, Next.js and similar), add it once to the app shell, not inside a component that re-renders on navigation, or you'll get two widgets.

• WordPress. Use your theme's footer settings or a header-and-footer code plugin; there's a detailed walkthrough in WordPress live chat plugins: how to choose and install one.

• Shopify. The snippet goes into the theme layout through the code editor; see live chat for Shopify stores for what to watch on checkout pages.

• Website builders. Wix, Squarespace, Tilda, Webflow and others have a "custom code" or "code injection" setting for the whole site. Some builders only allow custom code on paid plans, so check yours.

• Google Tag Manager. You can deploy a chat script with a Custom HTML tag, but a direct install in the template is easier to debug. Use GTM for analytics events rather than for the widget itself, unless your team manages all scripts there.

If your site uses a Content Security Policy, allow the provider's script and frame addresses in script-src and frame-src. A strict policy that silently blocks the chat is one of the most common reasons a widget "doesn't show up".

Step 4: Set up the people who answer

The code puts a button on the site. The team setup decides whether a customer gets an answer.

Add teammates. Invite each person who will answer. Give them the minimum permissions they need: most agents only need to read and reply in customer conversations, not change billing or install code.

Choose a routing method. Common options:

• Manual — everyone sees new conversations and someone takes them. Fine for one to three people.

• Least busy — the system offers the conversation to the available person with the fewest open chats.

• Round robin — conversations go to available people in turn.

Create departments if your questions split cleanly. "Sales" and "Support" is the classic pair. Letting visitors choose a department before they write saves a transfer, but keep the list short; five options in a tiny widget is a form, not a chat.

Set a hand-off rule. If the assigned person doesn't reply within a few minutes or goes offline, the conversation should return to the queue so someone else can pick it up.

Decide where people answer from. Agents shouldn't need to keep a browser tab open all day. Check the desktop and phone options and set up notifications for each person before launch.

Step 5: Write the greeting and the offline message

The greeting is the first thing a visitor reads. Good greetings are short, specific and honest about response times:

• Product page: "Questions about sizes or delivery? We usually reply within a few minutes."

• Pricing page: "Not sure which plan fits? Tell us how many people will use it."

• Outside hours: "We're offline until 9 a.m. ET. Leave your question and we'll answer here in the morning."

A few practical rules:

• Don't auto-open the window on every page. An automatic pop-up after 20–40 seconds on a pricing page can work; the same pop-up on every blog post annoys readers and covers content on phones.

• Match the language of the page. If your site is multilingual, set the widget language from the page or the browser rather than hard-coding English.

• Say who's answering. If an AI assistant answers first, say it. In the EU this is now a legal requirement: the AI Act's transparency rules for systems that talk to people have applied since 2 August 2026, as Houthoff's overview of Article 50 (September 2026) explains.

Step 6: Decide what automation does — and what it doesn't

Many teams now put an AI assistant in front of the people. That can cover nights and weekends and take routine questions off the queue, but customers are wary of it. In a Gartner survey of 5,728 customers (published July 2024), 64% said they would prefer companies didn't use AI in customer service, and the top worry was that it would get harder to reach a person.

The practical answer is not "no AI" but a visible way out: the assistant answers from your own materials, says when it doesn't know, and hands the conversation to a person in the same window. How to split the work between the two is covered in AI chatbots vs. live chat. For the installation, just decide now whether the assistant is on from day one or added after the team has handled a few weeks of real questions. The second option gives you better material to train it on.

Step 7: Connect analytics and privacy settings

A chat creates useful signals: who opened it, on which page, and whether they actually sent a message. Send those as events to your analytics so you can see which pages generate conversations and whether chats lead to sales.

At the same time, check privacy:

• Does the widget set cookies or store identifiers? Does it respect your consent banner?

• Where are conversations stored, and for how long?

• Can you hide the chat or stop analytics on specific pages (for example, a medical intake form)?

Write the answers into your privacy policy, and add the chat provider to your list of data processors.

Step 8: Test on desktop and mobile before launch

Testing is where most installations go wrong — not because the code is broken, but because nobody looked at the chat from the customer's side on a real phone. Use a private browser window (so you're a fresh visitor, not a logged-in admin) and work through the checklist below.

Launch checklist: desktop

• The chat button appears on every page you planned, and not on pages you excluded.

• Only one widget loads (check the page source or the browser's network tab for duplicate scripts).

• The button doesn't cover a cookie banner, a "buy" button or a form field.

• The greeting matches the page and the language.

• A test message arrives in the team's inbox within seconds, with the page it was sent from.

• A reply from the team appears in the visitor's window without reloading.

• Moving to another page keeps the conversation open.

• Closing the window and coming back later restores the conversation.

• File and image attachments work, if you allow them.

• Analytics shows the open and message events.

Launch checklist: phone

• The button is reachable with a thumb and doesn't overlap the bottom navigation or a sticky "add to cart" bar.

• Opening the chat doesn't zoom the page or hide the input field behind the keyboard.

• The window can be closed easily; there is a visible close or minimize control.

• The page doesn't become noticeably slower to respond after the widget loads.

• Notifications reach the agent's phone when a new conversation starts.

• The offline greeting appears outside working hours.

Performance check

Third-party chat scripts are a common cause of slow pages, especially on mid-range phones. Google's responsiveness metric, Interaction to Next Paint, counts 200 milliseconds or less as good and anything above 500 milliseconds as poor, according to web.dev's INP guide. Run PageSpeed Insights or Lighthouse on a product page before and after installing the chat. If the scores drop sharply, ask the provider whether the script loads asynchronously and whether the button can be shown before the full chat loads.

Step 9: Run the first two weeks deliberately

After launch, watch the real conversations for two weeks before changing anything big:

• Read every conversation, including the ones that ended without an answer.

• Note the ten questions that come up most often. They're your FAQ, your future AI knowledge base and, often, a sign that a product page is missing information.

• Compare first-reply times with the target you set.

• Check which pages generate chats. If checkout generates many, look at the checkout, not the chat.

• Adjust greetings and page rules based on what you learned.

How Sensever helps

Sensever is a messenger with business tools under one account, and its website widget sends visitor messages into Requests, the team's shared queue. Here's how the steps above map onto it, based on the widget installation guide and Website widgets: support, comments and private access.

Install. In Projects, create a project with your site's domain and add the site under "Sites and installation". The site must open over HTTPS, and example.com and www.example.com are added separately. In the "Widget code" block you choose WORLD or RU (RU tries sensever.com and sensever.ru and uses the first that loads) and paste one copy of the code before </body>; in a single-page app, once in the shared shell. On a website builder, use its custom code setting.

Configure the widget. "Widget settings" covers showing or hiding the widget, the title, greeting and button text, color and position, automatic opening with a delay, window size, letting customers choose a department and optional reCAPTCHA protection. The interface language can follow the browser (22 languages are supported), and you can replace the standard button with your own.

Page rules. The "Rules" tile lets you hide or show the chat on specific pages and stop analytics on others. Conditions include the page address, first or returning visit, whether the team is online, the device (phone or computer) and visitor data your site passes in.

People and routing. Teammates are added to the project; departments group them. Routing can be manual, least busy or round robin; by default the assigned person has 5 minutes to reply and a 3-minute grace period for losing connection before the request can go to someone else, and both values can be changed (Customer support: requests, team and routing). The "Team" tile also holds first and next reply SLA targets, auto-close and per-agent limits, and "Channel access" decides who sees requests from each channel (Channel access). Each request shows the page the visitor wrote from and their later navigation on your site, starting from the first message.

Greetings and proactive messages. Auto-messages can appear as a bubble above the button or in the open window, by page, time and visitor rules, and also when a visitor comes back after a number of days or when your site reports an event such as an abandoned cart.

AI. An optional AI assistant answers from your published articles, files and tables, and hands the conversation to your team in the same request; when an agent takes it, the assistant pauses there (AI chat for your website).

Analytics. With one switch in "Widget settings", widget events (opened, channel chosen, message confirmed) go to Google Tag Manager or GA4 (widget events in GTM and GA4). The same code also works as a free visitor pixel for Sensever's "Web analytics".

Where agents answer. In the browser, in the Windows and macOS apps, or on a phone as an installed web app with notifications; App Store and Google Play apps are not out yet (Sensever: what it is and where to start).

Cost. The project owner answers for free. Each additional team member who answers customers is $9 per month; AI usage is $19 per million tokens with a $5 minimum per project in months the AI is used; 5 GB of storage is free. Current prices are on sensever.com.

FAQ

Where exactly do I paste the live chat code?

Into the template that every page shares, once, usually right before the closing </body> tag. On WordPress, Shopify and website builders, use the theme's or builder's site-wide custom code setting rather than pasting into individual pages.

Will a chat widget slow down my website?

It can. A well-built widget loads asynchronously and shouldn't block the page, but every third-party script costs some processing time on phones. Measure a key page with PageSpeed Insights before and after installation and compare the responsiveness score.

Do I need someone online all day to offer live chat?

No, but you need an honest greeting. State your hours, collect the question and answer when you're back, or let an AI assistant handle the first reply with a clear path to a person.

Why doesn't the chat appear on my site after installation?

The usual causes are a domain mismatch (with or without www), the widget being switched off in its settings, a caching plugin serving an old page, a Content Security Policy blocking the script, or a rule hiding the chat on that page. Check them in that order.

Should the chat open automatically?

Rarely. Automatic opening can help on pricing or high-intent landing pages after the visitor has spent some time there. On most pages, a visible button and a short greeting are enough.

How do I know the chat is working well?

Track three numbers from the start: how many visitors open the chat, how many send a message, and how fast the first human reply arrives. Then read the conversations themselves — they show what your website fails to explain.

Conclusion

Putting live chat on a website is a small technical task and a bigger organizational one. Paste the code once in the shared template, register the exact domain, and spend most of your effort on who answers, what the greeting promises, which pages show the chat and how it behaves on a phone. Run the checklist, launch, read the first two weeks of conversations and adjust. For the next step, see how to combine AI chatbots and live chat.