How to Integrate Assistant to Your Website
Create a website channel to embed your AI assistant directly into your website with a simple script tag, enabling visitors to interact through text chat, voice chat, or both.
Understanding Website Integration
Website integration transforms your configured AI assistant into a live customer service tool that operates directly on your website. Visitors can interact with your assistant using their preferred communication method, providing 24/7 automated support.
Prerequisites - Critical Setup Requirements
⚠️ Website integration will NOT work without proper setup:
Required Before Integration:
- ✅ Create Your Assistant - Configure AI agent with personality and capabilities
- ✅ Create Assistant Roles - Define behavior patterns and Knowledge Source access
- ✅ Assign Roles to Assistant - Connect knowledge sources through roles
- ✅ Test Assistant Functionality - Verify responses work correctly in dashboard
Important: The website integration only generates the embed code. Your assistant must be fully operational before visitors can interact with it.
When to Choose Website Integration
Select website integration when you need:
- 24/7 Automated Support - Handle customer inquiries around the clock
- Reduced Support Workload - Automate responses to common questions
- Enhanced User Engagement - Provide immediate assistance to website visitors
- Flexible Communication Options - Offer both text and voice interaction methods
- Seamless User Experience - Integrate assistance directly into your site flow
Choose Your Communication Type
Communication Options Detailed:
Text Chat Interface:
- Traditional typing-based conversations
- Ideal for detailed technical support
- Supports link sharing and formatted responses
- Best for complex inquiries requiring documentation
Voice Chat Interface:
- Hands-free voice conversations
- Perfect for quick questions and mobile users
- Enhanced accessibility for visually impaired users
- Natural conversational experience
Unified Interface (Recommended):
- Users can switch between text and voice
- Maximum flexibility for different preferences
- Accommodates various accessibility needs
- Provides the best overall user experience
Step-by-Step Integration Process
Step 1: Access Website Channel Creation
Navigate to your assistant dashboard and locate the "Create Website Channel" option. This opens the integration configuration interface.
Pre-setup checklist:
- ✅ Assistant is created and tested
- ✅ Roles are defined and assigned
- ✅ Website URL is ready
- ✅ Communication preferences decided
Step 2: Configure Website Details
Website Name Configuration:
- Use descriptive, memorable names
- Examples: "Customer Support Portal", "Product Help Center"
- Helps identify channels when managing multiple integrations
Website URL Requirements:
- Must include full protocol:
https://example.com - Supports both HTTP and HTTPS
- Can include specific page paths:
https://example.com/support - URL validation ensures proper integration setup
Step 3: Select Communication Type
Choose how visitors will interact with your assistant:
| Type | Best For | User Experience | Implementation |
|---|---|---|---|
| Text Chat | Technical support, detailed queries | Familiar chat interface | Simple, fast loading |
| Voice Chat | Quick questions, mobile users | Natural conversation | Requires microphone permissions |
| Unified | General website support | Maximum flexibility | Recommended for most sites |
Step 4: Choose Your Assistant
Select from your configured assistants in the dropdown menu. The chosen assistant will handle all website interactions using its assigned roles and knowledge sources.
Selection considerations:
- Match assistant personality to website audience
- Ensure assistant has appropriate knowledge sources
- Verify assistant is actively configured and tested
Step 5: Assign Assistant Role
Choose the specific role that defines how your assistant behaves when interacting with website visitors.
Role assignment guidelines:
- Select customer-facing appropriate roles
- Ensure role has access to relevant knowledge sources
- Consider different roles for different website sections
Step 6: Generate Integration Code
Click "Create Website Channel" to generate your unique script tag. This code enables your assistant with all configured capabilities.
Generated code features:
- Unique to your assistant and website
- Includes voice chat capabilities
- Ready for immediate implementation
- Works across all major platforms
Platform Implementation Guide
Universal Script Integration
The generated script tag works with ANY platform that supports custom HTML/JavaScript:
Website Builder Implementation:
<!-- WordPress -->
Add to: Appearance → Themes → Theme Editor → footer.php
Or use: Widgets → Custom HTML widget
<!-- Wix -->
Add to: Settings → Custom Code → Body End
Or use: Add Elements → Embed → Custom Embed
<!-- Squarespace -->
Add to: Settings → Advanced → Code Injection → Footer
<!-- Webflow -->
Add to: Project Settings → Custom Code → Footer Code
E-commerce Platform Implementation:
<!-- Shopify -->
Add to: Online Store → Themes → Actions → Edit Code → theme.liquid
<!-- BigCommerce -->
Add to: Storefront → Script Manager → Create Script
<!-- WooCommerce -->
Add via WordPress methods or use plugin custom code areas
No-Code Platform Implementation:
<!-- Bubble -->
Add to: Design → Page → Element → HTML
<!-- Replit -->
Add to: index.html head or body section
<!-- Zapier -->
Add to: Webhook response or custom code action
Advanced Configuration
Performance Optimization
Loading Strategy:
- Script loads asynchronously for better page performance
- Assistant initializes after page load completion
- Minimal impact on website loading speeds
- Optimized for mobile and desktop experiences
Customization Options:
- Welcome Messages: Custom greetings for new visitors
- Conversation Starters: Suggested questions to guide users
- Availability Hours: Set business hours for active responses
- Fallback Handling: Define escalation paths for complex issues
Analytics and Monitoring
Track Integration Performance:
- Monitor conversation frequency and duration
- Analyze most common user questions
- Measure user satisfaction and engagement
- Identify optimization opportunities
Usage Insights:
- Peak interaction times
- Popular conversation topics
- User preference patterns (text vs voice)
- Conversion impact on website goals
Troubleshooting Common Issues
Quick Resolution Guide
Script Not Loading:
- Verify assistant configuration is complete
- Check website URL matches exactly
- Ensure script is in correct HTML location
- Test across different browsers
Assistant Not Responding:
- Confirm assistant is active in dashboard
- Verify roles are properly assigned
- Test assistant functionality separately
- Check knowledge source connectivity
Voice Features Issues:
- Enable microphone permissions in browser
- Ensure HTTPS connection (required for voice)
- Test browser voice API compatibility
- Check audio device functionality
Performance Problems:
- Monitor internet connection speed
- Optimize knowledge source size
- Test during different times
- Review assistant response complexity
Best Practices for Success
Pre-Launch Optimization
Content Preparation:
- Test assistant with common customer questions
- Prepare clear welcome messages and instructions
- Set appropriate expectations for response capabilities
- Plan escalation paths for complex inquiries
Technical Setup:
- Test integration on staging environment first
- Verify functionality across different devices
- Check mobile responsiveness and usability
- Validate voice features work properly
Post-Launch Management
Continuous Improvement:
- Monitor real conversations for optimization opportunities
- Update knowledge sources based on common questions
- Refine assistant responses for better user experience
- Gather user feedback for assistant enhancement
Scaling Strategy:
- Create additional website channels for different sections
- Develop specialized roles for different user types
- Implement advanced routing for complex inquiries
- Expand to additional communication channels
Interactive Demo
Next Steps After Integration
Immediate Actions
- Test Live Integration - Verify everything works on your website
- Monitor Initial Conversations - Watch first user interactions closely
- Gather User Feedback - Collect input on assistant performance
- Document Settings - Record configuration for team reference
Ongoing Optimization
- Refine Assistant Roles - Improve based on real conversations
- Update Knowledge Sources - Keep information current
- Create Additional Channels - Expand to other platforms
Getting Help
Support Resources:
- ✉️ Direct Support: support@wiil.io
- 📞 Priority Support: Available for enterprise customers
⚠️ Critical Reminder: Website integration requires complete assistant setup including configuration, role assignment, and testing. The integration only provides the embed code - your assistant must be fully operational for visitors to interact successfully.