Custom AI Assistant
Transform your website with intelligent conversation capabilities using the AI assistant chat widget from Lincoln Cannon LLC. Our solution provides seamless integration, professional appearance, and enterprise-grade reliability.
Table of Contents
- Overview
- Getting Started
- Integration Guide
- Configuration Options
- Advanced Features
- API Reference
- Implementation Examples
- Support & Troubleshooting
Overview
The AI assistant chat widget from Lincoln Cannon LLC enables your website visitors to engage with your custom AI assistant through an intuitive, professional interface. Our solution is designed for organizations that need:
- Philosophical & Religious Guidance: Provide intelligent responses to questions about philosophy, theology, and spiritual matters
- Health Science Education: Offer evidence-based information about health, wellness, and scientific research
- Personal Emulation: Create AI assistants that embody specific personalities, knowledge, or expertise
- Academic Support: Assist with research, analysis, and educational content in specialized fields
We also support traditional business applications including customer support, lead qualification, content guidance, and 24/7 availability for organizations with more general needs.
Key Benefits
Feature | Business Value |
---|---|
One-Line Integration | Minimal development effort, rapid deployment |
Origin-Based Routing | Automatic assistant selection based on your domain |
Conversation Memory | Maintains context across multiple interactions |
Page Context Awareness | Provides relevant responses based on current page content |
Professional Design | Matches your brand with customizable styling |
Analytics Integration | Track engagement and measure ROI |
Mobile Responsive | Works seamlessly across all devices |
Getting Started
Prerequisites
Before integrating the chat widget, ensure you have:
- Active Lincoln Cannon LLC AI Assistant Service: Your custom assistant must be configured and deployed
- Domain Registration: Your website domain must be registered with our system
- API Access: Valid API credentials for your assistant
Important: Contact Lincoln Cannon LLC to set up your custom AI assistant service before proceeding with integration.
Quick Integration
Add this single line to your website’s HTML:
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
The widget will automatically:
- Detect your website’s domain
- Route to your specific AI assistant
- Display with default styling
- Begin accepting user interactions
Integration Guide
Step 1: Basic Setup
Include the chat widget script in your website’s HTML, preferably before the closing </body>
tag:
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
<!-- AI Assistant Chat Widget -->
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
</body>
</html>
Step 2: Customize Configuration
Configure your assistant’s appearance and behavior by setting the ChatWidgetConfig
object before including the script:
<script>
window.ChatWidgetConfig = {
title: 'Customer Support',
context: 'Hello! I\'m here to help with your questions about our products and services.',
primaryColor: '#28a745',
primaryHoverColor: '#218838'
};
</script>
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
Step 3: Test Your Integration
- Deploy your changes to your website
- Visit your website and look for the chat widget in the bottom-right corner
- Click the widget to open a conversation
- Test with sample questions to verify your assistant responds correctly
Configuration Options
Basic Configuration
Property | Type | Default | Description |
---|---|---|---|
title | string | ‘Chat Assistant’ | Display name for your assistant |
context | string | ‘Hello! How can I help?’ | Initial greeting message |
primaryColor | string | ‘#007bff’ | Primary brand color (hex code) |
primaryHoverColor | string | ‘#0056b3’ | Hover state color (hex code) |
Advanced Configuration
Property | Type | Default | Description |
---|---|---|---|
userIcon | string | ‘fas fa-user’ | Font Awesome icon for user messages |
assistantIcon | string | ‘fas fa-robot’ | Font Awesome icon for assistant messages |
includePageContext | boolean | true | Include current page content in conversations |
Example Configuration
window.ChatWidgetConfig = {
// Basic settings
title: 'Product Support',
context: 'Welcome to our product support! I can help you with installation, troubleshooting, and feature questions.',
primaryColor: '#e74c3c',
primaryHoverColor: '#c0392b',
// Advanced settings
userIcon: 'fas fa-user-circle',
assistantIcon: 'fas fa-headset',
includePageContext: true
};
Advanced Features
Programmatic Control
Control the chat widget programmatically using the ChatWidgetAPI
:
// Open the chat widget
ChatWidgetAPI.open();
// Close the chat widget
ChatWidgetAPI.close();
// Send a message programmatically
ChatWidgetAPI.sendMessage('I need help with my order');
// Update configuration dynamically
ChatWidgetAPI.updateConfig({
title: 'New Assistant Name',
primaryColor: '#9b59b6'
});
Event Callbacks
Monitor user interactions and integrate with your analytics:
window.ChatWidgetConfig = {
// Called when user sends a message
onMessageSent: function(message) {
console.log('User sent:', message);
// Send to Google Analytics
if (typeof gtag !== 'undefined') {
gtag('event', 'chat_message_sent', {
'event_category': 'engagement',
'event_label': message.substring(0, 100)
});
}
},
// Called when assistant responds
onMessageReceived: function(message, data) {
console.log('Assistant replied:', message);
// Track conversation metrics
if (typeof analytics !== 'undefined') {
analytics.track('Chat Response Received', {
messageLength: message.length,
threadId: data.result
});
}
},
// Called when errors occur
onError: function(error) {
console.error('Chat error:', error);
// Send to error tracking service
if (typeof Sentry !== 'undefined') {
Sentry.captureException(error);
}
}
};
Trigger Chat from Custom Elements
Create custom buttons or links to trigger the chat widget:
<!-- Help button in navigation -->
<button onclick="ChatWidgetAPI.open()" class="help-button">
<i class="fas fa-question-circle"></i> Need Help?
</button>
<!-- Pre-filled message button -->
<button onclick="ChatWidgetAPI.sendMessage('I have a question about pricing')">
Ask About Pricing
</button>
<!-- Product-specific help -->
<button onclick="ChatWidgetAPI.sendMessage('I need help with Product X installation')">
Product X Support
</button>
API Reference
ChatWidgetAPI Methods
Method | Parameters | Description |
---|---|---|
open() | None | Opens the chat widget |
close() | None | Closes the chat widget |
sendMessage(message) | message (string) | Sends a message and opens the widget |
updateConfig(config) | config (object) | Updates widget configuration |
Configuration Properties
Property | Type | Required | Description |
---|---|---|---|
title | string | No | Widget title and button text |
apiEndpoint | string | No | API endpoint (auto-configured) |
context | string | No | Initial assistant context |
primaryColor | string | No | Primary color (hex) |
primaryHoverColor | string | No | Hover color (hex) |
userIcon | string | No | Font Awesome user icon |
assistantIcon | string | No | Font Awesome assistant icon |
includePageContext | boolean | No | Include page content in context |
onMessageSent | function | No | Message sent callback |
onMessageReceived | function | No | Message received callback |
onError | function | No | Error callback |
Implementation Examples
Religious Organization Website
<!DOCTYPE html>
<html>
<head>
<title>Your Religious Organization</title>
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/teachings">Teachings</a>
<a href="/community">Community</a>
<button onclick="ChatWidgetAPI.open()">Ask Questions</button>
</nav>
</header>
<main>
<h1>Welcome to Our Community</h1>
<p>Explore our teachings and find answers to your spiritual questions.</p>
<!-- Teaching sections -->
<div class="teaching">
<h3>Scripture Study</h3>
<button onclick="ChatWidgetAPI.sendMessage('Can you help me understand this scripture passage?')">
Ask About Scripture
</button>
</div>
</main>
<!-- AI Assistant Configuration -->
<script>
window.ChatWidgetConfig = {
title: 'Spiritual Guide',
context: 'Hello! I\'m here to help you explore our teachings and answer questions about our faith tradition. I can assist with scripture study, theological questions, and spiritual guidance.',
primaryColor: '#8e44ad',
primaryHoverColor: '#7d3c98',
assistantIcon: 'fas fa-pray',
onMessageSent: function(message) {
// Track spiritual guidance interactions
gtag('event', 'spiritual_guidance_requested', {
'event_category': 'engagement',
'event_label': message.substring(0, 50)
});
}
};
</script>
<!-- AI Assistant Widget -->
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
</body>
</html>
Health Science Research Platform
<!DOCTYPE html>
<html>
<head>
<title>Health Science Research</title>
</head>
<body>
<header>
<h1>Health Science Research Platform</h1>
<nav>
<a href="/research">Research</a>
<a href="/publications">Publications</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section class="hero">
<h2>Evidence-Based Health Information</h2>
<p>Access the latest research and scientific insights.</p>
<button onclick="ChatWidgetAPI.sendMessage('What are the latest findings on longevity research?')">
Ask About Research
</button>
</section>
</main>
<!-- AI Assistant Configuration -->
<script>
window.ChatWidgetConfig = {
title: 'Research Assistant',
context: 'Hello! I\'m your health science research assistant. I can help you understand scientific studies, explain research methodologies, and provide evidence-based information about health and wellness topics.',
primaryColor: '#27ae60',
primaryHoverColor: '#229954',
assistantIcon: 'fas fa-microscope',
onMessageReceived: function(message, data) {
// Track research inquiries
if (message.toLowerCase().includes('research') ||
message.toLowerCase().includes('study')) {
gtag('event', 'research_inquiry', {
'event_category': 'academic'
});
}
}
};
</script>
<!-- AI Assistant Widget -->
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
</body>
</html>
Philosophy Education Platform
<!DOCTYPE html>
<html>
<head>
<title>Philosophy Education</title>
</head>
<body>
<header>
<h1>Philosophy Learning Platform</h1>
<nav>
<a href="/courses">Courses</a>
<a href="/thinkers">Philosophers</a>
<a href="/discussions">Discussions</a>
</nav>
</header>
<main>
<section class="courses">
<h2>Philosophical Traditions</h2>
<div class="course">
<h3>Ancient Philosophy</h3>
<button onclick="ChatWidgetAPI.sendMessage('Can you explain Plato\'s theory of forms?')">
Ask About Plato
</button>
</div>
<div class="course">
<h3>Modern Philosophy</h3>
<button onclick="ChatWidgetAPI.sendMessage('What is Kant\'s categorical imperative?')">
Ask About Kant
</button>
</div>
</section>
</main>
<!-- AI Assistant Configuration -->
<script>
window.ChatWidgetConfig = {
title: 'Philosophy Tutor',
context: 'Hello! I\'m your philosophy tutor. I can help you understand philosophical concepts, explore different traditions, and engage in thoughtful discussions about ethics, metaphysics, epistemology, and more.',
primaryColor: '#2c3e50',
primaryHoverColor: '#1a252f',
assistantIcon: 'fas fa-brain',
onMessageSent: function(message) {
// Track philosophical learning interactions
gtag('event', 'philosophy_inquiry', {
'event_category': 'education',
'event_label': message.substring(0, 50)
});
}
};
</script>
<!-- AI Assistant Widget -->
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
</body>
</html>
Personal Emulation Platform
<!DOCTYPE html>
<html>
<head>
<title>Personal Emulation</title>
</head>
<body>
<header>
<h1>AI Personality Platform</h1>
<nav>
<a href="/personalities">Personalities</a>
<a href="/create">Create Your Own</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section class="personalities">
<h2>Available AI Personalities</h2>
<div class="personality">
<h3>Historical Figure</h3>
<p>Chat with an AI trained on the writings and personality of a historical figure.</p>
<button onclick="ChatWidgetAPI.sendMessage('Tell me about your perspective on leadership')">
Start Conversation
</button>
</div>
<div class="personality">
<h3>Expert Consultant</h3>
<p>Engage with an AI that embodies specific expertise or knowledge domain.</p>
<button onclick="ChatWidgetAPI.sendMessage('What advice would you give about this topic?')">
Get Expert Advice
</button>
</div>
</section>
</main>
<!-- AI Assistant Configuration -->
<script>
window.ChatWidgetConfig = {
title: 'AI Personality',
context: 'Hello! I\'m an AI personality designed to emulate specific characteristics, knowledge, or perspectives. I can engage in conversations that reflect the personality and expertise I\'ve been trained to embody.',
primaryColor: '#e74c3c',
primaryHoverColor: '#c0392b',
assistantIcon: 'fas fa-user-tie',
onMessageReceived: function(message, data) {
// Track personality interaction metrics
analytics.track('Personality Interaction', {
messageLength: message.length,
threadId: data.result
});
}
};
</script>
<!-- AI Assistant Widget -->
<script src="https://cloud.lincolncannon.co/lib/assistant.min.js"></script>
</body>
</html>
Common Business Applications
For organizations with more general needs, our widget also supports traditional business applications:
- E-commerce: Product recommendations, order support, and customer service
- Service Businesses: Consultation scheduling, service information, and lead qualification
- Healthcare: Appointment booking, general health information, and provider assistance
- Professional Services: Client support, service explanations, and consultation requests
These applications use the same integration approach with configuration tailored to your specific business needs.
Support & Troubleshooting
Common Issues
Issue | Solution |
---|---|
Widget not appearing | Verify the script URL is correct and accessible |
Assistant not responding | Check that your domain is registered with Lincoln Cannon LLC |
Styling conflicts | The widget uses isolated styling but may require small changes to your CSS |
Icons not displaying | Check that Font Awesome is not blocked by content security policy |
Testing Your Integration
- Browser Console: Open developer tools and check for JavaScript errors
- Network Tab: Verify API requests are being made to the correct endpoint
- Cross-Browser Testing: Test on Chrome, Firefox, Safari, and Edge
- Mobile Testing: Verify responsive behavior on mobile devices
Debug Mode
Enable detailed logging for troubleshooting:
window.ChatWidgetConfig = {
onError: function(error) {
console.error('AI Assistant Error:', error);
// Send to your error tracking service
if (typeof Sentry !== 'undefined') {
Sentry.captureException(error);
}
}
};
Getting Help
If you encounter issues with your AI assistant integration:
- Check Documentation: Review this guide for configuration details
- Test Basic Setup: Ensure the widget loads with minimal configuration
- Contact Support: Reach out to Lincoln Cannon LLC for technical assistance
- Review Logs: Check your website’s error logs for additional information
Performance Optimization
- Load Time: The widget loads asynchronously and won’t block your page
- Caching: The script is served from a CDN for optimal performance
- Mobile Optimization: Responsive design ensures smooth operation on all devices
Need Professional Assistance?
Lincoln Cannon LLC provides custom AI assistant development and integration services. Contact us to discuss your specific requirements and get expert guidance for your implementation.