Channelsbeginner

The Web Chat widget

Web Chat is the embeddable chat widget you place on your website. Each widget has its own settings — branding, routing, channel switching, languages — and you can run multiple widgets per tenant.

5 min read

The Web Chat widget

Web Chat is the embeddable chat widget you place on your website. A visitor clicks the launcher in the corner, types a message, and the conversation appears in Atender’s inbox like any other channel.

What you get

  • One embed snippet per widget. Paste a single <script> tag into your site and the widget renders on every page. No build step, no framework integration.
  • Full visual customization. Brand colors, dark mode with separate palettes, bubble colors per direction, custom send-button icon, and three launcher styles: a launcher icon, rotating team member photos, or the routed Agent Stack’s avatar.
  • Multi-language widget UI. Set a primary language and add as many secondary languages as you need. The welcome message, button labels, and system text can all be localized.
  • Pre-chat survey. Ask for a name, an email address, a phone number, short text, long text, or a dropdown choice before the conversation begins — plus informational blocks that just show copy. Each answer can be mapped onto a contact or conversation field, built-in or custom.
  • Routing. Send conversations to a team 24/7, to an Agent Stack 24/7, to one team during opening hours and another team after hours, or to a team in-hours with an Agent Stack as the after-hours backup.
  • Manual channel switching. Let the visitor ask, mid-chat, to continue by email or SMS.
  • Dead connection detection. When the visitor’s chat window stops checking in, Atender sends them a confirmation link — by email or SMS — so the conversation can carry on somewhere they can read it.
  • Opening hours support. Use opening hours to control where conversations go and what visitors see outside business hours, including after-hours routing or a different outside-hours message.
  • Conversation resumption. A returning visitor’s earlier conversation reappears when they come back in the same browser with the same session token, silently if the last message is inside the resume window (60 minutes by default) and behind a Welcome back! choice screen if it is older.

Nothing leaves Web Chat on the visitor’s say-so alone. Every move to email or SMS — the manual switch, the dead-connection sweep, the outside-hours handoff, and an Agent Stack’s offer to follow up by email — parks the switch and sends a confirmation link to the address itself. The conversation stays in Web Chat until the visitor opens that link and presses the confirm button. There is no setting to skip the step, the link is good for 24 hours, and only the most recent link on a conversation is live.

One widget or many

You can run multiple widgets per tenant. The most common reasons to use more than one:

  • Different brands sharing one Atender tenant, each with its own colors and team.
  • A pre-sales widget on marketing pages routing to a sales Agent Stack, and a separate support widget on the help center routing to the support team.
  • A widget for English-speaking customers routed to one team, another in a different language routed to a different team.

Each widget has its own data-widget-id in the embed snippet, so a second widget is the same script tag with a different ID. The snippet can carry optional extras on top — a pinned market and language, and the signed-identity attributes that hand the visitor over already signed in — but the ID is what selects the widget.

Where Web Chat fits

A Web Chat conversation is a regular conversation in Atender. It carries the same lifecycle (Active, Snoozed, Done, Archived), it can be assigned, tagged, merged, and resolved like any other channel.

If you start a conversation in Web Chat and the visitor leaves or collapses the panel, you can:

  • Wait for them to come back. If they return in the same browser inside the resume window, they continue the same conversation. Past the window they are shown a Welcome back! screen and choose between Continue previous chat and Start a new chat — all three strings are yours to rewrite. A fresh browser, even with the same email in pre-chat, starts a new conversation and does not show prior history.
  • Let Atender deliver the agent reply by email when every open tab for the same chat session has the panel collapsed and the conversation has a visitor email. In that case, Atender treats the visitor as unavailable for live webchat replies. If the visitor still has the panel open in any tab, replies stay in webchat.
  • Let dead-connection detection send the visitor a confirmation link by email or SMS. The conversation stays in Web Chat until they open it.
  • Let the visitor ask, from inside the widget, to continue by email or SMS — which also waits for the confirmation link.

What is NOT in Web Chat

A few things tenants familiar with other live-chat tools sometimes expect that Atender’s Web Chat does not do:

  • No idle-based automatic switching. “If the visitor is inactive for X minutes, switch them to email” is not shipped. The widget reacts to a dropped connection — no heartbeat for at least five minutes — not to inactivity. See Configure dead-connection detection.
  • No automatic switching at all, in fact. A dropped connection gets the visitor a confirmation link, never a move. The conversation only changes channel when they open it.
  • No switching to WhatsApp. Email and SMS are the only destinations offered, because they are the only channels a confirmation link can be sent on. A WhatsApp switch is refused.
  • No visitor screen-sharing or co-browsing.
  • No outbound chat from the widget side. Web Chat starts when the visitor opens it; agents can’t initiate a chat to a specific visitor.

Where to start

  1. Create a Web Chat widget in Settings → Web Chat.
  2. Customize the appearance so it matches your site.
  3. Install the widget by pasting the embed snippet on your site.
  4. (Optional) Add a pre-chat survey if you want context before the conversation begins.

See also

Tags

Getting StartedConcept