Web Plugin

Použijte Web Plugin, když má agent Siesta AI fungovat 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 smlouvu o běhu, bezpečný testovací tok a kontrolní seznam pro nasazení potřebný k vložení widgetu bez odhalení 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 widget přidat, otestovat nebo předat zákazníkovi.

Pokud je cílem společník pro prohlížení koncového uživatele v Chrome nebo Edge namísto vložení na webovou stránku, použijte místo toho Browser Extension. Rozšíření je uživatelsky orientovaný boční panel; Web Plugin je vývojářsky orientovaná integrace na webové stránce.

Smlouva o běhu

Widget má malou smlouvu prohlížeč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 autentizované ID agenta jako data-chatbot-id.
• Předávejte odpovídající hostitele aplikace jako data-base-url.
• Použijte data-environment="dev" pouze pro vývojové nebo náhledové agenty.
• Uchovávejte API klíče a tajemství organizace mimo kód prohlížeče.

Widget může běžet na běžné webové stránce bez Externího API. Používá veřejnou nebo autentizovanou konfiguraci widgetu vybraného agenta z Siesta AI.

Testovací tok

Použijte Widget Playground, když chcete vyhrazený sandbox hostovaný dokumentací pro jednu bublinu widgetu bez kolize s podpůrným widgetem, který běží na zbytku webu dokumentace.

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>

Vývojové náhledové vložení:

<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žijte produkčního agenta pouze po zkontrolování výzev, povolených původů, odkazů na soukromí, nastavení zpětné vazby, nastavení nahrávání souborů a pravidel veřejného přístupu.

Kde získat hodnoty

Hodnota	Zdroj	Poznámky
data-chatbot-id	Agents > Interfaces	Zkopírujte ID agenta z agenta, který by měl odpovídat návštěvníkům.
data-base-url	Prostředí aplikace Siesta	Použijte https://app.siesta.ai pro produkci a https://app-dev.siesta.ai pro vývoj.
data-environment	Cíl nasazení	Vynechejte pro produkci. Použijte dev pro vývojový balíček widgetu.
Auth client ID	Nastavení autentizovaného widgetu v Agents > Interfaces	Požadováno pouze, když by měl widget vynutit přihlášení přes Google.
Odkaz na soukromí	Nastavení veřejného chatu	Musí být nastaveno před použitím widgetu na veřejných stránkách.

Testovací tok

Nemontujte druhý živý testovací widget přímo na této stránce dokumentace. Web dokumentace již provozuje podpůrný widget Siesta a dva widgety na stejné stránce mohou způsobit zavádějící validaci.

Použijte tento tok:

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

DevTools Injektor

Použijte tento úryvek, když zákaznický web blokuje náhledy iframe nebo když potřebujete validovat widget na skutečném DOM před nasazením kódu. Vložte jej 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);
})();

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

Injekce kontextu stránky

Widget může být spárován s lehkým veřejným kontextem stránky, když by asistent měl rozumět, kde se návštěvník nachází. Uchovávejte 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: 'Pomozte návštěvníkovi porozumět této stránce a odpovědět na otázky týkající se produktu.'
  };
</script>

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

Autentizovaný widget

Použijte režim autentizovaného widgetu pro zákaznické portály, intranety nebo partnerské oblasti, kde by agent měl zabránit anonymnímu přístupu. Nakonfigurujte autentizovaný widget v Agents > Interfaces, poté použijte vygenerovaný skript z uživatelského rozhraní produktu. Současné vývojářské hřiště se zaměřuje na veřejnou smlouvu widgetu podporovanou manifestem, takže validace autentizovaného widgetu by měla stále probíhat na vyhrazeném zákaznickém nebo interním testovacím povrchu.

Pokud má organizace povolené onboarding založený na doméně, uživatel, který se poprvé přihlásí do autentizovaného widgetu s schválenou firemní e-mailovou doménou, může být automaticky spojen s touto organizací. Toto chování je řízeno konfigurací onboardingu organizace, nikoli atributem vložení nebo vygenerovaným úryvkem widgetu.

Autentizovaná nasazení by měla ověřit:

• že Google OAuth client ID patří správnému zákazníkovi nebo prostředí,
• povolené původy zahrnují cílový web,
• 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 agenta používat,
• nastavení soukromí a uchovávání odpovídají politice zákazníka.
• uživatel, který se poprvé přihlásí s schválenou doménou, je spojen se zamýšlenou organizací v neprodukčním prostředí.

Možnosti běhu

Atribut	Požadováno	Použití
data-chatbot-id	Ano	Vybere agenta Siesta AI.
data-base-url	Doporučeno	Připne widget k zamýšlenému hostiteli aplikace Siesta.
data-environment	Pouze pro vývoj	Označuje náhledové widgety, které používají vývojové prostředí.
data-siesta-preview	Pouze pro testování	Umožňuje snadné odstranění vložených náhledových widgetů.
Atributy specifické pro autentizaci	Když je povoleno	Použijte vygenerovaný úryvek autentizované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 objeví na zamýšlené pozici na desktopu a mobilu.
• První odpověď odpovídá vybranému agentovi, nikoli jinému prostředí.
• Nastavení veřejného chatu umožňuje pouze zamýšlené schopnosti.
• Nahrávání souborů, zpětná vazba, viditelnost odůvodnění a zvuk v reálném čase odpovídají rozhodnutí produktu.
• Odkaz na soukromí otevírá správnou zákaznickou politiku.
• Stránka neposílá tajemství přes window.siestaWidgetContext.
• Cílový web CSP umožňuje chat-widget.js z vybraného hostitele aplikace Siesta.
• Pro onboarding založený na doméně je testován uživatel s schválenou doménou v cílovém neprodukčním prostředí a neschválené domény se automaticky nepřipojují k organizaci.
• Podpůrný tým ví, které ID agenta a prostředí byly nasazeny.