Chatbot

Installation

Add the LiteTalk web component and customize its behavior.

In the head section

Add the script tag to load the chatbot component:

<script async type="text/javascript" src="https://litetalk.ai/embed/chat.js"></script>

In the body section

Place the custom element anywhere in your HTML body where you want the chatbot to appear:

<lite-talk chatbotid="YOUR_CHATBOT_ID"></lite-talk>

Customize appearance and behavior

Theming and position

<lite-talk
  chatbotid="YOUR_CHATBOT_ID"
  theme="dark"
  color="#10b981"
  orientation="left"
></lite-talk>

theme: light or dark
color: primary hex color for buttons and accents
orientation: left or right launcher position

Text customization

<lite-talk
  chatbotid="YOUR_CHATBOT_ID"
  headline="Chat with us"
  description="Ask anything about our products"
  initialmessage="Hi! How can I help?"
  textinputplaceholder="Type here..."
  newchatbuttontext="Start over"
  faqbuttontext="FAQs"
  backtochatbuttontext="Back"
></lite-talk>

Settings

Configure your chatbot's appearance, behavior, and access settings.

Customization

All attributes supported by the <lite-talk> element.

On this page

In the head section In the body section Customize appearance and behavior Theming and position Text customization