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

Most people who want to add live chat to a website expect a developer project. In practice, installing the widget takes a few minutes: almost every chat tool gives you one line of code, and almost every site builder has a place to paste it. The harder part is everything around the snippet — where exactly it goes, how the widget looks, who answers when a visitor writes, and how you confirm it really works for visitors and not only in your own browser. This guide walks through the whole process in a platform-neutral way and points you to platform-specific instructions where they help.

What you need before you add live chat

Before you touch any code, have these ready:

• Access to your site's code or settings. On a CMS that's an admin account; on a site builder it's usually a "Custom code" section, which on some platforms requires a paid plan.
• A chat account and your widget key. The key tells the widget which workspace to send messages to.
• A rough plan for who will answer. Even one person with the app on their phone is enough to start, but decide it before launch, not after the first unanswered message.
• Your brand color and a short greeting. Five minutes of thought here saves you a widget that looks like an afterthought.

Step 1: Create a workspace and get your widget code

Sign up for your chat tool and open the section with the installation code. In ChatDeck it's Settings → Integration, and the snippet looks like this:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_…" async></script>

The data-chatdeck-key attribute holds your public key (it starts with pk_). It's safe to put on a public page — it only identifies which workspace the chat belongs to. The async attribute means the browser loads the script without pausing page rendering.

Copy the snippet with the copy button rather than selecting it by hand. A missing quote or a truncated key is the most common reason a widget never shows up.

Step 2: Paste the snippet

The code has to load on every page where you want the chat. There are three usual ways to get it there.

Option A: your site template

If you have a custom site or a theme you control, open the shared template — often header.php, footer.php, a layout component or base.html — and paste the snippet just before the closing </body> tag. Placing it inside <head> works too. Save, deploy, and reload a page. The guide for HTML sites covers this in more detail.

Option B: the CMS or site builder settings

Site builders hide the template but offer a field for custom code:

• Wix: Settings → Development & integrations → Custom Code → Add Custom Code, apply to all pages, load once, place in "Body – end". It needs a published site on a paid plan with a connected domain. See the Wix guide.
• Webflow: Site settings → Custom code → Footer code, then publish the site — custom code doesn't run inside the Designer. See the Webflow guide.
• WordPress: use a plugin instead of editing theme files; the WordPress live chat plugin guide explains the options.
• Shopify: the snippet goes into the theme; the Shopify live chat guide walks through it.

Option C: Google Tag Manager

If your site already runs Google Tag Manager, you don't need to touch the site at all. Create a new tag of type Custom HTML, paste the snippet, leave "Support document.write" off, set the trigger to All Pages, then Submit and Publish. The GTM guide has the details. Tag Manager is also the easiest way to limit the chat to certain pages: swap "All Pages" for a trigger that matches only the URLs you want.

Step 3: Match the widget to your brand

A default widget works, but a matched one looks like part of your site. Settings worth a minute each:

• Color and theme. Use your brand color for the launcher and header. Many widgets offer light, dark, an auto mode that follows the visitor's system theme, and fully custom colors.
• Position and size. Bottom right is the convention. Move it to the left if it covers a cookie banner, a "back to top" button or a sticky cart.
• Greeting. Replace "How can we help?" with something specific to your business, such as "Questions about sizing or delivery? Ask here."
• Language. If you serve more than one language, let the widget follow the visitor's browser language.

ChatDeck's widget renders inside a Shadow DOM, which means your site's CSS can't break it and its styles can't leak into your pages — a common headache with older widgets.

Step 4: Decide who answers and when

This is where most live chat launches go wrong. A widget that nobody answers is worse than no widget. Decide:

1. Who the operators are. Invite everyone who will reply. Tools that don't charge per seat make it painless to add a part-timer or a founder as backup.
2. Where they'll get notified. A browser tab that's closed doesn't ring. Install the desktop or mobile app so new chats produce a notification.
3. Your working hours. Set them in the chat settings, so visitors outside those hours are told when someone will be back instead of waiting.
4. Whether an AI assistant answers first. An assistant can handle common questions instantly and hand the chat to a person when it can't help. If you go this way, start with a short, factual instruction and test it before launch.

For more on running chat day to day, see our live chat best practices.

Step 5: Test it like a visitor

Don't test only in the browser where you're logged into the admin. Run through this checklist:

1. Open your site in a private window and confirm the launcher appears.
2. Send a message and check that it arrives in the operator inbox, with a notification.
3. Reply from the inbox and confirm the reply shows up in the widget.
4. Repeat on a phone over mobile data, not just Wi-Fi.
5. Attach a file (an image or PDF) to make sure uploads work.
6. Visit two or three different page types — home, product, checkout or contact — to confirm the chat loads everywhere it should.
7. Close the tab, reopen the site and check that the conversation history is still there.

Common installation problems and quick fixes

• The widget doesn't appear at all. Check that the snippet saved and the site was republished. On builders, custom code often runs only on the live domain, not in preview.
• It appears for you but not for visitors. A caching or optimization plugin may be serving an old page. Clear the cache.
• It shows twice. The code was added in two places — for example, in the template and in Tag Manager. Remove one.
• It covers another element. Change the widget's corner or the other element's position.
• It disappeared after a domain change. Some builders, Wix among them, remove custom code when the domain changes. Add it again.

Platform-specific guides

If your site runs on a specific platform, follow its step-by-step instructions — menu names differ and change over time. ChatDeck keeps installation guides for 26 platforms, including Shopify, WordPress, Wix, Webflow, Squarespace, Drupal, Joomla and Google Tag Manager.

Frequently asked questions

Where should I put the live chat code, in the head or before the closing body tag?

Either works for a well-built async widget. Before </body> is the traditional choice because the page content is already parsed by then. Some builders only offer a site-wide <head> field, and that's fine too.

Will a chat widget slow down my website?

A widget loaded with async doesn't block the page from rendering, so the impact on what visitors see is small. Still, check your page speed before and after installing, and avoid running two chat tools at once.

Can I add live chat without editing code?

Yes. Site builders have a custom code field where you paste the snippet, WordPress has plugins, and Google Tag Manager lets you add the chat without changing the site itself.

Can I show the chat only on certain pages?

Yes, by loading the snippet only where you want it: add it to a specific page template, or use a Tag Manager trigger that matches certain URLs instead of "All Pages."

Do I need someone online 24/7 once chat is live?

No. Set working hours so visitors know when to expect a reply, let them leave a message, and consider an AI assistant to answer common questions around the clock.

Get started

You can create a free ChatDeck workspace and have the widget on your site in a few minutes: unlimited operators, no per-seat fees, and an optional AI assistant that runs on your own API key. Then pick your platform from the integration guides and follow the steps. The Install the chat on your site tutorial shows each step in the dashboard with screenshots.