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.

Agent configuration prompt

This prompt defines tone, style, and boundaries for the assistant. For example:

  • Avoid asking the user to summarize what’s already clear.
  • Keep the tone sweet, exploratory, and curious.
  • Maintain a polite and professional voice.
  • Skip overstructured formatting like headings or numbered lists unless necessary.

This makes the AI feel less robotic and more like a brand ambassador.

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.

​
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.