Skip to main content
Tabs Configuration Interface Transform your basic chat widget into a sophisticated, multi-tab interface that provides users with an intuitive navigation experience. The Tabs Configuration feature elevates user engagement by organizing functionality into distinct, accessible sections.

​
Why Use Tabs?

Enhanced UX

Create an intuitive, app-like experience that guides users naturally through your services

Better Organization

Separate different functionalities into logical sections for easier navigation

Higher Engagement

Users spend more time exploring features when they’re presented in an organized tab structure

Professional Look

Transform your widget from basic chat to a sophisticated customer portal

​
Quick Start

1

Access Tabs Configuration

Navigate to your agent dashboard and click on Tabs in the left sidebar
2

Enable Tab Interface

Toggle the “Enable Tabs” switch to activate the multi-tab experience
3

Customize Your Tabs

Use the drag-and-drop interface to reorder tabs and configure their content
4

Preview & Test

Test your configuration in the widget preview to ensure optimal user experience
Pro tip: Enable tabs early in your setup process - it’s much easier to design your content with tabs in mind from the start!

​
Tab Types Overview

The welcome center of your widget - your users’ first impression and primary navigation hub.

  • Dynamic Greetings: Use variables like {user.name} for personalization
  • Brand Messaging: Craft compelling descriptions that reflect your value proposition
  • Visual Hierarchy: Control header height and spacing for optimal impact
  • Ask a Question: Direct pathway to your AI agent
  • Continue Conversation: Quick access to recent chat history
  • Live Call: Voice interaction capability (requires voice setup)
  • Human Handoff: Seamless escalation to human support
Configure conversation starters that appear when users hover over buttons:
  • “Track my order status”
  • “Product recommendations”
  • “Technical support”
  • “Billing questions”

​
Configuration Walkthrough

1

Access Drag Interface

In your Tabs Configuration panel, you’ll see all available tabs listed vertically
2

Drag to Reorder

Click and hold any tab card, then drag it to your preferred position
3

Auto-Save Changes

Release to lock in the new order - changes save automatically
The first tab in your list becomes the default landing tab for new users
Header Title: "Welcome back, {user.name}! 👋"
Description: "How can we help you today?"
Height: 120px (recommended)
Dynamic Variables Available:
  • {user.name} - User’s display name
  • {user.email} - User’s email address
  • {user.company} - Company name (if available)
1

Enable Custom FAQ

Toggle on to use your own Q&A content instead of defaults
2

Add Questions

Use the rich text editor to create comprehensive answers
3

Organize Categories

Group related questions for better user navigation
4

Enable Search

Allow users to search through your FAQ database

​
Best Practices & Optimization

Design Excellence

Visual Hierarchy
  • Use contrasting colors for CTAs
  • Implement consistent spacing
  • Choose readable font sizes
Brand Consistency
  • Match your website’s color scheme
  • Use your brand’s tone of voice
  • Include brand-specific terminology

User Psychology

Cognitive Load
  • Limit tabs to 3-4 maximum
  • Use familiar terminology
  • Provide clear visual cues
Engagement Tactics
  • Personalize greetings
  • Use action-oriented language
  • Create urgency when appropriate

Performance Metrics

Key Indicators
  • Time spent per tab
  • Button click rates
  • FAQ search queries
Optimization
  • A/B test button labels
  • Monitor drop-off points
  • Refine based on analytics

​
Advanced Features

// Available variables in your tab content
{user.name}          // "John Doe"
{user.email}         // "[email protected]"
{user.company}       // "Acme Corp"
{user.lastVisit}     // "2 days ago"
{user.location}      // "New York, NY"
Variables automatically populate from user data when available, gracefully falling back to generic text when not.
  • Time-based: Show different content based on business hours
  • User tier: Display premium features for paid users
  • Geographic: Adapt content based on user location
  • Behavioral: Customize based on previous interactions

​
Troubleshooting Guide

1

Verify Enable Status

Check that the “Enable Tabs” toggle is switched on in your configuration
2

Check Widget Integration

Ensure your widget code is the latest version and properly embedded
3

Clear Cache

Force refresh your browser cache (Ctrl+F5 or Cmd+Shift+R)
4

Test in Incognito

Open your widget in an incognito/private browsing window
Quick Diagnostic Checklist:
  • ✅ Button visibility enabled in settings
  • ✅ Required features (voice, handoff) properly configured
  • ✅ Custom URLs are accessible and valid
  • ✅ No JavaScript errors in browser console
If voice calling buttons don’t work, ensure your voice configuration is complete and enabled.
  • Enable “Custom FAQ” toggle if using your own content
  • Verify questions and answers are properly saved
  • Check for special characters that might break formatting
Pro Tip: Most configuration changes take effect immediately, but some cached content may require up to 5 minutes to update globally. For immediate testing, use incognito mode or clear your browser cache.

​
What’s Next?

Theme Customization

Customize colors, fonts, and styling to match your brand perfectly

Widget Configuration

Advanced widget settings and behavioral customizations

Analytics Setup

Track user engagement and optimize your tab performance

Voice Integration

Add voice capabilities to enhance your tab interactions