Chatbot

AI Chatbot component that embeds a chatbot on any page. It can appear as a floating widget (corner bubble) or be placed inline within page content.

Use Cases

• Customer support chat on any page
• Live help on form pages
• FAQ assistant on landing pages
• Sales chatbot on product pages
• Support widget across all pages

Properties

chatbotId

🚨 MUST be a real embed code from qodiak.createChatbot()! Call createChatbot() first and use chatbot.embedCode here. NEVER use placeholder strings! Type: string.

displayMode

'floating' shows a chat bubble in the corner. 'inline' embeds the chat directly in the page content. Type: string. Options: floating, inline. Default: floating

position

Position of the floating widget. Only applies when displayMode is 'floating'. Type: string. Options: bottom-right, bottom-left. Default: bottom-right

primaryColorOverride

Hex color to override the chatbot’s default primary color. Match your site theme. Type: string.

showOnMobile

Whether to show the chatbot on mobile devices. Type: boolean. Default: true

autoOpen

Automatically open the chat widget when the page loads. Use sparingly to avoid annoying users. Type: boolean. Default: false

showBrandingOverride

Override whether to show 'Powered by Qodiak' branding. Type: boolean.

height

Height of the inline chat panel. Only applies when displayMode is 'inline'. Type: string. Default: 500px

borderRadius

Border radius of the inline chat panel. Only applies when displayMode is 'inline'. Type: string. Default: 12px

Best Practices

• 🚨 ALWAYS call qodiak.createChatbot() FIRST to get a valid embedCode
• NEVER use placeholder values like 'embed-code-here' or 'YOUR_CHATBOT_EMBED_CODE'
• Use 'floating' mode for unobtrusive support across the site
• Use 'inline' mode when the chat is a primary feature of the page
• Match primaryColorOverride to the site’s theme for visual consistency
• Only add one floating chatbot per page to avoid conflicts
• Set autoOpen: false to avoid interrupting users immediately

Common Mistakes

Using placeholder chatbotId like 'YOUR_CHATBOT_EMBED_CODE' or 'embed-code-here'

Why it's a problem: Placeholder strings don’t work - the chatbot won’t load or function at all

Fix: Call qodiak.createChatbot() FIRST, then use chatbot.embedCode as the chatbotId prop

Adding Chatbot component without creating a chatbot first

Why it's a problem: The Chatbot component requires a valid embedCode from an existing chatbot in the database

Fix: Always call qodiak.createChatbot({ name: 'Support', welcomeMessage: '...', systemPrompt: '...' }) BEFORE inserting the Chatbot component

Creating fake 'Chat Now' or 'Live Chat' buttons instead of using the Chatbot component

Why it's a problem: Buttons labeled 'Chat Now' that don’t connect to a real chatbot are non-functional and mislead users. The Chatbot component provides real AI-powered chat.

Fix: Use qodiak.createChatbot() + page.Chatbot({ displayMode: 'floating' }) instead of creating decorative chat buttons.