AI Chatbot Widget
The AI Chatbot Widget lets you add intelligent, conversational AI assistance to your website—powered by advanced language models. Create custom AI assistants that understand your business and help visitors 24/7.
You Can Fully Customize:
Your AI assistant is powered by Claude and can be customized with your own knowledge base.
Creating an AI Chatbot Widget
To create an AI Chatbot widget:
- 1Go to All Widgets → AI Chatbot
- 2Click + Add Widget
- 3Go to My Widgets → AI Chatbot
- 4Click Configure
Screenshot: Dashboard Create Widget - AI Chatbot Selection
The chatbot editor opens with a live preview on the left and configuration panels on the right. Any change you make updates the preview instantly, so you can see exactly how your AI assistant will look and behave.
✨ AI-Powered Intelligence:
Your chatbot uses advanced AI to understand context, provide helpful responses, and learn from your master prompt.
Understanding the Chatbot Editor
The editor is divided into six main configuration tabs:
Header
Widget title and branding
Chat
Message bubble styling
Input
Message input configuration
Appearance
Widget size and design
AI
AI behavior and personality
Code
Embed snippet
1. Header Tab
Controls the top section of your chatbot widget.
Configurable Elements
Title
The name displayed at the top of the chat window
Example: "Your Assistant", "Support Bot", "Sales Assistant"
Subtitle
Descriptive text that appears below the title
Example: "Ask Me Something I Don't Know..."
Logo URL
Display your brand logo or an icon in the header
Supports PNG, JPG, SVG formats
AI Processing Message
Message shown while AI is thinking
Example: "Thinking...", "Processing your request..."
Font Color
Customize the text color in the header section
Background Color
Set the header background to match your brand
Font Family
Choose the typography for your header text
Example: Chatbot header with custom title, subtitle, and logo
2. Chat Tab
Customize how chat messages appear in the conversation.
Message Bubble Customization
User Bubble Color
Color for messages sent by the visitor
AI Bubble Color
Color for AI assistant responses
User Font Color
Text color for user messages
AI Font Color
Text color for AI responses
Bubble Radius
Control the roundness of message bubbles
Example: 18px for rounded, 4px for squared
Font Size
Adjust message text size for readability
Typically 14px-16px works well
Example: Chatbot Chat with custom bubble colors and Fonts
Floating Chat Bubble
The circular button that opens your chat widget
Bubble Size / Radius
Control the size of the floating chat button
💡 Design Tip:
Use contrasting colors for user and AI bubbles to make conversations easy to follow. Ensure text colors have sufficient contrast for readability.
3. Input Tab
Configure the message input area where visitors type.
Input Field Settings
Placeholder Text
The hint text shown in the empty input field
Example: "Type your message...", "Ask me anything..."
First AI Message
The initial greeting your AI sends when chat opens
This is the first thing visitors see and sets the tone for the conversation
Background Color
Input area background color
Border Color
Color of the input field border
Text Color
Color of text as user types
Font Size
Size of text in the input field
Typically 14px matches chat bubble text
Send Button Color
Color of the send/submit button
Example: Styled input field with custom colors
4. Appearance Tab
Control the overall widget dimensions and visual style.
Widget Dimensions
Width
Control how wide the chat window appears
Default: 400px (works well on most screens)
Height
Set the vertical size of the chat window
Default: 550px (fits most viewport heights)
Visual Styling
Background Color
Main chat area background color
Background Image URL
Add a custom background pattern or image
Optional: Leave empty for solid color background
Border Radius
Roundness of the entire chat window corners
Example: 16px for smooth rounded corners
Shadow
Add depth with a drop shadow effect
Creates elevation and visual separation from the page
Example: Chatbot Appearence with customization and Background Settings
Theme Presets
Quick-start with pre-designed themes:
Click any preset to instantly apply coordinated colors across all elements
5. AI Tab
Configure your AI assistant's knowledge and behavior.
Master Prompt
This is the most important configuration—it defines your AI's personality, knowledge, and capabilities.
The Master Prompt tells your AI:
- • Who it is and what it represents
- • What information it knows about your business
- • How it should respond to visitors
- • What tone and style to use
- • Any specific rules or limitations
Example Master Prompt:
Example: AI tab with custom master prompt and generate prompt CTA through site url
AI Prompt Generation
Provide Your Site URL
Let WidgetKraft automatically generate a prompt based on your website
The AI will scrape your website and create a customized master prompt automatically
💡 Master Prompt Tips:
- • Be specific about your business, products, or services
- • Include common questions and how to answer them
- • Define the tone (professional, friendly, casual, etc.)
- • Set boundaries (what the AI should NOT discuss)
- • Add your contact info, pricing, or other key details
6. Code (Embedding the Chatbot)
Once your chatbot is configured, get the embed code to add it to your website.
Embed Code Section
You'll see a ready-to-use embed snippet that includes your widget ID:
<div id="chatbot-root"></div>
<script src="https://unpkg.com/@getwidgets/chatbot-widget@latest/dist/chatbot-widget.umd.js"></script>
<script>
ChatbotWidget.init({
widgetId: "aaaaaaaa-7777-4545-bbbb-112233445566"
});
</script>How to Use the Embed Code
- 1Click Copy Code to copy the embed snippet
- 2Paste it into your website's HTML, typically before the closing
</body>tagThis ensures the chatbot loads on every page of your site
- 3The chatbot will appear as a floating button in the bottom-right corner
- 4Visitors can click it to start chatting with your AI assistant
Integration Notes
- No backend required: The widget is fully hosted and managed
- Instant updates: Changes in the editor apply immediately to live widgets
- Mobile responsive: Automatically adapts to all screen sizes
- Fast loading: Optimized for performance with minimal page impact
Saving & Publishing
- • Click Save at the top to store your configuration
- • All changes apply instantly to your live chatbot
- • No need to update the embed code when making changes
- • Your widget ID remains the same across updates
What Happens During Conversations
When a visitor chats with your AI assistant:
AI Processing
Messages are sent to Claude AI for intelligent, context-aware responses
Master Prompt Usage
Your custom master prompt guides every AI response
Conversation History
Chat logs are stored in your WidgetKraft dashboard for review
Credit Consumption
Credits are consumed per AI message generated
Best Practices for AI Chatbots
Write a Comprehensive Master Prompt
The more detail you provide about your business, the better your AI can assist visitors. Include product details, pricing, FAQs, and contact information.
Test Your Chatbot Thoroughly
Ask various questions in the preview to ensure the AI responds accurately and helpfully. Refine your master prompt based on test conversations.
Set Clear Boundaries
Tell the AI what topics it should avoid or redirect. This prevents off-topic conversations and keeps interactions professional.
Use Your Brand Voice
Define the tone and personality in your master prompt (friendly, professional, casual) to match your brand identity.
Match Visual Design to Your Site
Use colors and styling that complement your website's design for a seamless, professional appearance.
Monitor Conversations
Regularly review chat logs in your dashboard to identify common questions and improve your master prompt accordingly.
Summary
The AI Chatbot Widget allows you to: