Widget Builder

The AI Widget Builder in CrawlDesk allows you to create customizable, embeddable AI chat widgets for your websites or apps. These widgets provide instant AI-powered assistance by leveraging your project's indexed data sources, enabling users to "Ask me anything" about your documentation. The builder offers a visual interface to configure appearance, behavior, and content, with previews across devices (Desktop, Tablet, Mobile) and seamless embedding options for various platforms.

This guide covers configuring the widget's general settings, appearance, behavior, and questions, as well as embedding the generated script. Access the AI Widget Builder from your project dashboard at https://app.crawldesk.com/dashboard/ by selecting a project and navigating to the "AI Widget" section. Ensure your project has active data sources for the widget to function effectively.

Key Benefits of the AI Widget Builder:

• Customization: Tailor the look and feel to match your brand with themes, colors, and logos.
• Responsiveness: Preview and optimize for desktop, tablet, and mobile devices.
• Interactivity: Add features like clear/stop buttons, like/dislike feedback, and suggested questions.
• Easy Embedding: Generate ready-to-use code for JavaScript, React, WordPress, and more.

Prerequisites:

• Active CrawlDesk account with a configured project and data sources.
• Browser access to the project dashboard.
• Basic knowledge of embedding scripts (for integration).

---

Customization

General Settings

Configure the basic information and footer for your AI widget to set its identity and disclaimers.

1. Access the Configuration Panel
   In the AI Widget Builder, click the ⚙️ General tab in the sidebar.

2. Set Basic Information
   Fill in the following fields:

   • Widget Title: Enter the main heading (e.g., "Ask me anything").
   • Subtitle: Add a helpful tagline (e.g., "I’m here to help you out").
   • Assistant Name: Name your AI assistant (e.g., "ChatBuddy").
   • Brand Name: Specify your company or site name (e.g., "Your Brand").
   • Brand Logo URL: Provide a logo image URL (e.g., https://example.com/logo.png).

3. Configure Footer Settings

   • Powered By Text: Set attribution (e.g., "Powered by AI").
   • Disclaimer Text: Add legal notes (e.g., "AI responses may vary").

4. Save Changes
   Click Save Configuration at the bottom. The preview canvas (e.g., 1200px width) will update, and note the "Last saved: Just now" timestamp.

Tips:

• Use a high-resolution logo for crisp display across devices.
• Keep disclaimers concise to avoid cluttering the footer.

Appearance Settings

Customize the visual style of your widget, including themes and colors, for a branded experience.

1. Access the Configuration Panel
   Click the 🎨 Appearance tab in the sidebar.

2. Select Theme Mode

   • Theme: Choose from available options (e.g., Light).
   • Opacity: Adjust transparency (e.g., 100%).

3. Adjust Layout & Styling

   • Border Radius: Set rounded corners (e.g., 8px).
   • Input Background: Pick a color for the input field (e.g., #ffffff).
   • Button Background: Choose primary button color (e.g., #2563eb).

4. Preview Across Devices
   Use the device toggles (Desktop, Tablet, Mobile) to test responsiveness in the preview canvas.

5. Save Changes
   Click Save Configuration. The widget updates in real-time.

Tips:

• Test on Mobile for touch-friendly interactions.
• Ensure high contrast for accessibility (e.g., dark text on light backgrounds).

Behavior Settings

Define interactive features like buttons and question displays to enhance user engagement.

1. Access the Configuration Panel
   Click the ⚡ Behavior tab in the sidebar.

2. Enable Chat Features

   • Enable Clear Chat: Toggle on/off; set Clear Button Text Color (e.g., #6b7280) and Background (e.g., #f3f4f6).
   • Enable Stop Chat: Toggle on/off; set Stop Button Text Color (e.g., #dc2626) and Background (e.g., #fee2e2).
   • Transparent Button Background: Toggle for subtle styling.
   • Show Like/Dislike: Enable feedback buttons for responses.

3. Configure Question Display

   • View Type: Select layout (e.g., Grid).

4. Save Changes
   Click Save Configuration and preview interactions.

Tips:

• Enable "Stop Chat" for long-running queries to improve UX.
• Use like/dislike to gather data for AI improvements.

Suggested Questions

Add and manage example questions to guide users when they first open the widget.

1. Access the Configuration Panel
   Click the 💬 Questions tab in the sidebar.

2. Manage Example Questions

   • Current count (e.g., 3/8).
   • Pre-populated examples:
     • "How can I get started with your platform?"
     • "What features do you offer?"
     • "Can I integrate this with my website?"
   • Click Add Question to include more.
   • Drag questions to reorder them.

3. Save Changes
   Click Save Configuration. Users will see these as suggestions on chat open.

Tips:

• Limit to 5-8 questions to avoid overwhelming users.
• Tailor questions to common user queries from your data sources.

Embedding the Widget

Generate and integrate the widget code into your site using the provided scripts.

1. Access the Embed Section
   Click Embed in the builder sidebar.

2. Choose Integration Method
   Select from: Documentation, JavaScript, HTML, React, Next.js, Docusaurus, WordPress, iFrame.
   For JavaScript (default):

   <!-- AI Widget Embed -->
   <script
     src="https://cdn.crawldesk.com/widget.iife.js"
     onload="initAIWidget({
       key: 'wk_live_7717c0ab26f3ca46fec3db8701246600afcedeedc1d162cf',
       position: 'bottom-right',
       theme: 'white'
     })"
   ></script>

3. Copy to Clipboard Click Copy to copy the script to your clipboard. Test on Your Site Paste the code into your HTML (e.g., before </body>). Preview at https://yourwebsite.com. Need Help? Refer to the in-builder documentation or contact support.

4. Test on Your Site Paste the code into your HTML (e.g., before </body>). Preview at https://yourwebsite.com.

tip

Replace the key with your project's actual Widget Key key from the dashboard.