Web Chat The Web Chat widget is an AI-native support experience that can be embedded into any website or web app. It empowers users to engage instantly with an AI agent who can respond using your uploaded documentation, and if needed, gracefully hand off to a human agent by creating a support ticket.

Key benefits

  • Instant AI-powered responses using your own documentation
  • Seamless handoff to human agents when needed
  • Fully customizable appearance to match your brand
  • Easy deployment with a simple JavaScript snippet

​
Setup guide

Follow these simple steps to enable Web chat for your organization:
  1. Go to Organization > Click Sources
  2. Enable Web chat > Select team
  3. Once you are in Team settings > Configure how you want Web chat to look like
  4. Once that is done, just Copy the script and deploy it in your End of <body> tag
1

Customize the widget's appearance

You can configure how the widget looks to match your brand’s identity and design guidelines.

Logo

Add your company’s logo using a public URL. Supported formats include SVG, PNG, JPG, JPEG, and WebP. This logo appears at the top of the chat interface for a fully branded experience.

Theme color

Set a start and end hex color to define your theme gradient. You can use a solid color (by leaving the end color empty) or a gradient with a custom direction (e.g., 135deg).

Position on screen

Choose where the chat widget appears. The default is bottom right, but other positions are available depending on your site layout.

Widget type

Select between Thena’s default widget or link the chat experience to a custom launcher on your site.

Behavior toggles

  • Use custom launcher button: Replace the default launcher with your own UI element.
  • Initial dark mode: Automatically open the widget in dark mode.
  • Auto-close on outside click: Automatically close the chat when users click outside the widget.
2

Control behavior with a custom prompt

You can shape how the AI agent interacts by configuring its prompt under the “Agent configuration prompt” section. This allows you to:

  • Define the tone and style of communication: Ensure the AI’s personality aligns with your brand voice.

  • Set boundaries: Control what the AI can and cannot discuss to keep conversations on-topic.

  • Guide responses: Instruct the AI on how to handle specific types of queries for consistent support.

The prompt acts as instructions for your AI agent, making it feel less robotic and more like a genuine brand ambassador for your company.

3

Deploy the widget

Allowed domains

You must specify allowed domains to secure your deployment. These should include the full URL (http or https) for each site where the widget will be embedded.

Installation code

Once you’ve configured the widget, you’ll get a JavaScript snippet to add to your website. This code includes:

  • Your unique widget ID
  • Color configuration and UI behavior (e.g., gradient direction, dark mode)
  • Optionally, HMAC-based verification for secure identity handling

Security considerations

The HMAC secret key is shown only once and must never be exposed in client-side code. Store it securely on your server and use it to generate valid hashes.

4

Experience the live chat flow

Chat Widget

Once the widget is deployed, your users can interact with it directly from your website.

AI-native interactions

The AI agent responds using your uploaded documentation and custom prompt. Whether it’s FAQs, onboarding steps, or advanced product guidance, your AI agent becomes a 24/7 frontline support companion.

Human agent handoff

When needed, the AI can initiate a handoff by creating a support ticket. Once a ticket is created:

  • The conversation is logged.
  • A human agent can take over the chat seamlessly from within the same widget.
  • The user experiences no disruption in their conversation.

As seen in the example with James, the AI agent gathered initial input, created a ticket, and handed it off to Jackson, a real human agent.

Image attachments

The Web chat widget supports image attachments, allowing users to share visuals for clearer communication. Supported formats include PNG, JPEG/JPG, GIF (non-animated), WebP, and BMP (partial support).

We’ll be expanding support for additional file types in future updates.

Unread message notifications

The widget helps users stay updated with unread message notifications. A badge on the floating widget shows the number of conversations with new replies.

Inside the widget, a red dot highlights the specific chats that have new messages.

​
A well-rounded AI-native chat experience

Instant answers

Delivers immediate responses based on your own documentation and content.

Brand reflection

Reflects your brand visually and conversationally with customizable appearance and tone.

Smart escalation

Knows when to escalate to a human agent and does so with full context preserved.

Seamless experience

Blends automation and empathy—users get help quickly, and your team focuses on conversations that matter.