Add live chat to a website

Adding live chat to a website can take minutes. Delivering a useful live-chat service takes longer: the team must answer at the promised time, know what to do with unresolved cases and protect customer context. A widget placed on every page before those decisions are made often produces missed chats, duplicate support messages and a false impression of instant service.

This workflow starts with a small, reversible launch. It applies whether the site uses Shopify, WordPress, a site builder or custom code. Exact menus differ by vendor and change over time, so follow the provider's current installation instructions for the tool you choose. The principles—one embed, truthful hours, safe handoff and end-to-end testing—remain useful.

1. Decide what chat should solve

Review recent contact reasons and site pages. A complex product page may benefit from timely buying advice. An account page may need authenticated help. An order-tracking page might need a better self-service answer rather than a person repeating tracking information. Choose one or two page groups where a real conversation can remove friction.

Write three success cases and three cases chat should not handle. For example: sizing advice answered during staffed hours; a delivery-policy question routed to approved content; a refund request converted to an owned ticket. Do not set “increase the number of chats” as the main goal. More conversations can mean the site has made self-service harder.

Choose a pilot period with enough demand to learn but low enough risk to fix mistakes. Avoid launching a new widget across checkout on the morning of a major promotion. The first version should be easy to turn off if it interferes with navigation or overwhelms the team.

2. Choose the operating model and product

LiveChat is a dedicated staffed-chat choice. Tidio offers a low-volume free customer-service allowance and optional AI; its human and AI quotas are separate. HelpDesk combines website chat with a focused ticket queue. Zendesk Suite is a broader route when the website conversation must join an established multichannel service operation. Compare the plan that includes the needed features, not a provider's cheapest email-only or one-user price.

Decide whether visitors expect a live person, an automated answer, or asynchronous messaging. Label the experience honestly. If an AI assistant is deployed, define its permitted topics and handoff. If human chat is offered, name who covers it, how many concurrent conversations each agent can take, and who steps in when the first person is unavailable.

The right tool should preserve a conversation when it cannot be completed in the session. Trial an offline message, an email follow-up and a customer who returns from a different device. If those become disconnected records, plan the ownership workflow before going live.

3. Install the widget once

Use the provider's official app or plugin for the website platform where possible. LiveChat documents plugin and code routes for common CMS and ecommerce systems. Tidio likewise offers a platform plugin or JavaScript method. Zendesk's messaging Web Widget can be embedded through its current administration flow. Follow the exact provider article for the chosen product and plan.

Keep a record of where the embed was added: platform app, theme setting, tag manager or source template. Installing through two routes can render two widgets or send duplicate events. Tidio specifically notes this for its Shopify and WordPress setup. On Shopify, installing Tidio's app is not the whole job; its guide also requires enabling the app embed in the theme and checking it after a theme change.

Do not paste snippets from a random tutorial or expose account secrets in public code. Use the provider's current account-specific installation method. If a developer or agency manages the site, send them the official instructions and a named test plan rather than only a copied script.

4. Set appearance, accessibility and page rules

Check the widget on a narrow mobile screen. It must not obscure checkout controls, cookie choices, navigation or important form buttons. Test portrait and landscape, a long page, the on-screen keyboard, browser zoom and keyboard-only navigation. Confirm that focus can enter and leave the widget and that controls have understandable names. A small bubble that looks harmless on desktop can consume much of a phone viewport.

Use restrained prompts. Show a product-advice invitation on relevant pages, but suppress it when a visitor is already in a conversation or actively completing payment. Set a frequency cap and avoid pop-ups that repeatedly interrupt someone reading a policy. Use plain UK English and say whether the answer comes from a person or an automated assistant.

Give the widget a consistent route across pages. If it is hidden on some pages, make sure the contact page still offers a clear alternative. Customers should not need to guess why chat vanishes at the point they have a problem.

5. Define availability and offline follow-up

Write the hours in the customer-facing interface and match them to a real rota. Decide what happens when agents are online but at capacity. An unavailable agent should not appear as a live option. If the business cannot staff chat reliably, use an asynchronous message state with a clear expected reply time or postpone the launch.

Every unresolved conversation needs an owner, due time and route to a ticket. Capture the visitor's question and enough contact information to reply, but do not ask for unnecessary personal data. Send a confirmation that accurately states the next step. An automatic acknowledgement should not be treated as a human first response in reporting.

Test a message sent one minute before the shift ends, a message after hours and a customer who closes the page. These cases expose gaps faster than an ideal conversation with an available agent.

6. Review privacy and data handling

Inspect the vendor's data-processing terms, what the widget stores or accesses on the device, transcript retention, analytics and any third-party integrations. Update the site's privacy and cookie information as appropriate. The UK's ICO guidance on cookies and similar technologies is the primary reference for assessing storage or access technologies; do not assume every chat widget has identical consent behaviour.

Decide who can read transcripts, how long they remain available and how the team handles a customer who shares a card number or sensitive information in chat. Build a simple escalation rule for those messages. This is operational guidance, not legal advice; seek specialist review if the use case or data is sensitive.

7. Test and launch in stages

Create five scripted journeys: a successful live question, a missed chat, an after-hours message, a handoff to ticket and a returning customer. Test on mobile and desktop with a non-admin account. Verify notifications, routing, transcript visibility, customer confirmation and removal of the widget if the pilot is paused.

For the first two weeks, review missed chats daily. Track useful conversations, actual resolutions, tickets created, repeat contact and customer feedback. Compare these with the previous contact route. If the tool increases demand but not resolution, improve page content, staffing or targeting before expanding it.

Only then broaden coverage to more pages or hours. A disciplined rollout makes chat an accountable support channel rather than a decorative website feature. The installation is complete when customers can start, continue and finish a case with a truthful expectation—not when the blue bubble first appears.

Sources

• LiveChat installation options
• LiveChat manager setup guidance
• Tidio website installation
• Tidio Shopify activation
• Zendesk messaging widget installation
• ICO guidance on cookies and similar technologies

All product facts come from provider sources. Operational conclusions are Support Sorted's editorial judgement.