Skip to main content

Integrating the Chatbot

This guide shows you how to integrate the ept AI chatbot into your website or application. After preparing your AI, you'll learn how to:

  1. Set up secure authentication with ept AI
  2. Create a backend token endpoint
  3. Initialize the chatbot in your web application
  4. Configure channels for different platforms

Security Overview​

Security first: Never expose your client_key in the browser. This guide follows the secure pattern of fetching tokens server-side and passing only short-lived access tokens to the client.

Prerequisites​

Before integrating the chatbot, ensure you have:

  • AI Configuration Complete: Your AI must be prepared with knowledge sources and configurations (see Preparing the AI)
  • ept AI Credentials: Your ept AI application credentials:
    • client_id and client_key
    • Access to the ept AI API
  • Backend Infrastructure: A place to run server code (server, serverless function, etc.)
  • Channel Configuration: At least one channel configured in the ept AI system

Environment Variables​

You'll need these environment variables for the examples below:

EPT_CLIENT_ID=your_client_id_here
EPT_CLIENT_KEY=your_client_key_here

Step 1: Set Up Channel Configuration​

Before implementing the technical integration, you need to configure a channel in the ept AI system:

  1. Navigate to Configuration > Channels in the ept AI dashboard
  2. Click "Create Channel"
  3. Configure your channel:
    • Channel Name: Descriptive name (e.g., "Website Chat", "Support Widget")
    • Channel Type: Select "Web Chat" or "ept AI App"
    • Knowledge Source Configuration: Choose the appropriate KSC for this channel
    • Security Settings: Configure confidentiality and access controls as needed

Step 2: Get an Access Token (Server-Side)​

Create a secure server endpoint that obtains an access token from ept AI. Choose your preferred language:

curl --request GET \
  --url "https://chat.ept.ai/access_token?client_id=${EPT_CLIENT_ID}&client_key=${EPT_CLIENT_KEY}"

Step 3: Create a Secure Token Endpoint​

Create a secure endpoint (e.g., /api/ept-token) that your frontend can call to get access tokens. This keeps your ept AI credentials secure on the server.

import express from 'express';
import { request } from 'undici';

const app = express();

app.get('/api/ept-token', async (req, res) => {
  const url = `https://chat.ept.ai/access_token?client_id=${process.env.EPT_CLIENT_ID}&client_key=${process.env.EPT_CLIENT_KEY}`;
  const r = await request(url, {
    method: 'GET'
  });
  const json = await r.body.json();
  res.json({ access_token: json.access_token });
});

app.listen(3000);

Step 4: Initialize the Chatbot in Your Application​

Now you can load the ept AI chat loader in your web application and initialize it with a secure token from your backend.

Basic Integration​

Add this script to your HTML page or web application:

<script>
(async function () {
  try {
    // Get a short-lived token from your secure backend
    const r = await fetch('/api/ept-token', { credentials: 'include' });
    if (!r.ok) throw new Error('Failed to get access token');
    
    const { access_token } = await r.json();

    // Configure the ept AI chatbot
    window.eptAIConfig = {
      accessToken: access_token,
      // Optional: customize appearance and behavior
      theme: 'light', // or 'dark'
      position: 'bottom-right', // or 'bottom-left'
    };

    // Load the ept AI chat loader
    const script = document.createElement('script');
    script.src = 'https://assets.ept.ai/chat/v1/ept_chat_loader_bundle.js?v=1.0.0';
    script.async = true;
    script.onload = () => console.log('ept AI chatbot loaded successfully');
    script.onerror = () => console.error('Failed to load ept AI chatbot');
    document.body.appendChild(script);
  } catch (error) {
    console.error('Error initializing ept AI chatbot:', error);
  }
})();
</script>

Integration with Modern Frameworks​

For React, Vue, or other modern frameworks, you can wrap this logic in a component or hook:

React Example​

import { useEffect } from 'react';

function EptAIChatbot() {
  useEffect(() => {
    const initializeChatbot = async () => {
      try {
        const response = await fetch('/api/ept-token', { credentials: 'include' });
        const { access_token } = await response.json();
        
        window.eptAIConfig = {
          accessToken: access_token,
          theme: 'light',
          position: 'bottom-right'
        };
        
        const script = document.createElement('script');
        script.src = 'https://assets.ept.ai/chat/v1/ept_chat_loader_bundle.js?v=1.0.0';
        script.async = true;
        document.body.appendChild(script);
      } catch (error) {
        console.error('Failed to initialize ept AI chatbot:', error);
      }
    };
    
    initializeChatbot();
  }, []);
  
  return null; // This component doesn't render anything visible
}

export default EptAIChatbot;

That's it! The loader will establish the WebSocket connection using your secure token and display the chatbot interface.

Step 5: Configure Channel Integration​

For advanced integrations, you may need to specify which channel your chatbot should use. This is configured when creating your channel in the ept AI dashboard and can be referenced in your integration code if needed.

Channel-Specific Configuration​

If you have multiple channels configured, you can specify which one to use:

window.eptAIConfig = {
  accessToken: access_token,
  channelId: 'your-channel-id', // Optional: specify a particular channel
  theme: 'light',
  position: 'bottom-right'
};

Troubleshooting​

Authentication Issues​

  • 401/403 Errors: Ensure your client_id and client_key are correct and have proper permissions
  • Token Expiry: If sessions run long, call your /api/ept-token endpoint again and re-initialize with a fresh token
  • Credential Issues: Verify your ept AI client_id and client_key are correct and active

Integration Problems​

  • CORS Errors: Configure CORS on your /api/ept-token endpoint to allow your site origin. Never expose your ept AI credentials to public clients
  • Mixed Content: Ensure your page is served over HTTPS in production
  • Loading Failures: Check browser console for script loading errors and network connectivity

Performance Issues​

  • Slow Loading: Consider loading the chatbot script after the main page content
  • Token Refresh: Implement token refresh logic for long-running sessions

Quick Reference​

curl --request GET \
  --url "https://chat.ept.ai/access_token?client_id=YOUR_CLIENT_ID&client_key=YOUR_CLIENT_KEY"

Next Steps​

After successfully integrating the chatbot:

  1. Configure the Design - Customize the visual appearance and user experience
  2. Context-Aware Chat - Make your chatbot intelligent about user context and page content
  3. Set up Continuous Improvement - Monitor performance and optimize responses
  4. Explore Advanced Integrations - Connect with CRM, support systems, and other platforms