Přeskočit na hlavní obsah

Web Plugin

Použijte Web Plugin, když by měl agent Siesta AI žít na webové stránce, zákaznickém portálu, dokumentačním webu nebo interním nástroji. Tato stránka poskytuje vývojářům runtime smlouvu, bezpečný testovací tok a kontroly nasazení potřebné k vložení widgetu bez vystavení API klíčů nebo narušení existující stránky.

Nastavení produktu pro agenta se nachází v Agents > Interfaces. Vývojáři používají tuto stránku poté, co je agent nakonfigurován a je potřeba přidat, otestovat nebo předat vložení zákazníkovi.

Runtime Smlouva

Widget má malou smlouvu pro prohlížeč:

  • Načtěte chat-widget.js z prostředí aplikace Siesta.
  • Namontujte jeden vlastní prvek <siestaai-chat-widget>.
  • Předávejte veřejné nebo ověřené ID agenta jako data-chatbot-id.
  • Předávejte odpovídající hostitele aplikace jako data-base-url.
  • Používejte data-environment="dev" pouze pro vývojové nebo náhledové agenty.
  • Držte API klíče a tajemství organizace mimo kód prohlížeče.

Widget může běžet na normální webové stránce bez externího API. Používá veřejnou nebo ověřenou konfiguraci widgetu vybraného agenta ze Siesta AI.

Playground Tok

Použijte Widget Playground, když chcete mít dedikovaný sandbox hostovaný v dokumentaci pro jednu bublinu widgetu, aniž by došlo ke kolizi s podpůrným widgetem, který běží na zbytku dokumentačního webu.

Rychlé Vložení

Produkční vložení:

<script
src="https://app.siesta.ai/chat-widget/chat-widget.js"
defer>
</script>

<siestaai-chat-widget
data-chatbot-id="<agent-id>"
data-base-url="https://app.siesta.ai">
</siestaai-chat-widget>

Vložení pro vývojový náhled:

<script
src="https://app-dev.siesta.ai/chat-widget/chat-widget.js"
defer>
</script>

<siestaai-chat-widget
data-chatbot-id="3481f077-b4e2-4760-7531-08de5443a751"
data-base-url="https://app-dev.siesta.ai"
data-environment="dev">
</siestaai-chat-widget>

Použijte vývojového agenta pro interní kontroly. Používejte produkčního agenta pouze poté, co byly zkontrolovány výzvy, povolené původy, odkazy na ochranu soukromí, nastavení zpětné vazby, nastavení nahrávání souborů a pravidla pro veřejný přístup.

Kde Získat Hodnoty

HodnotaZdrojPoznámky
data-chatbot-idAgents > InterfacesZkopírujte ID agenta, který by měl odpovídat návštěvníkům.
data-base-urlProstředí aplikace SiestaPoužijte https://app.siesta.ai pro produkci a https://app-dev.siesta.ai pro vývoj.
data-environmentCíl nasazeníVynechte pro produkci. Použijte dev pro balíček widgetu pro vývoj.
Auth client IDNastavení ověřeného widgetu v Agents > InterfacesPožadováno pouze tehdy, když by měl widget vynutit přihlášení pomocí Google.
Odkaz na ochranu soukromíNastavení veřejného chatuMusí být nastaven před použitím widgetu na veřejných stránkách.

Testovací Tok

Nedomontovávejte druhý živý testovací widget přímo na této dokumentační stránce. Dokumentační web již běží s widgetem podpory Siesta a dva widgety na stejné stránce mohou způsobit zavádějící validaci.

Použijte místo toho tento tok:

  1. Nakonfigurujte agenta v Agents > Interfaces.
  2. Zkopírujte vygenerovaný úryvek nebo si vytvořte jeden podle výše uvedené smlouvy.
  3. Otestujte úryvek na Widget Playground, neutrální místní HTML stránce, stagingovém webu nebo jiném dedikovaném povrchu pro náhled widgetu.
  4. Pokud cílová webová stránka blokuje náhledy iframe, otevřete skutečnou cílovou stránku a použijte níže uvedený injektor DevTools.
  5. Potvrďte, že se widget otevře, odešle zprávu, obdrží užitečnou odpověď, respektuje povolené soubory/feedback/realtime nastavení a zobrazuje správný odkaz na ochranu soukromí.

Injektor DevTools

Použijte tento úryvek, když zákaznická webová stránka blokuje náhledy iframe nebo když potřebujete ověřit widget na skutečném DOM před nasazením kódu. Vložte ho do konzole DevTools prohlížeče na cílové stránce.

(() => {
const botId = '06b4e39c-56b7-47e1-2a91-08de539d8b24';
const env = 'prod';
const baseUrl = 'https://app.siesta.ai';
const scriptSrc = baseUrl + '/chat-widget/chat-widget.js';

const mountWidget = () => {
document
.querySelectorAll('siestaai-chat-widget[data-siesta-preview="true"]')
.forEach((el) => el.remove());

const widget = document.createElement('siestaai-chat-widget');
widget.setAttribute('data-chatbot-id', botId);
widget.setAttribute('data-base-url', baseUrl);
widget.setAttribute('data-environment', env);
widget.setAttribute('data-siesta-preview', 'true');
document.body.appendChild(widget);
};

if (customElements.get('siestaai-chat-widget')) {
mountWidget();
return;
}

const existingScript = Array.from(document.scripts).find((script) => script.src === scriptSrc);
if (existingScript) {
customElements.whenDefined('siestaai-chat-widget').then(mountWidget);
return;
}

const script = document.createElement('script');
script.src = scriptSrc;
script.defer = true;
script.onload = () => customElements.whenDefined('siestaai-chat-widget').then(mountWidget);
script.onerror = () => console.error('Siesta widget script failed to load:', scriptSrc);
document.head.appendChild(script);
})();

Změňte botId, env a baseUrl před sdílením úryvku s jiným vývojářem.

Injektáž Kontextu Stránky

Widget může být spárován s lehkým kontextem veřejné stránky, když by měl asistent pochopit, kde se návštěvník nachází. Držte tento kontext v bezpečí: nezahrnujte cookies, tokeny, skryté hodnoty formulářů, ID účtů nebo soukromá uživatelská data.

<script>
window.siestaWidgetContext = {
pageUrl: window.location.href,
pageTitle: document.title,
selectedText: '',
purpose: 'Pomoci návštěvníkovi pochopit tuto stránku a odpovědět na otázky ohledně produktu.'
};
</script>

Použijte kontext stránky pro lehkou asistenci na stránce, podporu dokumentace, onboarding nebo kvalifikaci potenciálních zákazníků. Pro spolehlivé odpovědi napříč celým webem použijte sběr dat, zdroj podporovaný scraperem nebo připojený nástroj znalostí místo spoléhání se pouze na aktuální DOM.

Ověřený Widget

Použijte režim ověřeného widgetu pro zákaznické portály, intranety nebo partnerské oblasti, kde by se agent měl vyhnout anonymnímu přístupu. Nakonfigurujte ověřený widget v Agents > Interfaces, poté použijte vygenerovaný skript z uživatelského rozhraní produktu. Aktuální vývojářský playground se zaměřuje na smlouvu veřejného widgetu založenou na manifestu, takže ověření ověřeného widgetu by mělo stále probíhat na dedikovaném povrchu pro zákazníky nebo interní testy.

Ověřené nasazení by mělo ověřit:

  • ID klienta Google OAuth patří správnému zákazníkovi nebo prostředí,
  • povolené původy zahrnují cílovou webovou stránku,
  • výzva agenta vysvětluje, co znamená uživatelská identita v tomto portálu,
  • veřejný přístup je zakázán, když by anonymní návštěvníci neměli používat agenta,
  • nastavení ochrany soukromí a uchovávání odpovídají politice zákazníka.

Možnosti Runtime

AtributPovinnéPoužití
data-chatbot-idAnoVybere agenta Siesta AI.
data-base-urlDoporučenoPřipne widget k zamýšlenému hostiteli aplikace Siesta.
data-environmentPouze pro vývojOznačuje náhledové widgety, které používají vývojové prostředí.
data-siesta-previewPouze pro testováníUsnadňuje odstranění injektovaných náhledových widgetů.
Atributy specifické pro autentizaciKdyž jsou povolenyPoužijte vygenerovaný úryvek ověřeného widgetu z Agents > Interfaces.

Kontrolní Seznam pro Nasazení

Před předáním zákazníkovi:

  • Widget se načítá bez chyb v konzoli.
  • Spouštěč se objevuje na zamýšleném místě na desktopu a mobilu.
  • První odpověď odpovídá vybranému agentovi, nikoli jinému prostředí.
  • Veřejná nastavení chatu umožňují pouze zamýšlené schopnosti.
  • Nahrávání souborů, zpětná vazba, viditelnost uvažování a realtime audio odpovídají rozhodnutí produktu.
  • Odkaz na ochranu soukromí otevírá správnou politiku zákazníka.
  • Stránka neposílá tajemství prostřednictvím window.siestaWidgetContext.
  • CSP cílové stránky povoluje chat-widget.js z vybraného hostitele aplikace Siesta.
  • Podpůrný tým ví, které ID agenta a prostředí byly nasazeny.