Skip to main content

Chat Widgets TeamBusinessEnterprise

Chat Widgets allow you to embed Chat Aid on your website, providing AI-powered answers to your visitors and customers using your company's knowledge base.

What Are Chat Widgets?​

Chat Widgets are embeddable chat interfaces powered by Chat Aid that you can add to your website. They provide instant, AI-generated answers to visitor questions using your trained data sources.

Perfect for:

  • Customer support on your website
  • Product documentation help
  • Knowledge base search
  • Lead generation and qualification
  • Reducing support ticket volume

Key Features​

🎨 Fully Customizable​

  • Appearance - Colors, fonts, position, size
  • Messages - Welcome message, placeholder text
  • Branding - Add your logo, customize theme
  • Position - Bottom-right, bottom-left, top-right, top-left

🔍 Intelligent Search​

  • AI Answers - Optionally use AI to generate answers
  • Training Search - Search your trained data sources
  • Source Citations - Link to source documents
  • Fallback Options - Handle questions outside your knowledge base

⚙️ Customizable​

  • Team-Specific Data - Choose which teams' data to search
  • Remove Branding - Remove "Powered by Chat Aid" branding (Enterprise plans)
  • Conversation History - Admins can review the questions and answers from widgets

How Widgets Work​

User Flow​

  1. Visitor arrives on your website
  2. Widget appears in the corner (or wherever you position it)
  3. Visitor clicks the widget launcher
  4. Chat opens with your welcome message
  5. Visitor asks a question
  6. Chat Aid searches your trained data sources
  7. Answer generated with source citations
  8. Visitor can ask follow-up questions

Technical Flow​

  1. Widget script loads on your page
  2. Widget connects to Chat Aid API
  3. User messages are sent to Chat Aid
  4. Chat Aid performs semantic search across selected data sources
  5. AI generates answer from retrieved documents
  6. Response streams back to widget
  7. Sources are displayed for verification

Creating Your First Widget​

Prerequisites​

  • Widgets feature enabled in your plan (check plans)
  • At least one connected data source
  • Website where you can add JavaScript

Step-by-Step​

1. Create Widget​

  1. Go to Chat Widgets in the dashboard
  2. Click Create Widget
  3. Enter a name for your widget (internal use only)

2. Configure Appearance​

Theme:

  • Choose Light, Dark, or Custom theme
  • Customize colors:
    • Bot message colors
    • User message colors
    • Input field colors
    • Chat background
    • Brand color
    • Widget launcher color

Size & Position:

  • Set width (default: 360px)
  • Set height (default: 600px)
  • Choose position: bottom-right, bottom-left, top-right, top-left

Preview:

  • See real-time preview as you customize
  • Test the chat interface
  • Verify colors and positioning

Choose how the widget finds answers:

Training Search (Recommended):

  • ✅ Search your connected data sources
  • ✅ Accurate, company-specific answers
  • ✅ Source citations included
  • ❌ Only answers from your data

AI Fallback:

  • ✅ Can answer questions outside your data
  • ✅ Uses general ChatGPT knowledge
  • ⚠️ May provide inaccurate information
  • ⚠️ No source citations for AI answers

Best Practice: Enable Training Search only. This ensures answers are accurate and based on your data.

4. Select Wikis (Data Sources)​

In the Wikis tab, choose which teams' data sources this widget should search:

  1. Click Select data source (or Add wiki if you've already selected some)
  2. A modal appears showing all available teams/wikis
  3. Select one or more teams to include
  4. Click Confirm

What you'll see:

  • Company Wiki - Your default team with company-wide data sources (everyone has this)
  • Additional Teams - Department-specific teams like Engineering, Sales, HR (if Teams feature is enabled)

Each team shows how many data sources it contains.

Plan-based visibility:

  • Without Teams feature: Only see "Company Wiki" (one option)
  • With Teams feature: See "Company Wiki" + all your department teams (multiple options)
Data Privacy Warning

If you don't have access to the Teams feature, you can only select "Company Wiki", which means chat widgets will make ALL your company-wide data sources publicly accessible on your website.

Without Teams, you cannot separate internal data from public widget data. Ensure all connected data sources contain only information safe for public viewing.

Learn more: Teams Feature →

5. Configure Behavior​

Welcome Message:

Hi there! 👋 How can I help you today?

This appears when the chat opens.

Bot Placeholder:

Ask me anything about our products...

This appears in the input field.

Persona (Optional):

  • Select a persona from the dropdown
  • Choose from built-in personas (Default, Straightforward, Powerful, Casual, Jane Austen)
  • Or select any custom personas you've created
  • This overrides the organization-wide persona setting

6. Set Allowed Origins​

For security, restrict which domains can use your widget:

Recommended:

https://yourwebsite.com
https://www.yourwebsite.com
https://docs.yourwebsite.com

Development/Testing:

http://localhost:3000
https://staging.yourwebsite.com
warning

Leaving allowed origins empty means anyone can embed your widget. Always specify your domains for production.

7. Install on Your Website​

Copy the installation code:

<script>
  (function(w,d,s,c){
    w.ChatAidWidget=c;
    var js,fjs=d.getElementsByTagName(s)[0];
    if(d.getElementById(c))return;
    js=d.createElement(s);js.id=c;
    js.src='https://cdn.chataid.com/widget.js';
    js.setAttribute('data-widget-id','YOUR_WIDGET_ID');
    fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','chataid-widget');
</script>

Add this before the closing </body> tag on any page where you want the widget.

Follow the installation steps below:

Customization Options​

Appearance​

Themes:

  • Light - Clean, bright interface
  • Dark - Modern, dark interface
  • Custom - Full control over all colors

Customizable Elements:

  • Bot message text and background
  • User message text and background
  • Input field background, text, and border
  • Chat background
  • Send icon color
  • Brand color (for accents)
  • Widget launcher background

Size:

  • Width: 300px - 500px (recommended: 360px)
  • Height: 400px - 700px (recommended: 600px)
  • Responsive on mobile (auto-adjusts)

Position:

  • Bottom-right (most common)
  • Bottom-left
  • Top-right
  • Top-left

Behavior​

Search Mode:

  • Training only (recommended)
  • AI fallback enabled
  • AI only (not recommended)

Conversation:

  • Welcome message
  • Bot placeholder text
  • Persona/tone

Sources:

  • Which teams' data to search
  • Source citation formatting
  • Link behavior (new tab, same tab)

Branding​

Remove Branding (Premium):

  • Remove "Powered by Chat Aid"
  • Full brand customization
  • Custom domain (coming soon)

Logo:

  • Add your company logo
  • Appears in widget header
  • Supports PNG, SVG, JPG

Managing Widgets​

Viewing Widgets​

Go to Chat Widgets to see all your widgets:

  • Widget name
  • Last updated
  • Interactions count
  • Status (active, paused)

Editing Widgets​

To modify a widget:

  1. Click on the widget in the list
  2. Make your changes
  3. Click Save Changes
  4. Changes take effect immediately (no need to reinstall)

Duplicating Widgets​

To create a similar widget:

  1. Click the three dots menu (⋯) on a widget
  2. Select Duplicate
  3. Modify the new widget as needed

This is useful for creating department-specific versions.

Pausing Widgets​

To temporarily disable a widget:

  1. Click on the widget
  2. Toggle Status to Paused
  3. Widget will stop responding (but remain on your site)

Deleting Widgets​

To permanently remove a widget:

  1. Click the three dots menu (⋯)
  2. Select Delete
  3. Confirm deletion
  4. Remove the widget code from your website
warning

Deleting a widget is permanent and cannot be undone.

Widget Analytics​

Viewing Analytics​

  1. Go to Chat Widgets
  2. Click on a widget
  3. View the Analytics tab

Available Metrics​

Usage:

  • Total conversations
  • Questions asked
  • Daily/weekly trends
  • Peak usage times

Content:

  • Most asked questions
  • Popular topics
  • Search queries
  • Source citations

Quality:

  • Answer found rate
  • User feedback (if collected)
  • Average conversation length
  • Bounce rate

Performance:

  • Response time
  • Uptime
  • Error rate

Using Analytics to Improve​

High "Answer Not Found" Rate:

  • Add more data sources
  • Improve documentation coverage
  • Enable AI fallback (with caution)

Common Questions:

  • Create dedicated help articles
  • Update existing documentation
  • Add to FAQ

Low Engagement:

  • Improve welcome message
  • Adjust widget position
  • Make widget more prominent

Use Cases​

Customer Support​

Setup:

  • Connect: Zendesk, help docs, FAQs
  • Theme: Match your brand
  • Sources: Support team data + company data sources
  • Position: Bottom-right

Result:

  • Reduce support ticket volume
  • Instant answers 24/7
  • Consistent support quality
  • Source citations build trust

Product Documentation​

Setup:

  • Connect: API docs, technical guides
  • Theme: Developer-friendly
  • Sources: Engineering team data
  • Position: Right side of docs

Result:

  • Users find answers faster
  • Reduced time-to-value
  • Better developer experience
  • Less support burden

Sales & Lead Generation​

Setup:

  • Connect: Product info, pricing, case studies
  • Theme: Professional
  • Sources: Sales team data
  • Add: Lead capture form

Result:

  • Answer prospect questions
  • Qualify leads automatically
  • Capture contact information
  • Reduce sales cycle

Internal Knowledge Base​

Setup:

  • Connect: All internal docs
  • Theme: Company branding
  • Sources: All teams
  • Restrict: Internal domains only

Result:

  • Employees find info faster
  • Reduce internal questions
  • Improve onboarding
  • Preserve institutional knowledge

Best Practices​

1. Start with Relevant Data​

Only connect data sources relevant to website visitors:

  • ✅ Help documentation
  • ✅ Product information
  • ✅ FAQs and common questions
  • ❌ Internal processes
  • ❌ Confidential data
  • ❌ Employee-only information
Teams Feature Required for Data Separation

Without the Teams feature, all your company-wide data sources will be accessible through your widget. If you have internal or confidential data:

  • Option 1: Upgrade to a plan with Teams to separate public vs. internal data
  • Option 2: Only connect data sources that are safe for public access
  • Option 3: Don't use widgets until you can separate your data

Never connect sensitive internal data sources if you're using widgets without Teams.

2. Write a Welcoming Message​

Make visitors feel welcome:

  • ❌ "Ask a question"
  • ✅ "Hi! I'm here to help. What can I answer for you?"

Include:

  • Friendly greeting
  • What the bot can help with
  • Invitation to ask

3. Match Your Branding​

Customize to match your site:

  • Use your brand colors
  • Add your logo
  • Match your tone/voice
  • Consistent with site design

4. Position Strategically​

Consider where users need help most:

  • Product pages - Bottom-right
  • Documentation - Right sidebar
  • Pricing - Bottom-right
  • Homepage - Bottom-right or left

5. Monitor and Iterate​

Regularly check analytics:

  • What are visitors asking?
  • Which answers are helpful?
  • Where are gaps in coverage?
  • How can you improve?

6. Keep Data Fresh​

Update data sources regularly:

  • Refresh integrations daily
  • Update docs when products change
  • Archive outdated content
  • Add new FAQs based on questions

7. Set Expectations​

Be clear about limitations:

  • "I can help with product questions"
  • "For account-specific issues, please contact our support team"
  • "I search our documentation to answer"

8. Provide Fallback​

Always offer a way to escalate:

  • "Still need help? Contact our support team"
  • Link to contact form
  • Offer to create a ticket
  • Provide email address

Remove Chat Aid Branding Enterprise​

Enterprise tier customers can remove Chat Aid branding from their widgets for a fully custom branded experience.

What Does This Feature Do?​

Removing Chat Aid branding removes the "Powered by Chat Aid" text and logo from the bottom of your chat widget, allowing you to present the widget as your own branded solution.

Benefits:

  • 🏷️ Complete brand control
  • 🎨 Seamless integration with your site
  • 💼 Professional appearance
  • 🔒 No third-party branding visible to customers

How It Works​

When branding removal is enabled for your widget:

  • The "Powered by Chat Aid" footer is completely removed
  • Widget appears as your own branded tool
  • All functionality remains the same
  • Users see only your branding and colors

Enabling This Feature​

Branding removal is controlled at the organization level and must be enabled by the Chat Aid team.

Considerations​

Legal & Compliance:

  • You remain responsible for informing users the widget uses AI
  • Must comply with AI disclosure requirements in your jurisdiction
  • Include appropriate disclaimers if required by law

Support:

  • Users won't see Chat Aid branding for support inquiries
  • Ensure your own support information is easily accessible
  • Consider adding a "Help" or "About" link in your widget

Troubleshooting​

Widget Not Appearing​

Solutions:

  • Check the script is before </body>
  • Verify widget ID is correct
  • Check allowed origins include your domain
  • Look for JavaScript errors in console

Widget Shows Error​

Solutions:

  • Verify your plan includes widgets
  • Check data sources are trained
  • Ensure widget isn't paused
  • Check for API status issues

Answers Not Relevant​

Solutions:

  • Add more relevant data sources
  • Remove unrelated data sources
  • Train on better documentation
  • Use team-specific data

Slow Response Times​

Solutions:

  • Check your internet connection
  • Verify Chat Aid service status
  • Reduce number of data sources searched
  • Contact support@chataid.com if persistent
Data Separation

We strongly recommend Business or Enterprise plans if you have any internal data. Team plans will expose ALL company data sources publicly (no Teams feature to separate data). Business and Enterprise plans use the Teams feature to separate internal data from public widget data.

Learn more: Plans and Pricing

Ready to create a widget?

Need Help?

Our support team is here to help you get the most out of Chat Aid.