How to add live chat to your website in 2 minutes

Adding live chat to a website used to mean installing a plugin, configuring a server and losing an afternoon. Now it is one line of code. The two minutes in the title are real for the install itself. The setup that makes chat genuinely useful (a greeting, office hours, a few saved replies) takes another fifteen, and this guide covers both.

Before you start

• A TalkingDot workspace. Sign up free; there is no trial and no card to enter.
• Access to your site's code or settings. You need a way to add a script to every page: a theme setting, a "custom code" box or a tag manager.
• Your snippet. In the dashboard, open Settings → Install. The snippet there already contains your workspace key.

The one-line snippet

The snippet looks like this, with your own domain and key filled in:

<script src="https://YOUR-TALKINGDOT-DOMAIN/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>

• Where it goes: once on every page, ideally just before the closing </body> tag. Most platforms have a "footer code" field for exactly this.
• The async attribute lets the browser keep loading your page while the messenger loads, so your content is not held up.
• The data-key attribute tells the messenger which workspace to connect to. It is visible in your page source by design; to stop it being used on other sites, add your domains to the messenger's domain allow-list in Settings.
• No style clashes. The messenger renders inside a Shadow DOM, so your theme's CSS cannot break its layout.

Where to paste it on common platforms

Menu names change between versions and themes, so treat these as directions rather than click-by-click instructions. For a hand-coded or static site, follow Install on any HTML site.

WordPress

Use a header-and-footer code plugin, or your theme's custom code setting if it has one, and paste the snippet into the footer section so it loads site-wide. Avoid editing theme files directly, because a theme update can overwrite your change. The full walkthrough is in Install on WordPress.

Shopify

From your online store's theme menu, choose to edit the theme code and open the main layout file, usually theme.liquid. Paste the snippet just above </body> and save. Duplicate the theme first so you have a clean copy to fall back on.

Wix

Add the snippet as custom code in your site settings, apply it to all pages and choose to load it at the end of the body. If you cannot find the custom code option, check whether your site plan includes it.

Squarespace

Open the code injection settings for your site and paste the snippet into the footer field. As with Wix, code injection can depend on your plan.

Webflow

In your project settings, open the custom code section, paste the snippet into the footer code field, save and publish. Custom code runs on the published site, so test there rather than in the designer.

Google Tag Manager

Create a new tag of type Custom HTML, paste the snippet, set the trigger to All Pages and publish the container. This is the tidiest option if your team already manages scripts in a tag manager.

What to set up in the next fifteen minutes

A messenger with default settings works, but a few changes make it feel like part of your business.

1. Look and greeting. In Settings → Messenger, set your brand color, position, launcher text, logo and light or dark theme. Write a greeting that says what people can ask about, for example: "Questions about plans, setup or an order? Ask here and a person will reply."
2. Team avatars. Invite teammates in Settings → Team and ask everyone to add a profile photo. Real faces in the messenger tell visitors that a person is listening.
3. Office hours and expected reply time. Set your hours in Settings → Office hours. Outside them, the messenger switches to away mode and shows when you will be back, so nobody waits in silence. See the office hours guide.
4. Email capture. Turn on email capture or a short pre-chat form so you can follow up if a visitor leaves before you reply.
5. Saved replies. Add answers to five questions you already get, in Settings → Saved replies. Type / in the composer to insert one.
6. Notifications. Turn on desktop and browser push or email notifications, or send alerts to Slack, Discord or Telegram from Settings → Integrations, so a new chat never sits unseen.

Test it before your customers do

• Use a private window. The messenger sets no cookies; it keeps a visitor token in the browser's localStorage. A private window therefore behaves like a brand-new visitor.
• Send a message and answer it. Reply from the inbox and check the typing indicators on both sides, the "Seen" receipt, and the sound and tab-title alerts.
• Send a file. Attach an image to confirm uploads work.
• Check your phone. Open the site on mobile. If you chose to hide the messenger on mobile or on certain pages, confirm those rules behave as intended.
• Try after hours. Temporarily change your office hours to see the away message and the "back at" time.
• Close the conversation. The visitor should be asked to rate the conversation.
• Find yourself. Open Visitors in the dashboard; your test session should appear in the live list.

If the messenger does not appear

• Caching or optimisation plugins. Clear the cache, and if a plugin combines or delays scripts, exclude widget.js.
• Content Security Policy. If your site sends a CSP header, allow your TalkingDot domain for scripts and network connections.
• Domain allow-list. If you set one, include every domain the messenger runs on, including www and staging versions.
• Page rules. A show or hide rule, or hide on mobile, may be doing exactly what you told it to.
• The wrong field. Some builders have both per-page and site-wide code boxes; make sure you used the site-wide one.
• The browser console. Open your browser's developer tools and look for errors that mention the widget.

Going further

Once chat is live, two developer features are worth a look. The JavaScript API lets your own code control the messenger, for example opening it from a "Contact us" button or telling it who a logged-in user is. Identity verification signs that identity with an HMAC, so nobody can pose as one of your customers. And if some customers never visit your site, TalkingDot also gives you a hosted chat page with a shareable link you can put in email signatures or social profiles.

Ready to try it? Create a free workspace, copy your snippet and follow the getting started guide. Your first conversation could be a few minutes away.