Website Chat Integration

Gail can be embedded directly on your website as a chat interface, providing instant AI-powered support to your visitors. This guide walks you through the complete setup process, from creating your Gail to embedding the chat widget on your site.

Overview

Website chat integration allows you to:

• Provide 24/7 instant support to website visitors
• Answer common questions automatically
• Qualify leads and schedule appointments
• Transfer to human agents when needed
• Maintain consistent brand experience

Prerequisites: Create Your Gail First

Before you can embed chat on your website, you need to create and configure a Gail (AI agent). If you haven’t already created a Gail, follow these steps:

Step 1: Navigate to Gails

1. Log in to your Gail portal
2. Click Gails in the left-hand navigation menu
3. Click Create New Gail (or Create Agent)

Step 2: Choose Your Setup Method

You have two options:

Option A: Start with a Template

Select a pre-built template that matches your use case:

Option B: Build from Scratch

Create a custom Gail tailored to your specific needs.

Step 3: Configure Your Gail

Complete the basic configuration:

Name Your Gail

Choose a name that reflects its purpose (e.g., “Website Support Agent” or “Sales Assistant”).

Write the Greeting Message

This is the first message visitors will see when they open the chat.

Example greetings:

Hi! I'm here to help answer your questions. What can I assist you with today?

Welcome to Acme Corp! I'm your virtual assistant. How can I help you?

Hello! I can help you with product information, scheduling, or answering questions. What brings you here today?

Add Knowledge

Upload documents, web pages, and structured data to help your Gail answer questions accurately:

1. Navigate to the Knowledge section
2. Upload relevant documents (PDFs, Word docs, text files)
3. Add URLs to crawl web pages
4. Input structured data like FAQs or product information

See Knowledge Base for detailed instructions.

Configure Voice Settings (Optional)

If your Gail will also handle voice calls, configure voice settings through the dashboard. For web chat only, you can skip this step.

Step 4: Test Your Gail

Before deploying to your website:

1. Use the test interface in the dashboard
2. Try asking various questions your customers might ask
3. Review responses for accuracy
4. Iterate on knowledge and configuration as needed

Accessing Your Integration Code

Now that your Gail is ready, follow these steps to get the code needed to embed it on your website:

Step 1: Navigate to Gails

1. Log in to the portal
2. Click on the Gails tab in the left-hand sidebar
3. This will display your list of active assistants

Step 2: Select Your Assistant

1. Locate the specific Gail you want to integrate into your website
2. Click the three dots (…) on the far right of that assistant’s row
3. A dropdown menu will appear

Step 3: Open Integration Settings

From the dropdown menu, select Setup Chat.

Step 4: Access Integration Code

A “Setup Chat Integration” window will appear with everything you need to deploy your Gail:

• NPM Package: Documentation for using the @gail-ai/conversation-embed package
• Embeddable Frame: Code to embed the full chat interface
• Floating Widget: Code for the corner chat bubble
• IDs: Your specific Organization ID and Assistant ID

Integration Methods

There are three ways to integrate Gail chat into your website. Choose the method that best fits your technical requirements and user experience goals.

Method 1: Floating Widget (Recommended)

The floating widget appears as a chat bubble in the corner of your website. This is the most popular option as it’s non-intrusive and familiar to users.

Best for:

• General website use
• Providing support without disrupting content
• Maintaining consistent access across all pages

Implementation Steps

1. In the “Setup Chat Integration” window, click the Floating Widget tab
2. Copy the provided code snippet
3. Paste the code into your website’s HTML, just before the closing </body> tag

Example code structure:

1
<script>
2
  (function() {
3
    // Gail chat widget initialization code
4
    // This will be provided in your Setup Chat Integration window
5
  })();
6
</script>

4. Save and deploy your website changes
5. The chat bubble will appear in the bottom-right corner of your site

Customization Options

The floating widget can typically be customized with:

• Position (bottom-right, bottom-left, etc.)
• Colors to match your brand
• Icon and bubble styling
• Welcome message timing

Refer to the NPM package documentation in your Setup Chat Integration window for specific customization options.

Method 2: Embeddable Frame

The embeddable frame allows you to place the chat interface anywhere on your page as an inline element.

Best for:

• Dedicated support or contact pages
• When you want chat to be the primary focus
• Integration into existing page layouts

Implementation Steps

1. In the “Setup Chat Integration” window, click the Embeddable Frame tab
2. Copy the provided iframe code or container code
3. Paste the code into your HTML where you want the chat to appear

Example structure:

1
<div id="gail-chat-container" style="width: 100%; height: 600px;">
2
  <!-- Gail chat will load here -->
3
</div>
4
<script>
5
  // Initialization code provided in Setup Chat Integration window
6
</script>

4. Adjust the width and height to fit your design
5. Save and deploy your changes

Method 3: NPM Package (For Developers)

For more advanced integrations and full control, use the @gail-ai/conversation-embed NPM package.

Best for:

• React, Vue, Angular, or other JavaScript framework projects
• When you need programmatic control
• Custom UI implementations
• Advanced event handling

Implementation Steps

1. In the “Setup Chat Integration” window, click the NPM Package tab
2. Follow the installation instructions:

$
npm install @gail-ai/conversation-embed

or

$
yarn add @gail-ai/conversation-embed

3. Import and initialize in your application:

1
import { GailChat } from '@gail-ai/conversation-embed';
2
3
const chat = new GailChat({
4
  organizationId: 'YOUR_ORG_ID',
5
  assistantId: 'YOUR_ASSISTANT_ID',
6
  // Additional configuration options
7
});
8
9
chat.init();

4. Refer to the NPM package documentation in your Setup Chat Integration window for:
   • Full API reference
   • Configuration options
   • Event handlers
   • Custom styling
   • Advanced features

Configuration and Customization

Branding

Match the chat interface to your brand:

1. Colors: Customize primary colors, text colors, and background colors
2. Logo: Add your company logo to the chat header
3. Font: Match your website’s typography
4. Welcome message: Customize the initial greeting

These options are typically configured through:

• The NPM package configuration object
• CSS overrides for the widget
• Settings in the Setup Chat Integration window

Behavior Settings

Configure how the chat behaves:

• Auto-open: Automatically open chat after a delay or on certain pages
• Proactive messages: Send a greeting after visitor inactivity
• Position: Change the location of the floating widget
• Availability: Show online/offline status
• Sound notifications: Enable or disable notification sounds

Language and Localization

If you serve international customers:

1. Ensure your Gail is configured with appropriate language support
2. Set the default language in the embed configuration
3. Consider creating separate Gails for different languages

Testing Your Integration

Before going live, thoroughly test your chat integration:

Functionality Testing

1. Load testing: Verify the chat loads on all pages where it’s embedded
2. Conversation testing: Test various questions and scenarios
3. Response accuracy: Ensure answers are accurate and helpful
4. Fallback testing: Test what happens when Gail can’t answer

Cross-Browser Testing

Test the chat in multiple browsers:

• Chrome
• Firefox
• Safari
• Edge
• Mobile browsers (iOS Safari, Chrome Mobile)

Responsive Design Testing

Verify the chat works on different screen sizes:

• Desktop (1920px, 1440px, 1280px)
• Tablet (768px, 1024px)
• Mobile (375px, 414px)

Performance Testing

1. Check page load times with the chat widget
2. Verify it doesn’t block page rendering
3. Test on slower network connections

Going Live

Once testing is complete:

Step 1: Deploy to Production

1. Add the embed code to your production website
2. Deploy your changes through your normal deployment process
3. Clear CDN caches if applicable

Step 2: Monitor Initial Performance

Watch for:

• Chat widget loading correctly
• Conversations starting successfully
• Response quality
• Any error messages

Step 3: Review Conversations

1. Navigate to Data & Analytics in the Gail dashboard
2. Review chat conversations
3. Look for areas where Gail struggles
4. Identify common questions not well-answered

Step 4: Iterate and Improve

Based on your review:

1. Add more knowledge to address gaps
2. Refine Gail’s configuration
3. Update conversation flows
4. Adjust use cases and scenarios

Monitoring and Analytics

Conversation Logs

Access detailed chat logs:

1. Go to Data & Analytics > Call Logs (chat conversations appear here too)
2. Filter by channel: Web Chat
3. Review individual conversation transcripts
4. Identify trends and common issues

Key Metrics to Track

Monitor these metrics to measure success:

• Chat volume: Number of chat conversations
• Resolution rate: Percentage of conversations resolved without human intervention
• Average response time: How quickly Gail responds
• Customer satisfaction: If you collect feedback
• Containment rate: Percentage of chats handled entirely by Gail
• Transfer rate: How often Gail transfers to a human

Continuous Improvement

Use analytics to improve your chat experience:

1. Weekly reviews: Check conversation logs weekly
2. Knowledge updates: Add information for frequently asked questions
3. Configuration adjustments: Refine Gail’s behavior based on real usage
4. A/B testing: Test different greetings, positions, or configurations

Troubleshooting

Chat Widget Not Appearing

If the chat widget doesn’t load:

Check code placement

• Ensure the code is placed before the closing </body> tag
• Verify there are no JavaScript errors in the browser console
• Check that the code was copied completely

Verify IDs

• Confirm Organization ID is correct
• Confirm Assistant ID is correct
• Check for typos in the integration code

Check browser console

• Open browser developer tools (F12)
• Look for error messages in the console
• Address any JavaScript errors

Chat Not Responding

If the chat widget appears but doesn’t respond:

Check Gail status

• Verify your Gail is active in the dashboard
• Confirm it hasn’t been paused or disabled
• Check that knowledge base is properly configured

Review configuration

• Ensure your Gail has sufficient knowledge
• Verify conversation flows are set up correctly
• Check that there are no configuration errors

Check network connectivity

• Use browser developer tools to check network requests
• Look for failed API calls
• Verify there are no CORS errors

Styling Issues

If the chat widget looks broken or doesn’t match your design:

CSS conflicts

• Check for CSS conflicts with your website styles
• Use browser developer tools to inspect element styles
• Add CSS overrides if needed

Responsive issues

• Test on actual devices
• Check media queries
• Adjust container dimensions

Z-index problems

• Ensure the chat widget appears above other elements
• Adjust z-index values if necessary

Performance Issues

If the chat widget slows down your page:

Optimize loading

• Ensure the widget loads asynchronously
• Consider lazy loading on certain pages
• Check that it doesn’t block page rendering

Reduce bundle size

• Use the CDN version instead of bundling (if applicable)
• Implement code splitting for NPM package integration
• Remove unused features or customizations

Best Practices

User Experience

• Clear availability: Let users know if they’re chatting with AI or when human handoff is available
• Set expectations: Be clear about what your Gail can and cannot help with
• Provide alternatives: Offer phone numbers or email if chat can’t resolve the issue
• Mobile-first: Ensure excellent mobile experience as many users chat from phones

Content and Knowledge

• Regular updates: Keep your Gail’s knowledge base current
• FAQs first: Ensure all frequently asked questions are covered
• Clear language: Use simple, clear language in responses
• Consistent tone: Match your brand’s voice and tone

Technical

• Async loading: Load the chat widget asynchronously to avoid blocking page load
• Error handling: Implement proper error handling and fallbacks
• Privacy compliance: Ensure compliance with GDPR, CCPA, and other privacy regulations
• Accessibility: Make sure the chat widget is accessible (keyboard navigation, screen readers)

Monitoring

• Regular reviews: Review chat conversations weekly
• Track metrics: Monitor key performance indicators
• User feedback: Collect feedback on chat experience
• Continuous improvement: Regularly update based on usage patterns

Security and Privacy

Data Protection

• All chat conversations are encrypted in transit
• Data is stored securely in compliance with industry standards
• Review your organization’s data retention policies

Compliance Considerations

Ensure your chat implementation complies with:

• GDPR: If serving EU visitors
• CCPA: If serving California residents
• HIPAA: If handling healthcare information (special configuration required)
• PCI DSS: If collecting payment information (not recommended through chat)

User Consent

Consider adding:

• Chat terms of service
• Privacy policy links in the chat interface
• Cookie consent if required by your jurisdiction
• Data collection notices

Advanced Features

Transferring to Human Agents

Configure your Gail to transfer complex issues to human agents:

1. Set up transfer rules in your Gail configuration
2. Integrate with your help desk or support system
3. Define conditions for when transfer should occur

Configure transfer settings in your Gail’s dashboard settings.

Integration with Other Tools

Connect your web chat to:

• CRM systems: Salesforce, HubSpot, etc.
• Help desk software: Zendesk, Freshdesk, etc.
• Calendars: For appointment booking
• Custom APIs: For specific business logic

See Integrations Overview for available integrations.

Custom Webhooks

Trigger external actions based on chat events:

1. Configure webhooks in your Gail settings
2. Receive events when chats start, end, or trigger specific conditions
3. Process events in your backend systems

See Custom Webhooks for implementation details.

Examples

Example 1: E-Commerce Support Chat

Use Case: Online store providing product support

Gail Configuration:

• Name: “Shopping Assistant”
• Knowledge: Product catalog, shipping policies, return policies
• Greeting: “Hi! I can help you find products, track orders, or answer questions about shipping and returns. What can I help with?”

Widget Settings:

• Position: Bottom-right floating widget
• Auto-open: After 15 seconds on product pages
• Color: Match brand primary color

Example 2: SaaS Company Help Chat

Use Case: Software company providing technical support

Gail Configuration:

• Name: “Support Assistant”
• Knowledge: Documentation, API reference, common troubleshooting guides
• Greeting: “Welcome! I can help you with account questions, technical issues, or billing. What do you need help with?”

Widget Settings:

• Position: Bottom-right floating widget
• Show only on: Dashboard and documentation pages
• Transfer rules: Complex technical issues → human agent

Example 3: Healthcare Appointment Booking

Use Case: Medical practice for appointment scheduling

Gail Configuration:

• Name: “Appointment Assistant”
• Knowledge: Provider schedules, services offered, insurance information
• Greeting: “Hello! I can help you schedule an appointment or answer questions about our services. How can I assist you?”

Widget Settings:

• Embedded frame on dedicated “Book Appointment” page
• Full-width layout
• Calendar integration enabled
• HIPAA-compliant configuration

Related Resources

• Create Your First Gail - Detailed Gail creation guide
• Knowledge Base - Build your knowledge base
• Use Cases - Design conversation paths
• Custom Webhooks - Integrate with external systems
• Call Logs - Monitor chat conversations and performance

Support

Need help with your web chat integration?

• Documentation: Search our docs for specific topics
• Support team: Contact support through your dashboard
• Technical issues: Report bugs or technical problems
• Feature requests: Share ideas for improving web chat