Chatbot
Customization
All attributes supported by the <lite-talk> element.
Overview
The lite-talk custom element accepts attributes to configure theme, placement, copy and behavior. All attributes are optional except chatbotid.
Attribute names are lowercase in HTML (e.g. theme, chatbotid).
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
chatbotid | - | required | Your chatbot identifier. |
theme |
| LIGHT | Overall color scheme. |
color | Any valid hex color | #3b82f6 | Primary accent / button color. |
orientation |
| RIGHT | Launcher side of the screen. |
headline | - | Chat with our AI | Header title inside the widget. |
description | - | Ask any question and our AI will answer | Header subtitle inside the widget. |
initialmessage | - | Hello! How can I help you today? | Tooltip prompt shown before first click. |
textinputplaceholder | - | Type your message... | Placeholder for the input. |
newchatbuttontext | - | New Chat | Label for the "new chat" action. |
faqbuttontext | - | FAQs | Label for toggling FAQs. |
backtochatbuttontext | - | Back to Chat | Label to return from FAQs to chat. |
Example
<script
async
type="text/javascript"
src="https://litetalk.ai/embed/chat.js"
></script>
<lite-talk
chatbotid="YOUR_CHATBOT_ID"
theme="light"
color="#3b82f6"
orientation="right"
headline="Chat with our AI"
description="Ask any question and our AI will answer"
initialmessage="Hello! How can I help you today?"
textinputplaceholder="Type your message..."
newchatbuttontext="New Chat"
faqbuttontext="FAQs"
backtochatbuttontext="Back to Chat"
></lite-talk>