Integrating the Chatbot

📋 Select Chatbot Version:Latest (v2.0)Version 2.0Version 1.0.0

Latest (v2.0)RECOMMENDED

Version 2.0STABLE

Version 1.0.0DEPRECATED

💡 Tip: Use the latest version for new integrations. Version-specific docs help with maintenance and troubleshooting.

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. Configure your channel in the ept AI dashboard
2. Create a secure backend endpoint for token authentication
3. Initialize and configure the chatbot in your web application

Security Overview

Security first: Never expose your client_id 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 for your registered domain
  • 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=ABC123XYZ789ExampleClientID
EPT_ORIGIN=https://example.com

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 "Websocket"
   • Knowledge Source Configuration: Choose the appropriate KSC for this channel
   • Allowed Domain Origin: Add your website domain(s) (e.g., https://example.com) - this restricts chatbot access to authorized domains only
   • Security Settings: Configure confidentiality and access controls as needed

Step 2: Create a Secure Token Endpoint

To keep your credentials secure, you need to create a backend endpoint that your frontend can call to obtain access tokens. This endpoint will:

1. Keep your client_id secure on the server (never exposed to the browser)
2. Request access tokens from the ept AI authentication API
3. Return tokens to your frontend for chatbot initialization

How it works:

• Your backend calls https://chat.ept.ai/access_token/?client_id={YOUR_CLIENT_ID} with an Origin header
• The ept AI API validates your credentials and returns a short-lived access token
• Your backend forwards this token to your frontend

Create an endpoint at /api/ept-token (or your preferred path) using your backend framework:

Node.js (Express)

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}`;
  const r = await request(url, {
    method: 'GET',
    headers: {
      'Origin': process.env.EPT_ORIGIN
    }
  });
  const json = await r.body.json();
  res.json({ access_token: json.access_token });
});

app.listen(3000);

PHP

<?php
// /api/ept-token endpoint
if ($_SERVER['REQUEST_METHOD'] === 'GET' && $_SERVER['REQUEST_URI'] === '/api/ept-token') {
  $clientId = getenv('EPT_CLIENT_ID');
  $origin = getenv('EPT_ORIGIN');
  $url = "https://chat.ept.ai/access_token/?client_id={$clientId}";

  $ch = curl_init($url);
  curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPGET => true,
    CURLOPT_HTTPHEADER => ["Origin: {$origin}"]
  ]);
  $resp = curl_exec($ch);
  if ($resp === false) { 
    http_response_code(500);
    echo json_encode(['error' => curl_error($ch)]);
    curl_close($ch);
    exit;
  }
  curl_close($ch);

  $data = json_decode($resp, true);
  $accessToken = $data['access_token'];
  
  header('Content-Type: application/json');
  echo json_encode(['access_token' => $accessToken]);
  exit;
}
?>

Python (FastAPI)

from fastapi import FastAPI
import os, requests

app = FastAPI()

@app.get("/api/ept-token")
def ept_token():
    client_id = os.environ["EPT_CLIENT_ID"]
    origin = os.environ["EPT_ORIGIN"]
    url = f"https://chat.ept.ai/access_token/?client_id={client_id}"
    
    headers = {"Origin": origin}
    r = requests.get(url, headers=headers)
    r.raise_for_status()
    return {"access_token": r.json()["access_token"]}

Security Best Practices

• Never expose your client_id in frontend code - always keep it on the server
• Add rate limiting to your token endpoint to prevent abuse
• Validate requests to ensure they're coming from your own frontend (e.g., check referer, use CORS)

Step 3: Initialize the Chatbot

Now that you have a secure token endpoint, you can fetch tokens from your backend and initialize the chatbot widget in your web application.

Basic Integration

<script>
  // Configure the chatbot (token fetched from your backend endpoint)
  window.eptAIConfig = {
    accessToken: 'your-access-token-from-backend',
    botName: 'Support Bot',
    defaultQuestions: ["What are your products?"]
  };
</script>

<!-- Load the widget -->
<script 
  src="https://assets.ept.ai/chatbot/loader.js" 
  data-track="stable"
  async>
</script>

Version Targeting

By Major.Minor Version

<!-- Latest 2.x version (recommended) -->
<script src="https://assets.ept.ai/chatbot/loader.js" data-version="2.0" async></script>

By Track

<!-- Stable track (recommended for production) -->
<script src="https://assets.ept.ai/chatbot/loader.js" data-track="stable" async></script>

<!-- Beta track (early access) -->
<script src="https://assets.ept.ai/chatbot/loader.js" data-track="beta" async></script>

By Specific Patch

<!-- Pin to exact patch version -->
<script src="https://assets.ept.ai/chatbot/loader.js" data-version="2.0.13" async></script>

Configuration Parameters

The window.eptAIConfig object supports the following configuration parameters:

Required Parameters

Parameter	Type	Description
accessToken	string	Required. Authentication token obtained from your secure backend endpoint.

Appearance & Behavior

Parameter	Type	Default	Description
botName	string	'AI'	Display name for the bot
defaultQuestions	string[]	[]	Suggested questions to display
darkMode	boolean	false	Enable dark theme
hideLogo	boolean	false	Hide ept AI branding
fullWindow	boolean	false	Full browser window mode
inline	boolean	false	Inline embedding mode
parentDiv	string	null	Container element for inline mode

Text & Messages

Parameter	Type	Default	Description
introText	string	"Hi, I'm {botName}..."	Welcome message
placeholderText	string	'Type your message here...'	Input placeholder
loadingText	string	''	Loading message text
networkErrorText	string	'Connection Lost...'	Network error message

Token Management

Important: Access tokens expire after 24 hours. The ept AI system returns the same access token for all requests until it expires.

Decoding the Access Token

The access token is a JWT (JSON Web Token) that contains information including its expiration time. You can decode it to check when it expires and implement intelligent caching. To test it, you can paste the access token in https://www.jwt.io/ and see the content.

Server-Side Token Caching

To optimize performance and reduce unnecessary API calls, we recommend caching the access token on your server. This eliminates the need to request a new token from ept AI for every user interaction.

// Refresh token seamlessly
async function refreshToken() {
  const response = await fetch('/api/ept-token');
  const { access_token } = await response.json();
  window.eptAIConfig.accessToken = access_token;
}

// Auto-refresh every 23 hours
setInterval(refreshToken, 23 * 60 * 60 * 1000);

Widget Control

Show/hide the widget programmatically:

// Show widget
window.eptAIConfig.show();

// Hide widget
window.eptAIConfig.hide();

Version-Specific Features & Release Notes

For detailed feature lists, configuration options, and release notes:

• Version 2.0 Documentation - Latest: v2.0.9 with UI improvements, 80+ CSS variables, conversation persistence, and type-while-streaming
• Version 1.0 Documentation - Legacy version (deprecated, migration recommended)

Migration

If you're upgrading from version 1.0.x, see our Migration Guide for step-by-step instructions.

Important Considerations

Conversation Retention

Currently, chat conversations are not retained when the page reloads. When a user refreshes the page or navigates away and returns, the conversation history will be lost and a new chat session will start.

Next Steps

After successfully integrating the chatbot:

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

---

📧 Stay Updated on Chat Widget Releases

Get notified when we release new versions of the ept AI chat widget with new features, improvements, and bug fixes.

What you'll receive:

• ✨ Early access to new features
• 🐛 Important bug fixes and security updates
• 📚 Detailed release notes and migration guides
• 🎯 No spam - only version updates

📧 Get Release Notifications

Stay up to date with the latest chat widget releases. Subscribe to receive email notifications when new versions are available with new features, improvements, and bug fixes.

• ✨ Early access to new features
• 🐛 Important bug fixes and security updates
• 📚 Detailed release notes and migration guides
• 🎯 No spam - only version updates