Chat Widget

The Intufind chat widget adds an AI-powered assistant to your website. It can answer questions about your products, content, and help customers find what they're looking for.

Quick Start

Add the chat widget to any page with a single script tag:

<script 
  src="https://cdn.intufind.com/chat-loader.js" 
  data-publishable-key="if_pk_your_key_here"
></script>

Replace if_pk_your_key_here with your publishable key from the Intufind Dashboard.

Installation Methods

Script Tag (Recommended)

The simplest method — add a single script tag before </body>:

<script 
  src="https://cdn.intufind.com/chat-loader.js" 
  data-publishable-key="if_pk_xxx"
  data-trigger-position="bottom-right"
></script>

Configuration Object

For more options, use a configuration object:

<script>
  window.intufindConfig = {
    publishableKey: 'if_pk_xxx',
    title: 'Ask me anything',
    subtitle: 'AI-powered assistant',
    triggerPosition: 'bottom-right',
    greeting: 'Hi! How can I help you today?',
  };
</script>
<script src="https://cdn.intufind.com/chat-loader.js"></script>

Programmatic Initialization

Control when the widget loads:

<script src="https://cdn.intufind.com/chat-loader.js" data-manual></script>
<script>
  // Initialize when ready
  window.IntufindChatbot.init({
    publishableKey: 'if_pk_xxx',
    // ... other options
  });
</script>

Embed Modes

Floating Mode (Default)

A floating button that opens a chat overlay:

window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  embedMode: 'floating',
  triggerPosition: 'bottom-right', // or 'bottom-left', 'top-right', 'top-left'
};

Inline Mode

Embed the chat directly in a container:

<div id="chat-container" style="height: 600px;"></div>

<script>
  window.intufindConfig = {
    publishableKey: 'if_pk_xxx',
    embedMode: 'inline',
    containerSelector: '#chat-container',
  };
</script>
<script src="https://cdn.intufind.com/chat-loader.js"></script>

Configuration Options

API Settings

Header & Branding

Trigger Button (Floating Mode)

Greeting & Prompts

Example with prompts:

window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  greeting: 'Welcome! What can I help you find?',
  initialPrompts: [
    { prompt: 'Show me running shoes' },
    { prompt: 'What are your shipping options?' },
    { prompt: 'Do you have sales?' },
  ],
  promptStyle: 'inline',
};

Card Display

Post Card Options

Message Display

Live Agent Handoff

Voice Input

Analytics & Privacy

JavaScript API

The widget exposes a global API at window.IntufindChatbot:

Control Methods

// Open the chat widget
window.IntufindChatbot.open();

// Close the chat widget
window.IntufindChatbot.close();

// Toggle open/closed
window.IntufindChatbot.toggle();

// Check if open
const isOpen = window.IntufindChatbot.isOpen();

Configuration Methods

// Get current configuration
const config = window.IntufindChatbot.getConfig();

// Update configuration
window.IntufindChatbot.configure({
  title: 'New Title',
  greeting: 'Updated greeting!',
});

// Get full state
const state = window.IntufindChatbot.getState();
// Returns: { isOpen: boolean, config: ChatbotConfig }

Theme Methods

// Update theme
window.IntufindChatbot.setTheme({
  primaryColor: '#6101fe',
  widgetBackground: '#ffffff',
});

// Set custom CSS
window.IntufindChatbot.setCustomCSS(`
  .itf-chat-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
`);

Analytics Consent (GDPR)

// Grant analytics consent
window.IntufindChatbot.grantAnalyticsConsent();

// Revoke analytics consent
window.IntufindChatbot.revokeAnalyticsConsent();

// Get consent status
const status = window.IntufindChatbot.getAnalyticsConsentStatus();
// Returns: 'granted' | 'denied' | 'pending'

Cleanup

// Remove widget from page
window.IntufindChatbot.destroy();

Authenticated Features

To enable features like order lookup, pass a user JWT:

window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  userJwt: 'eyJhbGciOiJIUzI1NiIs...', // Server-generated JWT
};

The JWT should be generated on your server and contain the user's identity. See Order Support for details.

Custom Styling

See the Widget Styling guide for comprehensive theming options.

Quick example:

window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  theme: {
    primaryColor: '#6101fe',
    widgetBackground: '#1a1a1a',
    userBubbleBackground: '#6101fe',
    assistantBubbleBackground: '#2d2d2d',
    fontFamily: '"Inter", sans-serif',
  },
};

Mobile Behavior

The chat widget is fully responsive:

• Desktop: Floating widget with configurable size (320px-100vw width)
• Mobile (≤480px): Full-screen overlay for better usability
• Touch-friendly: Optimized tap targets and gestures
• Safe areas: Respects notches and home indicators

Browser Support

Accessibility

The widget follows WCAG 2.1 AA guidelines:

• Full keyboard navigation (Tab, Enter, Escape)
• ARIA labels and roles for screen readers
• Focus management and visible focus indicators
• Semantic HTML structure
• Sufficient color contrast

Troubleshooting

Widget not appearing

1. Verify your publishable key is correct
2. Check browser console for errors
3. Ensure the script is loaded (check Network tab)
4. Verify no CSP issues are blocking the iframe

Widget appears but doesn't respond

1. Check your API connection in the Dashboard
2. Verify content is synced (at least 1 product/post)
3. Check for JavaScript errors in console

Styling conflicts

1. Use the customCSS option for overrides
2. Widget CSS uses .itf- prefix to avoid conflicts
3. Check for overly broad CSS selectors in your theme

Next Steps

• Search Widget — Add AI-powered search
• Widget Styling — Customize colors, fonts, and layout
• Framework Integration — React, Vue, and Next.js guides