SDK dokumentáció

Fejlessz az EchoAI-jal

Integrálj intelligens AI chat asszisztenseket a weboldaladba néhány sor kóddal.

Gyors kezdés

Az EchoAI asszisztensed 2 perc alatt üzemkész ezekkel az egyszerű lépésekkel.

SDK script hozzáadása

Illeszd be az Echo SDK scriptet a HTML fájlodba a záró </body> tag elé.

HTML

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

Widget inicializálása

Hozz létre egy új EchoSDK példányt az asszisztens azonosítóddal.

JavaScript

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

Kész is!

Az EchoAI asszisztensed kész. A widget a #echo-chat azonosítójú elemben jelenik meg.

Telepítés

Teljes HTML példa a gyors induláshoz.

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: 'dovjmm372762',
      height: '100%'
    });
  </script>
</body>
</html>

Élő előnézet

Állítsd be a widget opciókat alább, és nézd meg a változásokat valós időben. A generált kód automatikusan frissül.

Height

Auto Focus

Input Placeholder

User Context

Display Text

Sources Label

Searching Text

Tools Text

Loading Text

Override Starter Questions

JavaScript

Élő demó

Ez a widget egy valódi EchoAI asszisztenshez csatlakozik. Változtasd meg az opciókat és kattints az „Alkalmaz és újratölt"-re az eredmény megtekintéséhez.

Alapbeállítások

A legfontosabb konfigurációs opciók az Echo widgethez.

Opció	Típus	Leírás
`container` Required	string \| Element	CSS szelektor vagy DOM elem, ahova a chat kerül
`assistantIdentifier` Required	string	Az egyedi asszisztens azonosítód az Echo dashboardról
`height` Optional	string \| number	Widget magasság (pl. "500px", "100%", 500)
`autoFocus` Optional	boolean	Automatikus fókusz a beviteli mezőre betöltéskor. Alapértelmezett: `false`
`userContext` Optional	string	További kontextus a felhasználóról (max 1000 karakter)
`starterQuestions` NEW	Array	Alapértelmezett indító kérdések felülírása (max 5)
`onError` Optional	function	Hiba callback: `(error: Error) => void`

Szöveg testreszabás

Testreszabd a felhasználói felület szövegeit a textConfig opcióval.

JavaScript

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

Property	Típus	Leírás
`inputPlaceholder`	string	Beviteli mező placeholder szövege
`sourcesLabel`	string	Tudásforrások szekció címkéje
`searchingText`	string	Keresés közben megjelenő szöveg
`toolsText`	string	Eszközök feldolgozása közben megjelenő szöveg
`loadingText`	string	Válasz betöltése közben megjelenő szöveg

Lebegő gomb

A chat megjelenítése lebegő gombként, amely egy felugró ablakot nyit.

JavaScript

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

Property	Típus	Leírás
`enabled`	boolean	Lebegő gomb mód engedélyezése
`position`	string	`bottom_right` \| `bottom_left` \| `top_right` \| `top_left`
`icon`	string	Egyéni ikon URL
`tooltip`	string	Tooltip szöveg egérérintéskor
`width` / `height`	string \| number	Felugró ablak méretei

Indító kérdések

Felülírd az alapértelmezett indító kérdéseket a chat kezdeti élményének testreszabásához.

Mik azok az indító kérdések?

Az indító kérdések a chat megnyitásakor jelennek meg, gyors beszélgetésindítóként. Felülírd őket az SDK-val oldalspecifikus testreszabáshoz.

Alaphasználat

JavaScript

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

Működés

Maximum 5 kérdés — a többi figyelmen kívül marad
Maximum 200 karakter — a hosszabb szöveg levágásra kerül
Üres tömb [] — elrejti az összes indító kérdést
Undefined — a dashboard alapértelmezett kérdéseit használja

Oldalspecifikus példa

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: 'dovjmm372762',
  starterQuestions: getStarterQuestions()
});

Megjegyzés

Az SDK-ból megadott kérdések felülírják a dashboard beállításait. A dashboardon végzett változtatások nem érintik a felülírt oldalakat.

Felhasználói kontextus

Adj át metaadatokat az aktuális felhasználóról vagy munkamenetről az AI asszisztensnek. A kontextus az AI rendszerüzenetébe kerül, lehetővé téve a személyre szabott válaszokat anélkül, hogy a felhasználóknak ismételniük kellene az információkat.

Hogyan működik

Az AI a kontextust ismert metaadatként kapja meg, és közvetlenül használja a kérdések megválaszolásához — a tudásbázis keresése nélkül. Például, ha átadod a felhasználó előfizetési szintjét, az AI azonnal válaszolhat a „Milyen csomagom van?" kérdésre a kontextusból.

Egyszerű szöveg

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  userContext: 'Company size: 50-100 employees, Industry: Healthcare, Plan: Enterprise'
});

JSON formátum (ajánlott)

Strukturált adatokhoz használd a JSON.stringify()-t. Ez egyértelműen címkézett mezőket ad az AI-nak.

JavaScript

// Structured context with JSON (recommended)
const user = await fetchCurrentUser();

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  userContext: JSON.stringify({
    userId: user.id,
    membershipTier: 'gold',
    companySize: '50-100 employees',
    accountAge: '2 years',
    cartItems: 3,
    rewardPoints: 1250
  })
});

Dinamikus kontextus

Építs kontextust az alkalmazásod állapotából az inicializáláskor.

JavaScript

// Dynamic context based on application state
function buildContext() {
  const user = getCurrentUser();
  const cart = getCartState();

  return JSON.stringify({
    name: user.firstName,
    plan: user.subscription.plan,
    cartTotal: cart.total,
    itemCount: cart.items.length,
    preferredLanguage: user.locale
  });
}

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

Korlátok és szabályok

Szempont	Részlet
Max hossz	1000 karakter — túllépés hibát dob
Típus	Csak string (egyszerű szöveg vagy JSON)
Hatókör	Beszélgetésszálanként — létrehozáskor beállítva, nem módosítható a beszélgetés közben
Validáció	Kliens- (SDK) és szerveroldalon (API) egyaránt érvényesítve

Legjobb gyakorlatok

Tedd

Használj azonosítókat teljes nevek helyett (userId: "user_123")
Adj meg nem érzékeny metaadatokat: csomag szintje, cégméret, preferenciák
Használj JSON formátumot a strukturált adatokhoz
Csak az AI válaszait javító adatokat adj meg

Ne tedd

Jelszavak, TAJ szám vagy bankkártya adatok
Rendkívül érzékeny személyes adatok tárolása
Olyan adatok megadása, amit a felhasználók nem szeretnének, hogy az AI tudjon
API kulcsok vagy hitelesítő adatok átadása

Kód példák

Gyakori integrációs minták különböző felhasználási esetekhez.

Beágyazott widget

JavaScript

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

Felhasználói kontextussal

JavaScript

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

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

Teljes konfiguráció

JavaScript

const echoWidget = new EchoSDK({
  container: '#echo-chat',
  assistantIdentifier: 'dovjmm372762',
  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);
  }
});