How to Use the Chatbot Widget

What is How to Use the Chatbot Widget?

A chatbot widget that integrates into websites with minimal effort, requiring an API endpoint, API key, and session ID for configuration. It provides extensive theme customization, suggested questions with configurable length limits, and multiple built-in icons.

How to use How to Use the Chatbot Widget?

Include the widget script bundle and call window.initChatbotWidget() with required parameters (apiUrl, apiKey, sessionId). Optionally set a custom container via containerSelector or integrate with React using useEffect.

Key features of How to Use the Chatbot Widget

• Simple script‑tag integration with two bundle options.
• Required parameters: API URL, API key, session ID.
• Extensive theme customization with built‑in themes.
• Configurable suggested questions with display and query length limits.
• Multiple built‑in icons (e.g., heart, message‑square, bot).
• Custom container placement instead of default bottom‑right.
• Scoped CSS to prevent styling conflicts.
• Default font: Mona Sans.

Use cases of How to Use the Chatbot Widget

• Embedding an AI assistant in a company website.
• Adding a support chatbot with suggested questions for common queries.
• Integrating a themed chat widget into a React or TypeScript application.

FAQ from How to Use the Chatbot Widget

Why isn’t the widget appearing?

Check browser console for errors, verify the API URL and key are correct, ensure all required scripts are loaded, and confirm the container element exists.

How do session IDs work?

You must provide a unique sessionId for each user conversation and maintain it throughout the visit. UUIDs or timestamp‑based generation are recommended.

Can I customize the widget’s appearance?

Yes – the theme object supports colors for headers, messages, inputs, buttons, and text. Built‑in themes (Modern, Minimal, Corporate, Dark, etc.) are also available.

What icons are available?

Built‑in icons include heart, message‑square, message‑circle, message‑dots, help‑circle, info, bot, and sparkles.

How are suggested question lengths controlled?

maxSuggestedQuestionLength (default 50) truncates button display text with “…”. maxSuggestedQuestionQueryLength (default 200) truncates the query sent to the API.