Echo Widget

Echo Widget is OutCaller's embeddable AI-powered chat agent that brings intelligent customer engagement directly to your website. Create a seamless chat experience powered by advanced AI models without requiring custom development.

Overview

The Echo Widget is a lightweight, customizable chat interface that can be embedded on any website. It enables your visitors to have real-time conversations with your AI agent, capture leads, request documents, and receive personalized support—all without leaving your site.

Key Features

Real-time AI Chat

• AI-powered conversational engine
• Natural language conversations with context awareness
• Personalized responses based on organization information
• Multi-turn conversation support
• Typing indicators and real-time message delivery

Lead Capture

• Conversational lead capture triggered by keywords or interaction duration
• Multi-step form (name, email, phone) embedded within the chat
• Optional fields for flexible lead collection
• Conversation context saved with lead information
• Pre-fill known information to avoid duplicate collection

Document & Brochure Management

• Search and display documents by keywords
• One-click download functionality
• Organize documents with descriptions
• Track document requests
• Support for multiple file types

Customization

• Theme Support: Light and dark modes
• Branding: Custom colors, logos, and agent names
• Styling: Configurable chat bubble colors, header gradients, border radius
• Positioning: Choose widget placement (bottom-left, bottom-right, custom)
• Messages: Customize welcome messages, suggestions, and placeholders

Session Management

• Persistent conversation history using browser local storage
• Visitor identification across sessions
• Session continuity for returning visitors
• Automatic session cleanup after 90 days

Feedback & Analytics

• User feedback collection (thumbs up/down)
• Conversation quality tracking
• Widget interaction analytics
• Message count and session duration metrics

Setup Guide

Step 1: Access Widget Configuration

1. Log in to your OutCaller dashboard
2. Find the Echo Widget configuration section

Step 2: Configure Widget Settings

Configure the following options:

Basic Settings

• Organization ID: Your unique organization identifier (auto-filled)
• Widget Name: Display name for your chat agent
• Welcome Message: Initial greeting shown to users
• Input Placeholder: Text shown in the message input field
• Suggestions: Quick reply suggestions shown to new users (up to 5)

AI Model Selection

Configure your preferred AI conversation engine based on your organization's needs.

Appearance

Customize the widget's look and feel:

• Theme: Light or dark mode
• Primary Color: Brand color for buttons and accents
• User Bubble Color: Color for user messages
• Bot Bubble Color: Color for AI responses
• Header Gradient: From and to colors for the header background
• Agent Avatar: Upload a custom logo or use default
• Border Radius: Control corner roundness (sharp, rounded, very rounded)
• Shadow Size: Drop shadow intensity (small, medium, large)
• Launcher Size: Chat button size (small, medium, large)

Position & Behavior

• Position: Widget placement on the page (bottom-left, bottom-right, custom)
• Preview Messages: Messages shown before chat opens (up to 3)
• Auto-show Preview Delay: Milliseconds before preview appears (default: 3000)
• Hide Suggestions on Interact: Remove suggestions after first message

Step 3: Enable Advanced Features

Lead Capture

1. Enable Lead Capture toggle
2. Set Lead Capture Keywords: Words that trigger lead capture (e.g., "demo", "trial", "pricing")
3. Configure Lead Capture Trigger Type:
   • Keyword-based: Trigger when keywords are mentioned
   • Time-based: Trigger after X seconds of conversation
   • Hybrid: Combine both approaches
4. Choose which fields are required:
   • Name: Always required
   • Email: Make optional or required
   • Phone: Make optional or required

Document Management

1. Enable Documents & Brochures feature
2. Upload your documents:
   • Click Upload Document
   • Select file (PDF, DOC, DOCX, PPT, images)
   • Add document name
   • Add description (helps with keyword matching)
   • Set access permissions if needed
3. Organize with descriptive titles and metadata for better search results

Privacy & Branding

• Privacy Policy URL: Link to your privacy policy (shown in footer)
• Show Branding: Toggle OutCaller branding in footer
• Custom Terms: Add custom terms or disclaimers

Step 4: Generate Embed Code

Once configured:

1. Copy the provided script tag
2. The code will look like:

<script src="https://outcallerai.com/widget.js" data-org-id="your-org-id-here"></script>

Step 5: Install on Your Website

For Static HTML

Paste the embed code before the closing </body> tag:

<!DOCTYPE html>
<html>
	<head>
		<title>Your Website</title>
	</head>
	<body>
		<!-- Your website content -->

		<script src="https://outcallerai.com/widget.js" data-org-id="your-org-id-here"></script>
	</body>
</html>

Step 6: Test the Widget

1. Visit your website in a new browser
2. Look for the chat widget in the specified position
3. Send test messages to verify AI response
4. Test lead capture by mentioning trigger keywords
5. Request a document to verify document feature
6. Provide feedback (thumbs up/down) to test feedback system

Data Collection & Privacy

What Data is Collected

The Echo Widget collects:

• Messages: All chat messages sent and received
• Session Info: Session ID, visitor ID, timestamps
• Metadata: Browser info, timezone, viewport size
• Lead Info (when enabled): Name, email, phone, conversation context
• Feedback: User ratings (thumbs up/down)
• Analytics: Widget interactions and event tracking

User Privacy Controls

Users can:

• Clear Data: Delete local storage at any time (removes stored session/visitor IDs)
• Opt Out: Decline to provide lead information
• Skip Optional Fields: Phone number can be skipped if not required
• Request Deletion: Contact you to delete collected data

For detailed information, see our Privacy Policy.

Performance & SEO

Performance Optimization

• Lazy Loading: Widget loads asynchronously, doesn't block page load
• Lightweight: ~50KB gzipped script size
• Local Storage: Conversation history stored client-side for speed
• Session Caching: No redundant API calls for same session

SEO Impact

• Widget does not impact page ranking
• No indexed dynamic content
• Renders after page load (doesn't interfere with crawlers)
• Conversation data not indexed

Analytics & Monitoring

View Widget Analytics

1. Go to Dashboard → Analytics
2. See metrics like:
   • Total conversations started
   • Average message count per session
   • Lead capture rate
   • Feedback ratings distribution & more

Export Data

• Download conversation logs (CSV format)
• Export lead information
• Generate engagement reports

Support

For additional help:

• Documentation: Visit docs.outcallerai.com
• Email Support: outcaller@ssingularity.co.in

The Echo Widget is constantly evolving with new features and improvements. Check back regularly for updates and new capabilities!