Setup
How to add live chat to your website
A step-by-step guide to adding a live chat widget to any website, and how to check it works before visitors see it.
By DataConfluxLab · Published 2026-10-06 · 3 min read
Adding live chat to a website takes a few minutes and one piece of code. You create a workspace, copy a script tag from the dashboard, and paste it into your site. The widget then appears on every page that loads the script. This guide walks through each step, then covers what to check if the widget does not show up.
What you need before you start
- Access to the code that controls your site's footer or template. On most platforms this is a settings area labelled custom code, scripts or footer.
- A LiveChatDock workspace. The 14-day trial needs no credit card, so you can test the whole setup first.
- A few minutes to set your widget colour and text before the widget goes live.
Step 1: create your workspace
Sign up for LiveChatDock. Your workspace is ready straight away, and you can invite your team later. Everything in the workspace, including every feature, is available during the trial.
Step 2: copy the script tag
The dashboard gives you one script tag. It contains a site key that belongs to your workspace, so copy the tag from your own dashboard rather than from a guide. Keep it in a safe place until you have pasted it into your site.
Step 3: paste it before the closing body tag
Open the template that holds your page footer, and paste the script just before the closing body tag. If your site is built with a website builder or a content management system, look for a section named footer code, custom code or scripts. The rule is the same everywhere: one tag, once per page. Pasting it twice can cause the widget to load twice.
If your store runs on Shopify, the steps are slightly different. The Shopify guide covers the exact path through the theme editor.
Step 4: check that it loads
Open your site in a private browser window, so you see it the way a new visitor would. The chat launcher should appear in the corner of the page. Click it, send a test message, and confirm the message arrives in your inbox. Do this on a phone too, because the layout changes on small screens.
Step 5: set up the widget
Now make the widget match your site. In the dashboard you can change the widget colour so it fits your brand, choose which corner the launcher sits in, and set the text on the launcher. These settings live in the dashboard, so you do not need to edit the code again when you change your mind.
- Choose a colour that stands out from your page without clashing with it.
- Pick a position that does not cover your main call to action.
- Use short launcher text, such as Chat with us, so it is easy to read on a phone.
The custom widget page lists the options in more detail.
Step 6: invite your team and write replies
Invite the people who will answer chats, then write a set of canned responses for the questions you hear most often. Ready replies keep response times low when the inbox is busy, and they stop different agents from giving different answers. The canned response examples give you a starting point.
Also decide how many people need to be online to cover your busy hours. The guide on how many agents you need walks through the numbers.
If the widget does not appear
Most problems come from one of a few causes. Work through them in order before you contact support.
- Check the script is in the page template, not only in a preview or a draft version of the site.
- Clear your browser cache, then reload the page in a private window.
- Confirm the tag was pasted once. Two copies can conflict.
- Check that the script is not blocked by a browser extension or a consent banner that stops third-party scripts.
Before you go live
Once the widget loads, read through the setup one more time as a visitor. Check the welcome message, the launcher text and the reply times. The welcome message examples help if you want to change the first line. Then send a real test chat from a different device and close the loop. When it works, the widget is ready for visitors.
Ready to try it?
LiveChatDock is $10 a month for the whole team, with unlimited agents. Start a 14-day trial with no credit card.
Related guides
Setup
How to add live chat to a Shopify store
The steps to put a live chat widget on a Shopify store, and where the code goes so the widget loads on every page.
3 min read
Widget setup
Welcome message examples for live chat
Welcome message examples for your live chat widget, with a short line for each situation: product pages, pricing, checkout and after hours.
3 min read
Staffing
How many agents do you need for live chat?
A practical way to size a live chat team, and why per-agent pricing makes the answer more expensive than it needs to be.
3 min read