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 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
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.
<script
src="https://api.tedro.io/widget/v1/loader.js"
data-channel-id="YOUR_CHANNEL_ID"
async
></script>
Paste the script tag into the
<body> of your website HTML, just before the closing </body> tag. If you use a tag manager (Google Tag Manager, etc.), add it as a custom HTML tag.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. |
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:<script
src="https://api.tedro.io/widget/v1/loader.js"
data-channel-id="YOUR_CHANNEL_ID"
async
></script>
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
Inbox
Manage Live Chat conversations alongside your other channels in the unified inbox.
AI Agents
Set up an AI agent to handle Live Chat conversations automatically.