> ## Documentation Index > Fetch the complete documentation index at: https://docs.tedro.io/llms.txt > Use this file to discover all available pages before exploring further. # Live Chat Setup > Add a live chat widget to your website and manage conversations through Tedro. # Live Chat Setup Add a live chat widget to your website to let visitors start conversations directly from your pages. Unlike WhatsApp, Instagram, and Messenger, Live Chat does not require OAuth or a third-party account -- create a channel and embed a script tag on your site. Live Chat has no messaging window restrictions. You can send messages to visitors at any time, as long as they have an active session on your website. ## Prerequisites Before setting up Live Chat, make sure you have: * A Tedro workspace with **Admin** role * A website where you can add a script tag (access to HTML or a tag manager) ## Create a Live Chat Channel ### Open Channel Settings Navigate to **Settings > Channels** in your Tedro workspace. ### Create the Channel Click **Connect Channel** and select **Live Chat**. Enter a name for the channel (for example, "Website Chat" or your company name) and click **Create**. Unlike other channels, Live Chat does not require any OAuth authorization. The channel is ready immediately after creation. ### Copy the Embed Snippet After creation, the channel detail page displays an embed code. Copy the script tag: ```html theme={null} ``` Replace `YOUR_CHANNEL_ID` with the actual channel ID shown on the detail page. ### Add to Your Website Paste the script tag into the `` of your website HTML, just before the closing `` tag. If you use a tag manager (Google Tag Manager, etc.), add it as a custom HTML tag. ### Verify the Widget Visit your website and confirm the chat widget appears in the corner of the page. Click it to open the chat window and send a test message. The message should appear in your Tedro inbox. ## Customize the Widget After connecting, open the channel detail page (**Settings > Channels > \[Your Live Chat Channel]**) to configure the widget appearance and behavior. ### Branding | Setting | Description | | --------------------- | -------------------------------------------------------------------------------------------- | | **Primary color** | The accent color for the widget button and header. Use the color picker to match your brand. | | **Company name** | Displayed in the widget header. | | **Welcome message** | The greeting shown when a visitor opens the widget for the first time. | | **Input placeholder** | Placeholder text in the message input field (for example, "Type a message..."). | | **Position** | Where the widget appears on the page: bottom-right (default) or bottom-left. | ### Pre-Chat Form Enable the pre-chat form to collect visitor information before the conversation starts: | Setting | Description | | ------------------------ | -------------------------------------------------------------------------- | | **Enable pre-chat form** | When enabled, visitors fill out a form before sending their first message. | | **Name required** | Require the visitor to enter their name. | | **Email required** | Require the visitor to enter their email address. | Collecting an email address lets you follow up with visitors even after they leave your website. ## Channel Capabilities | Feature | Support | | ----------------------- | ------------------ | | Text messages | Yes | | Media (images, video) | Yes | | Buttons / quick replies | Yes | | Rich formatting | Yes | | Message character limit | 10,000 characters | | Messaging window | None (always open) | ## Advanced Widget Integration ### Single-Page Applications (SPA) If your website is a single-page application (React, Vue, Angular, etc.), the widget loader script handles route changes automatically. Add the script tag once in your main HTML file -- it persists across client-side navigation. ### Google Tag Manager To add the widget via Google Tag Manager: ### Create a Custom HTML Tag In GTM, create a new **Custom HTML** tag and paste the embed snippet: ```html theme={null} ``` ### Set the Trigger Set the trigger to **All Pages** so the widget loads on every page of your site. ### Publish Publish your GTM container. The widget appears on your site after the container updates. ### Widget Data Attributes Customize the widget behavior using data attributes on the script tag: | Attribute | Type | Default | Description | | ----------------- | ------ | --------------- | ------------------------------------------------------- | | `data-channel-id` | string | (required) | Your Live Chat channel ID from the channel detail page | | `data-position` | string | `bottom-right` | Widget position: `bottom-right` or `bottom-left` | | `data-color` | string | (from settings) | Override the primary color (hex value, e.g., `#6210CD`) | | `data-welcome` | string | (from settings) | Override the welcome message | | `data-company` | string | (from settings) | Override the company name shown in the header | Data attribute overrides take precedence over settings configured in the Tedro dashboard. Use them for per-page customization -- for example, showing a different welcome message on your pricing page vs your support page. ## What's Next Manage Live Chat conversations alongside your other channels in the unified inbox. Set up an AI agent to handle Live Chat conversations automatically.