Skip to content
LiveChatDock
FeaturesPricingCompareSecurityContact
Sign inStart free trial
FeaturesPricingCompareSecurityContactSign inStart free trial
Home / Blog / Setup

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

On this page

  1. What you need before you start
  2. Step 1: create your workspace
  3. Step 2: copy the script tag
  4. Step 3: paste it before the closing body tag
  5. Step 4: check that it loads
  6. Step 5: set up the widget
  7. Step 6: invite your team and write replies
  8. If the widget does not appear
  9. Before you go live

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.

  1. Check the script is in the page template, not only in a preview or a draft version of the site.
  2. Clear your browser cache, then reload the page in a private window.
  3. Confirm the tag was pasted once. Two copies can conflict.
  4. Check that the script is not blocked by a browser extension or a consent banner that stops third-party scripts.

Still stuck?

Email support with the page address and a short description of what you see. Say which platform the site runs on, since most setup issues depend on how the template is built.

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.

Start your free trial See pricing

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

LiveChatDock

Real-time live chat for your website.

FeaturesPricingAboutChangelogBlogComparevs LiveChatvs CrispSecurityContactSign in

© 2026 DataConflux. LiveChatDock is a product of DataConflux, 124 City Road, London, United Kingdom.

PrivacyTermsXInstagramLinkedInYouTube