Install & enable

Prerequisites

• The analytics script is installed and visits show up in analytics. If it is not, finish Web analytics quickstart first.
• Your role on the project is Owner or Admin. Only those two roles can open Chat settings.
• The domain visitors use is in the project's allowed domains (including subdomains). Chat reuses the analytics list. See Project settings.

The snippet is the same one analytics already uses. Do not add a second script:

<script async src="https://app.tapcub.com/w.js" data-site="{{SITE_KEY}}"></script>

Steps

Turn live chat on

Open ConsoleLive chatChat settingsAppearance, turn on Enable live chat, and click Save. The status at the top of the page changes from Disabled to Enabled.

Adjust the look if you want

On the same page, set the brand name, primary color, and bubble position. An empty brand name uses the site name. Details are in Appearance.

Reload the site

Open or reload your site. After w.js sends the first pageview, the server tells the script that chat is on. The script then lazy-loads w-chat.js from the same directory, and the bubble appears in the corner. A tab that is already open needs one reload.

Send a test message

Open the bubble and send a message. Back in ConsoleLive chatInbox, it appears under Waiting. If auto-assignment is on and you are online, it goes straight to Mine. Reply once and confirm the visitor window receives it.

Standalone page and test page

ConsoleLive chatChat settingsInstall gives you three things:

• Snippet: the same snippet as analytics. After chat is on, pages that already have it load the bubble on the next visit.
• Standalone chat page: a URL like https://app.tapcub.com/c/SITE_KEY. Full-screen chat with no snippet on any site, for an email signature, a QR code, or a social profile.
• Test page: simulates a real visitor with this site key and walks through bubble, send, inbox, and reply. Add localhost to allowed domains first.

Inside the on-site bubble, visitors can also choose Open in a new window and continue the same conversation on the standalone page.

Override: the data-chat attribute

By default the console switch decides whether the bubble loads. Add a data-chat attribute on the script tag to override that:

<!-- Load the chat script without waiting for the server flag -->
<script async src="https://app.tapcub.com/w.js" data-site="{{SITE_KEY}}" data-chat="true"></script>

<!-- Do not load chat on this page -->
<script async src="https://app.tapcub.com/w.js" data-site="{{SITE_KEY}}" data-chat="false"></script>

• data-chat="false": this page never loads w-chat.js. Use it on a checkout page you do not want to interrupt, or to take chat offline for a while.
• data-chat="true": skip waiting for the first pageview response and load the chat script immediately. The script still reads the site config. If Enable live chat is off, the bubble still does not appear.

Turn chat off

• Whole site: on Appearance, turn off Enable live chat and save. The bubble hides on every page and new visitors cannot connect. Existing conversations and history stay in the inbox.
• One page: add data-chat="false" on that page's script tag.
• Phones only: turn on Hide bubble on mobile. See Appearance.

Verify

• A bubble sits in the corner of the site. When an agent is online, the bubble shows a green presence dot.
• The browser network panel shows w-chat.js loaded.
• The test message is in the inbox, and the reply arrives in the visitor window.

Common failures

What you see	What to do
No bubble, and w-chat.js never loads	Confirm the switch was saved and the page was reloaded. Check the script tag for data-chat="false". Confirm the analytics script itself is sending data
w-chat.js loads but there is no bubble, or the chat window says the origin is not allowed	Add the current domain to allowed domains. See Project settings. When the domain is not on the list, the launcher gets no config and the bubble does not appear
The bubble shows on desktop but not on a phone	Hide bubble on mobile is on. A window narrower than 640 pixels, or a mobile browser, counts as a phone
After the visitor sends a message, the window becomes a message form	This month's conversation quota is used up. See Billing & quotas
The site has a strict CSP	Allow the host of w-chat.js, the chat gateway connection, and the frame page inside the chat window. See CSP, blockers & networks

More checks are in Live chat troubleshooting.

Next steps

Once the look is set, configure office hours and the offline message in Hours & offline, then invite agents and turn on auto-assignment in Agents & routing. To control the chat widget from code, see Chat widget (w-chat.js).

Appearance

Only an Owner or Admin can save. On a site that already loads the analytics script, save and reload. You do not paste another snippet. Install steps are in Install & enable.

ConsoleLive chatChat settingsAppearance

How to configure

Setting	Page	What it does
Brand name, subtitle, primary color, brand logo	Appearance	Name and color of the bubble and the chat window. An empty brand name uses the site name. The logo should be square and at most 200 KB
Bubble position	Appearance	Bottom right or bottom left
Dark mode	Appearance	Follow the system, always light, or always dark
Hide bubble on mobile	Appearance	Hide the bubble when the window is narrower than 640 pixels, or the browser is a phone
Greetings	Greeting & translation	One line for Greeting (agents online) and one for Greeting (agents offline). Outside office hours the offline line is used
Bubble teaser	Greeting & translation	About 4 seconds after arrival, a card pops above the bubble once. Visitors who already have a conversation do not see it

The bubble is drawn by a same-origin script: after w.js learns that chat is on, it loads w-chat.js from the same directory. The Free plan keeps a clickable brand line at the bottom of the chat window. Pro and above can turn it off with Remove "Powered by" footer.

Interface language is not translation

Widget language only chooses Chinese or English for buttons and prompts. It does not rewrite the conversation. The rule is in Visitor languages. Message translation is in Two-way translation. The teaser card and proactive invites are separate. See Proactive messages.