> ## Documentation Index > Fetch the complete documentation index at: https://docs.thena.ai/llms.txt > Use this file to discover all available pages before exploring further. # Web chat > AI-native support experience embedded into any website or web app 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. ## 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 `` tag 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.
 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.

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

HMAC Authentication for User Identity

For enhanced security, you can use HMAC (Hash-based Message Authentication Code) to verify user identities. This prevents unauthorized users from impersonating others in your chat widget.

Step 1: Generate the HMAC hash on your server

You need to hash the pair of email:username with your HMAC secret. Here's a sample implementation:

```typescript theme={null} const generateHmac = (email: string, name: string): string => { const hmacSecret = <>; const message = `${email}:${name}`; return crypto .createHmac("sha256", hmacSecret) .update(message) .digest("hex"); }; ```

Step 2: Include the hash in your widget configuration

This hash is then sent in the SDK initialization code as shown below:

```html theme={null} ``` The HMAC hash must be generated server-side using the format `email:username` and your secret key. Never expose your HMAC secret in client-side code.

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.

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 Delivers immediate responses based on your own documentation and content. Reflects your brand visually and conversationally with customizable appearance and tone. Knows when to escalate to a human agent and does so with full context preserved. Blends automation and empathy—users get help quickly, and your team focuses on conversations that matter.