SDK JavaScript

Y pecyn npm yw’r ffordd a argymhellir i integreiddio ChattyBox. Mewnforiwch un cleient i’ch rhaglen, ffurfweddwch ei allwedd gyhoeddus a’i URL API, yna atodwch y rhyngwyneb a gynhelir lle mae ei angen ar eich rhaglen neu defnyddiwch y dulliau di-ben gyda’ch cydrannau eich hun.

Cychwyn Cyflym

bun add @openstaticfish/chattybox

import { Chattybox } from '@openstaticfish/chattybox';

const chattybox = new Chattybox({
  apiKey: import.meta.env.PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.PUBLIC_CHATTYBOX_API_URL,
});

const widget = chattybox.mountWidget();

// Call this from your component's cleanup lifecycle when appropriate.
// widget.remove();

Galwch mountWidget() mewn cod porwr o’r gydran neu’r layout lle dylai’r rhyngwyneb a gynhelir fod ar gael. Gallwch basio { locale: 'fr' } ar gyfer locale sy’n benodol i lwybr.

Cael Eich Ffurfweddiad Cyhoeddus

1. Crëwch brosiect a mynegeiwch eich cynnwys.
2. Profwch gwestiynau cynrychioliadol yn y dangosfwrdd.
3. Agorwch Public Keys, crëwch allwedd porwr, a chyfyngwch ei tharddiadau a ganiateir.
4. Agorwch Embed, dewiswch yr allwedd honno, a chopïwch URL API y widget a ddangosir gyda’r pyt a gynhyrchir.

Mae allweddi API widget cyhoeddus wedi’u cynllunio i ymddangos mewn cod porwr. Maent yn nodi prosiect ond nid ydynt yn fanylion rheoli. Cyfyngwch allweddi porwr i’r parthau y dylid caniatáu iddynt alw eich chatbot. Mae’r pecyn yn gleient ESM ar gyfer rhaglenni Node.js cyfredol a phorwyr sy’n darparu fetch.

Atodi’r Widget Lletyol o’r Cod

Defnyddiwch hwn pan fyddwch eisiau rhyngwyneb ChattyBox a gynhelir, gan reoli o god eich rhaglen ble mae’n cael ei atodi:

import { Chattybox } from '@openstaticfish/chattybox';

const chattybox = new Chattybox({
  apiKey: import.meta.env.PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.PUBLIC_CHATTYBOX_API_URL,
});

const widget = chattybox.mountWidget();

// Optional cleanup for a component lifecycle:
widget.remove();

Mae’n llwytho’r UI a gynhelir unwaith ac nid yw ar gael yn ystod rendro gweinydd.

Adeiladu Eich UI Eich Hun

Defnyddiwch y dulliau di-ben isod pan mai eich rhaglen sy’n berchen ar restr negeseuon, mewnbwn, cyflwr llwytho a gwallau, dyfyniadau a hygyrchedd.

Anfon Neges

import { Chattybox } from '@openstaticfish/chattybox';

const chattybox = new Chattybox({
  apiKey: import.meta.env.PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.PUBLIC_CHATTYBOX_API_URL,
});

const answer = await chattybox.sendMessage({
  message: 'How do I get started?',
});

console.log(answer.message);
console.log(answer.sources);

Gosodwch PUBLIC_CHATTYBOX_API_URL i union URL API y widget o’r tab Embed. Mae’r SDK yn derbyn naill ai wraidd y deployment neu URL sy’n gorffen â /chat.

Mae’r ymateb yn cynnwys:

Maes	Math	Disgrifiad
message	string	Yr ateb a gynhyrchwyd.
conversationId	string	Dynodwr a ddefnyddir i barhau’r sgwrs hon.
sources	string[]	URLau ffynhonnell a adalwyd ar gyfer yr ateb.

Parhau â Sgwrs

Cadwch ID y sgwrs a ddychwelwyd yng nghyflwr eich UI a’i anfon gyda’r neges nesaf:

const followUp = await chattybox.sendMessage({
  message: 'Can you explain the second step?',
  conversationId: answer.conversationId,
});

Peidiwch ag ailddefnyddio un ID sgwrs ar gyfer ymwelwyr nad ydynt yn gysylltiedig. Crëwch sgwrs newydd drwy hepgor conversationId o’u neges gyntaf.

Trin Gwallau

import { Chattybox, ChattyboxError } from '@openstaticfish/chattybox';

try {
  await chattybox.sendMessage({ message: 'Where is the API reference?' });
} catch (error) {
  if (error instanceof ChattyboxError) {
    console.error(error.status, error.code, error.message);
  }
}

Mae ChattyboxError.status yn cynnwys statws HTTP. Mae code yn bresennol pan fydd yr API yn dychwelyd cod gwall strwythuredig.

Ailddefnyddio Gosodiadau Prosiect a Chyfieithiadau

Mae’r SDK hefyd yn darparu getWidgetConfig() a getWidgetTranslations(locale). Mae’r dulliau hyn yn cefnogi cleientiaid sydd am atgynhyrchu gosodiadau prosiect a labeli lleol y widget lletyol:

const [config, labels] = await Promise.all([
  chattybox.getWidgetConfig(),
  chattybox.getWidgetTranslations('en'),
]);

Gall UI cwbl bersonol eu hanwybyddu. Cadwch conversationId pob ymwelydd ym mhorwr neu gyflwr sesiwn yr ymwelydd hwnnw; peidiwch byth â rhannu un ID sgwrs byd-eang.

Camau Nesaf

• Gwell gennych UI a gynhelir heb adeiladu? Gosodwch widget.js.
• Addaswch y UI lletyol yn Addasu’r widget lletyol.
• Cyn lansio, profwch gyfyngiadau tarddiad, atebion wrth gefn, dyfyniadau ac ymddygiad symudol gyda’r rhestr wirio lansio.