Integrating the Chatbot

📋 Select Chatbot Version:

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:

Configure your channel in the ept AI dashboard
Create a secure backend endpoint for token authentication
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:

Navigate to Configuration > Channels in the ept AI dashboard
Click "Create Channel"
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:

Keep your client_id secure on the server (never exposed to the browser)
Request access tokens from the ept AI authentication API
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)
PHP
Python (FastAPI)

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
// /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;
}
?>

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);

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:

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

Security Overview​

Prerequisites​

Environment Variables​

Step 1: Set Up Channel Configuration​

Step 2: Create a Secure Token Endpoint​

Step 3: Initialize the Chatbot​

Basic Integration​

Version Targeting​

By Major.Minor Version​

By Track​

By Specific Patch​

Configuration Parameters​

Required Parameters​

Appearance & Behavior​

Text & Messages​

Token Management​

Decoding the Access Token​

Server-Side Token Caching​

Widget Control​

Version-Specific Features & Release Notes​

Migration​

Important Considerations​

Conversation Retention​

Next Steps​