[Intum Help](https://intum.com/help.md) / [WebChat](https://intum.com/help/webchat.md)

# [Support Chat Widget](https://intum.com/help/webchat/support-chat-widget.md)

## Chat Widget on Your Website

Support Chat Widget is a JavaScript component embedded on your website. It displays a chat window through which customers can message your team in real time.

## How to Embed the Widget

1. Create a widget in the [WebChat](webchat) module (`/webchat/admin`)
2. Copy the embed code from the widget settings
3. Paste it on your page before the closing `</body>` tag

## Features

- **Real-time chat** — messages delivered instantly via WebSocket
- **Attachments** — customers can send files (if enabled)
- **Conversation history** — customers see previous messages when they return to the page
- **Sound notifications** — alerts for new messages
- **Contact form** — optionally require name and email before starting a conversation

## Customization

- **Name** — displayed in the chat header
- **Title** — text in the chat window
- **Description** — additional text below the title
- **Color** — widget color matched to your brand
- **Placeholder** — placeholder text in the message field
- **Position** — widget orientation on the page
- **Avatar** — operator photo or logo
- **Custom CSS** — ability to add custom styles
- **Language** — the widget supports multiple languages

## Business Hours

The widget supports a business hours schedule — you can set hours for each day of the week. Outside business hours:

- The widget can be hidden or display an offline message
- Optionally, you can allow sending messages outside business hours
- Configurable offline message content and welcome message

## Requiring Customer Data

You can require customers to provide their name and email address before starting a conversation — this makes it easier to identify the customer and follow up later.

## Automatic Assignment

When an operator responds to a conversation, the system can automatically assign it to them. This option can be enabled in the widget settings.

## Attention Grabber

You can add a visual attention-grabbing element (e.g., animation) displayed next to the chat icon — it encourages customers to start a conversation.