Widget Customization

The Intufind chat widget is highly customizable to match your brand and user experience requirements. This guide covers all configuration options available.

Widget Position

Control where the widget appears on your site using the widgetPosition option:

Position	Description
bottom-right	Bottom right corner (default)
bottom-left	Bottom left corner
top-right	Top right corner
top-left	Top left corner

Resizable Widget

Enable users to resize the chat window:

IntufindChatbot.configure({
  enableResize: true
});

When enabled, users can drag the corner of the chat window to resize it. The widget respects minimum and maximum dimensions defined in the theme.

Header Configuration

Customize the chat header to match your brand:

Customize the header with your avatar, title, and subtitle

Option	Description	Default
title	Main header title	"AI Assistant"
subtitle	Subtext below title	"Here to help"
avatar	URL to avatar image	Default icon
headerAvatarShowBackground	Show background behind avatar	true
headerAvatarShowBorder	Show border around avatar	true

IntufindChatbot.configure({
  title: "Shop Assistant",
  subtitle: "Powered by AI",
  avatar: "/path/to/avatar.png",
  headerAvatarShowBackground: true,
  headerAvatarShowBorder: true
});

Trigger Button

The floating button that opens the chat can be fully customized:

Customize the trigger button appearance

Option	Description	Default
triggerAvatar	Custom image for trigger button	Chat icon
triggerShowBackground	Show background circle	true
triggerIconShowBorder	Show border around icon	true

IntufindChatbot.configure({
  triggerAvatar: "/path/to/icon.png",
  triggerShowBackground: true,
  triggerIconShowBorder: false
});

Greeting & Empty State

Configure what visitors see when they first open the chat:

Option	Description	Example
greeting	Main greeting text	"How can I help you today?"
greetingSubtext	Secondary text	"Ask me anything about our products"
greetingIcon	Custom icon for empty state	URL or null for default

IntufindChatbot.configure({
  greeting: "Welcome! How can I assist you?",
  greetingSubtext: "I can help you find products, answer questions, and more.",
  greetingIcon: "/path/to/greeting-icon.png"
});

Message Display

Control how messages are displayed in the chat:

Message Actions

Option	Description	Default
showMessageActions	Show feedback buttons	false
showUserCopyButton	Show copy button on user messages	false
showMessageTimestamps	Show message timestamps	false

Loading Indicators

Option	Description	Values
loadingIndicator	Style of loading animation	'progress' or 'dots'
typingDelay	Delay before showing response (ms)	400

• progress: Shows text updates like "Thinking...", "Searching products..."
• dots: Shows bouncing dots animation

IntufindChatbot.configure({
  showMessageActions: true,
  showMessageTimestamps: true,
  loadingIndicator: 'progress',
  typingDelay: 300
});

Content Cards

When the AI finds products or posts, they're displayed as cards. Configure card display:

Card Layout

Option	Values	Description
cardLayout	'carousel'	Horizontal scrollable cards (default)
	'grid'	Grid layout for cards

Post Card Options

Option	Description	Default
showPostAuthor	Show author name	true
showPostDate	Show publication date	true
showPostCategory	Show category	true

IntufindChatbot.configure({
  cardLayout: 'carousel',
  showPostAuthor: true,
  showPostDate: true,
  showPostCategory: false
});

Live Agent Handoff

Configure human handoff behavior:

Option	Description	Default
liveAgentEnabled	Enable live agent feature	false
liveAgentManualHandoff	Show "Talk to Human" button	false
liveAgentAutoHandoff	AI can suggest handoff	false
liveAgentBusinessHours	Business hours text	—
liveAgentInactivityTimeout	Timeout in seconds	—

IntufindChatbot.configure({
  liveAgentEnabled: true,
  liveAgentManualHandoff: true,
  liveAgentAutoHandoff: true,
  liveAgentBusinessHours: "Mon-Fri, 9am-5pm EST",
  liveAgentInactivityTimeout: 300 // 5 minutes
});

JavaScript API

The widget exposes a global API for programmatic control:

Widget Control

// Open the chat
IntufindChatbot.open();

// Close the chat
IntufindChatbot.close();

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

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

// Send a message
IntufindChatbot.sendMessage("Hello!");

// Start new conversation
IntufindChatbot.startNewConversation();

// Get all messages
const messages = IntufindChatbot.getMessages();

Configuration

// Update configuration
IntufindChatbot.configure({
  title: "New Title",
  showMessageActions: true
});

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

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

Event Handling

// Listen for events
IntufindChatbot.on('message', (message) => {
  console.log('New message:', message);
});

IntufindChatbot.on('open', () => {
  console.log('Chat opened');
});

IntufindChatbot.on('close', () => {
  console.log('Chat closed');
});

// Remove listener
IntufindChatbot.off('message', callback);

Theme Control

// Set custom theme
IntufindChatbot.setTheme({
  colors: {
    primaryColor: '#FF6B6B'
  }
});

// Apply preset
IntufindChatbot.applyPreset('dark');

// Set custom CSS
IntufindChatbot.setCustomCSS(`
  .intufind-widget { border-radius: 24px; }
`);

Debug Mode

Enable debug mode for development:

IntufindChatbot.configure({
  debugMode: true
});

Debug mode logs:

• API requests and responses
• Configuration changes
• Event emissions
• Errors with stack traces

Platform Integration

WordPress

Configuration is managed through Intufind → Chat → Appearance in the WordPress admin.

Shopify

Configuration is managed through Apps → Intufind → Settings → Styling in Shopify admin.

Custom Integration

Use the JavaScript configuration:

<script>
window.intufindConfig = {
  publishableKey: 'if_pk_your_key_here',
  title: 'AI Assistant',
  widgetPosition: 'bottom-right',
  // ... other options
};
</script>
<script src="https://cdn.intufind.com/widget/v2/loader.js" async></script>

Or use data attributes for simpler setup:

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

See the Next.js Integration Guide for React-specific patterns.

Next Steps

• Chat Prompts — Configure suggested prompts
• Widget Styling — Advanced CSS customization
• Dashboard Overview — Monitor widget performance