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, launcher icon or team-photo launcher, bubble colors per direction, custom send-button icon.
  • 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 name, email, phone, or any custom field before the conversation begins.
  • Routing. Send conversations to a team 24/7, to an Agent Stack 24/7, to one team during opening hours and another destination after hours, or to a team in-hours with AI as the after-hours backup.
  • Manual channel switching. Let the visitor move the conversation to email, SMS, or WhatsApp mid-chat.
  • Dead connection detection. When the visitor’s connection drops, the widget can switch the conversation to an alternative channel so you don’t lose them.
  • 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 within a configurable window when they return in the same browser with the same session token, so they don’t have to repeat themselves.

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 the same script tag varies only by ID across sites.

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, you can:

  • Wait for them to come back. If they return in the same browser inside the resume window, they continue the same conversation. A fresh browser, even with the same email in pre-chat, starts a new conversation and does not show prior history.
  • Let dead-connection detection switch the conversation to email or SMS automatically.
  • Let the visitor manually switch the conversation to another channel from inside the widget.

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, not to inactivity. See Configure dead-connection detection.
  • 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