SDK Documentation

Build with EchoAI

Integrate intelligent AI chat assistants into your website with just a few lines of code.

Quick Start

Get your EchoAI assistant running in under 2 minutes with these simple steps.

Add the SDK Script

Include the Echo SDK script in your HTML file before the closing </body> tag.

HTML

<script src="https://cdn.echoaichat.com/sdk/echo-sdk.js"></script>

Initialize the Widget

Create a new EchoSDK instance with your assistant identifier.

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656'
});

You're all set!

Your EchoAI assistant is now ready. The widget will load in the element with ID #echo-chat.

Installation

Complete HTML example to get you started quickly.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Echo Chat Container -->
  <div id="echo-chat" style="height: 500px;"></div>

  <!-- Echo SDK -->
  <script src="https://cdn.echoaichat.com/sdk/echo-sdk.js"></script>
  <script>
    const echoWidget = new EchoSDK({
      container: '#echo-chat',
      assistantIdentifier: 'jlqtkx754656',
      height: '100%'
    });
  </script>
</body>
</html>

Core Options

Essential configuration options for your Echo widget.

Option	Type	Description
`container` Required	string \| Element	CSS selector or DOM element where the chat will be mounted
`assistantIdentifier` Required	string	Your unique assistant identifier from the Echo dashboard
`height` Optional	string \| number	Widget height (e.g., "500px", "100%", 500)
`autoFocus` Optional	boolean	Auto-focus input field on load. Default: `false`
`userContext` Optional	string	Additional context about the user (max 1000 chars)
`starterQuestions` NEW	Array	Override default starter questions (max 5)
`onError` Optional	function	Error callback: `(error: Error) => void`

Text Customization

Customize UI text with the textConfig option.

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  textConfig: {
    inputPlaceholder: 'Ask me anything...',
    sourcesLabel: 'Knowledge Sources',
    searchingText: 'Searching...',
    toolsText: 'Processing...',
    loadingText: 'Thinking...'
  }
});

Property	Type	Description
`inputPlaceholder`	string	Placeholder text for the input field
`sourcesLabel`	string	Label for knowledge sources section
`searchingText`	string	Text shown while searching
`toolsText`	string	Text shown while processing tools
`loadingText`	string	Text shown while loading response

Floating Button

Display the chat as a floating button that opens a popup.

JavaScript

const echoWidget = new EchoSDK({
  assistantIdentifier: 'jlqtkx754656',
  floatingButton: {
    enabled: true,
    position: 'bottom_right',
    tooltip: 'Chat with us!',
    width: '400px',
    height: '600px'
  }
});

Property	Type	Description
`enabled`	boolean	Enable floating button mode
`position`	string	`bottom_right` \| `bottom_left` \| `top_right` \| `top_left`
`icon`	string	Custom icon URL
`tooltip`	string	Tooltip text on hover
`width` / `height`	string \| number	Popup dimensions

Starter Questions NEW

Override default starter questions to customize the initial chat experience.

What are Starter Questions?

Starter questions appear when users first open the chat, providing quick conversation starters. Override them via the SDK for page-specific customization.

Basic Usage

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  starterQuestions: [
    { question: 'What are your pricing plans?' },
    { question: 'How do I get started?' },
    { question: 'Can I see a demo?' }
  ]
});

Behavior

Maximum 5 questions - Additional questions are ignored
Max 200 characters - Longer text is truncated
Empty array [] - Hides all starter questions
Undefined - Uses default questions from dashboard

Page-Specific Example

JavaScript

// Dynamic questions based on current page
function getStarterQuestions() {
  const path = window.location.pathname;

  if (path.includes('/pricing')) {
    return [
      { question: 'Compare pricing plans' },
      { question: 'Do you offer discounts?' },
      { question: 'Enterprise options?' }
    ];
  }

  if (path.includes('/docs')) {
    return [
      { question: 'How do I install the SDK?' },
      { question: 'Show me code examples' }
    ];
  }

  // Use dashboard defaults
  return undefined;
}

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  starterQuestions: getStarterQuestions()
});

Note

SDK-provided questions override dashboard settings. Changes in your dashboard won't affect pages using overrides.

Interactive Playground

Configure your widget and see the generated code in real-time.

Widget Configurator

Assistant Identifier

Height

Auto Focus Input

Input Placeholder

Starter Questions NEW

Generated Code

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  height: '100%'
});

Click "Run Preview" to see your widget

Code Examples

Common integration patterns for different use cases.

Embedded Widget

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  height: '600px',
  autoFocus: true,
  textConfig: {
    inputPlaceholder: 'Ask me anything...',
    sourcesLabel: 'References'
  }
});

With User Context

JavaScript

// Personalize based on logged-in user
const user = getCurrentUser();

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  userContext: `Name: ${user.name}, Plan: ${user.plan}`,
  starterQuestions: [
    { question: 'How do I upgrade my plan?' },
    { question: 'What\'s new in my account?' }
  ]
});

Full Configuration

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'jlqtkx754656',
  height: '100%',
  autoFocus: true,

  textConfig: {
    inputPlaceholder: 'How can I help you today?',
    sourcesLabel: 'Knowledge Sources',
    searchingText: 'Searching...',
    toolsText: 'Processing...',
    loadingText: 'Generating response...'
  },

  userContext: 'Premium user, prefers detailed answers',

  urlContextOptions: {
    autoDetect: true
  },

  starterQuestions: [
    { question: 'What\'s new this week?' },
    { question: 'Show me advanced features' },
    { question: 'API integration guide' }
  ],

  onError: (error) => {
    console.error('Echo SDK error:', error);
  }
});