Chat Box for Website: How to Add One, Step by Step
To add a chat box to your website, sign up for a chat tool, copy its script tag, and paste it right before the closing </body> tag of your layout so it loads on every page. Then set the greeting, color and position, and send yourself a test message from a private window. This guide covers where the code goes on each stack, the settings worth changing and how to test it. The steps are the same for most hosted chat tools; we make one of them, Indiehacker Studio, and say so where it comes up.
What do you need before adding a chat box?
Three things:
- An account with a chat tool. Free options exist; we compare them in the best live chat software for small SaaS.
- Access to your site’s layout file. The one template every page shares.
- A place to answer. A browser tab, a phone app or email. If you cannot answer within a few hours, make sure the tool can collect an email and reply there.
Where do you paste the chat box code?
Every hosted chat tool gives you a small script. Paste it once in the shared layout, just before </body>, so it loads after your content.
| Stack | File | Where |
|---|---|---|
| Plain HTML | Every page, or your shared footer include | Before </body> |
| WordPress | Theme footer, or a header and footer plugin | Footer scripts |
| Next.js (App Router) | app/layout.tsx |
<Script> with strategy="afterInteractive" |
| Rails | app/views/layouts/application.html.erb |
Before </body> |
| Webflow, Framer | Site settings, custom code | Footer code |
| Shopify | theme.liquid |
Before </body> |
With Indiehacker Studio (our product, so take this example as ours) the tag looks like this, and it is the same for each site you add:
<script src="https://indiehacker.studio/s.js" defer></script>
The script finds your project from the site’s verified domain, so there is no key to paste. The longer walkthrough is in how to add live chat to a SaaS with one script.
Which settings matter on day one?
Most tools have many options. These five are worth setting before launch:
- Greeting. One honest line: who answers and how fast. “I’m the founder, I reply within a few hours.”
- Position and offset. Bottom right is the default, but move it if it covers your own “Next” or cookie button.
- Color and theme. Match your brand color; pick light, dark or follow the visitor’s system.
- Tabs. Do you want only chat, or also feedback and bug reports? Separate forms give better reports; see in-app feedback and bug reporting tools.
- Away behavior. Ask for an email when you are not around, and send late replies there.
How do you test the chat box before launch?
- Open your site in a private window, so you are a new visitor.
- Send a message with a real question.
- Check that it arrives in your inbox and that the email notification works.
- Reply, and watch the answer appear in the box.
- Close the window, reopen the site, and check the thread is still there.
- Load the site on your phone. The panel should fill the screen on small widths and close cleanly.
If messages do not arrive, check three causes. The script may not load on that page, a content security policy may block the chat domain, or, for tools that check origins, the domain may not be verified yet.
Will a chat box slow down my site?
It can. Some widgets load their whole app on every page view, even when nobody opens the chat. Look for a tool whose loader is small and loads the full panel only when the visitor clicks. Also check whether it sets cookies; a chat box that drops tracking cookies may force you to add a consent banner. More on that in what is cookieless tracking.
Free chat box or paid?
A free chat box is fine to start. The usual limits are branding in the widget, a cap on conversations, or paid add-ons for removing the logo. Tawk.to is free with paid add-ons; Olark is paid per agent. Pick by how you work: one person answering across several sites wants one inbox and a flat price, not seats.
FAQ
Can I add a chat box without coding?
Yes. Site builders like WordPress, Webflow and Shopify have a field for footer code; you paste the script there.
Can I show the chat box only on some pages?
Most tools can hide the launcher on certain pages, or you can include the script only in the layouts where you want it.
Does the chat box work on mobile?
Most do. Check that the panel opens full screen on a small phone and that the thread is still there when the visitor comes back.
What is the difference between a chat box and a chatbot?
A chat box connects the visitor to you. A chatbot answers on its own. Many small products do better with a human reply and an honest response time. See website chat for when chat is worth it.
Next step: add a chat box with one line
Indiehacker Studio gives you a chat box with live chat, feedback and bug reports, plus cookieless analytics, from one script tag on each site you add (1 site on Free, up to 50 on Pro). It has no mobile app and no AI bot yet. The Free plan covers one site and 50 conversations a month; Pro is a 14-day trial, then $12 a month. Start free or see pricing.