Website Widget Integration

Complete guide to embedding Trogent AI agents as chat widgets on your website for enhanced customer engagement and support.

Overview

Trogent’s website widget integration allows you to embed intelligent AI chat widgets directly into your website, providing visitors with instant access to AI-powered assistance. The widget appears as a customizable chat interface that can be positioned anywhere on your site.

Key Features

Easy Integration: Simple JavaScript embed code
Customizable Appearance: Colors, positioning, and sizing options
Auto-initiate Conversations: Proactive engagement with visitors
Mobile Responsive: Works seamlessly across all devices
Real-time Chat: Instant responses powered by your AI agent
Knowledge Base Integration: Access to your custom knowledge base
Analytics Tracking: Monitor visitor engagement and conversations

Prerequisites

Before integrating the website widget, ensure you have:

A website where you have permission to add JavaScript code
An active Trogent agent created and configured
Basic knowledge of HTML/JavaScript (or access to someone who does)

Access your agent in the Trogent dashboard
Navigate to Platform Configuration or click “Edit” on your agent
Find the Website Widget section
Configure widget settings:
- Welcome Message: First message shown to visitors
- Theme Colors: Primary and accent colors
- Position: Bottom-right, bottom-left, or custom
- Auto-initiate: Automatically start conversations
- Enable/Disable: Toggle widget active status

Theme Configuration

Primary Color: Main widget color (header, buttons)
Secondary Color: Accent color (highlights, links)
Text Color: Message text color
Background Color: Chat background color

Position Settings

Bottom-Right: Standard position (recommended)
Bottom-Left: Alternative corner positioning
Custom Position: Specify exact pixel coordinates
Responsive: Automatic adjustment for mobile devices

Size Options

Compact: Smaller widget footprint
Standard: Default recommended size
Large: Expanded widget for better visibility
Custom: Specify exact dimensions

Step 3: Generate Embed Code

Complete widget configuration
Click “Generate Embed Code”
Copy the provided JavaScript code
Note the unique widget ID for your records

Example Embed Code


<script>
  (function(w, d, s) {
    var widgetId = 'trogent-widget-12345';
    var script = d.createElement(s);
    script.async = true;
    script.src = 'https://widget.trogent.fun/embed.js';
    script.setAttribute('data-widget-id', widgetId);
    script.setAttribute('data-agent-id', 'agent-67890');
    var firstScript = d.getElementsByTagName(s)[0];
    firstScript.parentNode.insertBefore(script, firstScript);
  })(window, document, 'script');
</script>

Standard Installation

Copy the embed code from Trogent
Paste before the closing </body> tag in your HTML
Save and publish your website changes
Test the widget by visiting your website

Content Management System Installation

WordPress

Go to Appearance > Theme Editor
Edit your theme’s footer.php file
Paste the code before </body>
Save changes

Shopify

Go to Online Store > Themes
Click Actions > Edit Code
Edit theme.liquid file
Paste code before </body>
Save changes

Squarespace

Go to Settings > Advanced > Code Injection
Paste code in Footer section
Save changes

Wix

Go to Settings > Tracking & Analytics
Click + New Tool > Custom
Paste code and set to load on all pages
Apply changes

Welcome Message Configuration

The welcome message is the first thing visitors see when the widget loads.

Best Practices for Welcome Messages

Keep it concise (under 100 characters)
Be friendly and inviting
Clearly state how you can help
Include a call-to-action

Example Welcome Messages


Customer Support:
"Hi! I'm here to help with any questions about our products or services. How can I assist you today?"

Sales Assistant:
"Welcome! I can help you find the perfect product for your needs. What are you looking for?"

General Help:
"Hello! I'm your AI assistant. Feel free to ask me anything about our company or services."

Technical Support:
"Having technical issues? I'm here to help troubleshoot and guide you to a solution."

Auto-initiate Settings

Auto-initiate allows the widget to proactively start conversations with visitors.

Configuration Options

Delay: Time before auto-initiate triggers (5-60 seconds)
Trigger Conditions: Scroll percentage, time on page, exit intent
Frequency: How often to show auto-initiated messages
Page Targeting: Specific pages where auto-initiate is active

Auto-initiate Message Examples


Time-based:
"I noticed you've been browsing for a while. Can I help you find something specific?"

Scroll-based:
"Interested in learning more? I'm here to answer any questions!"

Exit-intent:
"Wait! Before you go, is there anything I can help you with?"

Availability Hours

Set specific hours when the widget is active:

Time Zones: Configure for your business location
Business Hours: Monday-Friday, custom weekend hours
Holiday Schedules: Disable during holidays or maintenance
Offline Messages: Custom messages when unavailable

Visitor Targeting

Geographic Targeting: Show widget to specific regions
Device Targeting: Desktop, mobile, or tablet specific
Traffic Source: Different behavior for different referrers
Return Visitor: Special handling for returning visitors

Integration Features

Lead Capture: Collect visitor information during conversations
CRM Integration: Connect with customer relationship management systems
Analytics: Track widget performance and user engagement
A/B Testing: Test different configurations

CSS Customization

For advanced customization, you can add custom CSS to modify the widget appearance:


/* Widget Container */
#trogent-widget-container {
  font-family: 'Your Custom Font', sans-serif !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
 
/* Widget Header */
#trogent-widget-header {
  background: linear-gradient(45deg, #your-color-1, #your-color-2) !important;
  border-radius: 12px 12px 0 0 !important;
}
 
/* Message Bubbles */
.trogent-message-user {
  background-color: #your-user-color !important;
  border-radius: 18px 18px 4px 18px !important;
}
 
.trogent-message-bot {
  background-color: #your-bot-color !important;
  border-radius: 18px 18px 18px 4px !important;
}
 
/* Input Field */
#trogent-widget-input {
  border: 2px solid #your-border-color !important;
  border-radius: 24px !important;
}

Brand Integration

Logo Integration

Upload your company logo to display in widget header
Customize logo size and positioning
Add hover effects and animations

Color Scheme Matching

Match your website’s color palette
Use brand colors for consistency
Maintain accessibility standards

Typography

Use your website’s fonts
Maintain readable font sizes
Consider mobile readability

Conversation Flow

Initial Interaction

Widget Appears: Positioned according to your settings
Welcome Message: Displayed automatically or on click
User Input: Visitor types their first message
AI Response: Agent provides intelligent response
Conversation Continues: Natural back-and-forth dialogue

Conversation Memory

Session Persistence: Conversations persist during visit
Return Visitor Recognition: Remember previous interactions
Context Maintenance: Maintain conversation context
History Access: Users can scroll through conversation history

Interactive Features

Quick Reply Buttons

Add quick reply options for common queries:


{
  "quickReplies": [
    "Tell me about your products",
    "What are your business hours?",
    "How can I contact support?",
    "Show me pricing information"
  ]
}

Typing Indicators

Typing Animation: Show when agent is composing response
Processing Indicators: Display during knowledge base searches
Response Timing: Natural delays for human-like interaction

Document Upload: Allow visitors to upload files
Image Support: Share screenshots and images
Download Options: Provide downloadable resources

Mobile Optimization

Responsive Design

Automatic Scaling: Adapts to screen size
Touch-Friendly: Large buttons and touch targets
Keyboard Handling: Smart keyboard appearance/disappearance
Orientation Support: Works in portrait and landscape modes

Mobile-Specific Features

Swipe Gestures: Swipe to minimize/maximize widget
Push Notifications: Browser push notification support
Offline Handling: Graceful offline experience
Performance Optimization: Fast loading on mobile connections

Analytics and Monitoring

Engagement Metrics

Widget Views: How many visitors see the widget
Engagement Rate: Percentage who start conversations
Conversation Length: Average number of messages exchanged
Resolution Rate: Successful conversation outcomes

Technical Metrics

Load Time: Widget loading performance
Error Rates: JavaScript errors and failures
Browser Compatibility: Performance across browsers
Device Performance: Mobile vs desktop usage

Visitor Insights

Behavior Analysis

Page Views: Which pages generate most widget usage
Time on Site: Correlation between visit duration and widget usage
Traffic Sources: How different traffic sources engage with widget
User Journey: Path visitors take before using widget

Conversation Analysis

Common Questions: Most frequently asked questions
Topic Categories: What visitors are most interested in
Success Patterns: Conversations that lead to desired outcomes
Drop-off Points: Where conversations typically end

Best Practices

User Experience Design

Bottom-Right: Standard and least intrusive
Avoid Overlap: Don’t cover important content
Mobile Considerations: Ensure easy thumb access
Accessibility: Consider users with disabilities

Conversation Design

Clear Introductions: Explain what the bot can help with
Set Expectations: Be clear about bot capabilities and limitations
Easy Escalation: Provide clear paths to human help
Graceful Failures: Handle errors and unknown queries well

Performance Optimization

Fast Loading: Optimize widget load times
Minimal Impact: Don’t slow down your website
Progressive Enhancement: Work even if JavaScript fails
Caching: Use appropriate caching strategies

Content Strategy

Knowledge Base Optimization

Relevant Content: Focus on visitor needs and questions
Regular Updates: Keep information current and accurate
FAQ Integration: Include frequently asked questions
Product Information: Detailed product/service descriptions

Response Quality

Consistent Voice: Match your brand personality
Helpful Responses: Always try to be useful
Clear Language: Use simple, understandable language
Action-Oriented: Guide users toward next steps

Privacy and Compliance

Data Protection

Privacy Notice: Include widget privacy information
Data Minimization: Collect only necessary information
Consent Management: Handle user consent appropriately
Secure Transmission: Ensure encrypted data transmission

Legal Considerations

Terms of Service: Include widget usage in terms
Cookie Policies: Address any cookies used by widget
Accessibility: Ensure compliance with accessibility laws
International Laws: Consider GDPR, CCPA, and other regulations

Troubleshooting

Common Issues

JavaScript Errors: Check browser console for errors
Ad Blockers: Some ad blockers may block widgets
Network Issues: Ensure connection to widget servers
Configuration: Verify widget is enabled in Trogent dashboard

Performance Problems

Slow Loading: Check internet connection and server status
Memory Issues: Widget may use too much browser memory
Conflict: May conflict with other JavaScript on your site
Mobile Issues: Test thoroughly on various mobile devices

Conversation Issues

No Responses: Check agent status and configuration
Delayed Responses: May indicate server overload
Error Messages: Review agent knowledge base and settings
Broken Formatting: Check message length and formatting

Debugging Tools

Browser Developer Tools

Console: Check for JavaScript errors
Network: Monitor API requests and responses
Elements: Inspect widget HTML and CSS
Performance: Analyze widget impact on page load

Trogent Dashboard

Agent Status: Verify agent is active and responding
Error Logs: Check for system errors and issues
Analytics: Monitor widget usage and performance
Configuration: Review all widget settings

Advanced Features (Coming Soon)

Enhanced Integrations

CRM Connections: Automatic lead capture and syncing
E-commerce Integration: Product recommendations and purchases
Booking Systems: Appointment scheduling through widget
Support Ticketing: Automatic ticket creation for complex issues

AI Enhancements

Sentiment Analysis: Detect visitor emotions and adjust responses
Intent Recognition: Better understanding of visitor goals
Multilingual Support: Automatic language detection and responses
Voice Integration: Voice input and output capabilities

Advanced Analytics

Conversion Tracking: ROI measurement for widget interactions
Heat Maps: Visual representation of widget usage patterns
A/B Testing: Built-in testing for different configurations
Predictive Analytics: Predict visitor behavior and needs

This comprehensive guide should help you successfully integrate and optimize Trogent’s website widget for maximum visitor engagement and business value.