Jak nasadit WebChat na web

Možnosti nasazení

Je několik možností, jak WebChat do webu nasadit, které se liší podle toho, jak moc je potřeba jeho vzhled nebo chování přizpůsobovat.

a) Rozbalovací chat

Nejrychlejší možnost je jen vložit před koncovou značku </body> jednoduchý kód, který dostanete od tvůrce virtuálního asistenta (VA). Bude vypadat podobně jako v ukázce no-config.html, jen v něm bude vyplněné ID bota. Pro nasazení je samozřejmě možné využít i služby jako např. Google Tag Manager pro jeho vložení bez nutnosti ručního zásahu do kódu.

Design a chování webchatu je pak možné nastavit ze strany Feedyou (nebo v nástroji Designer pokud máte přístup). Všechny domény, kde VA poběží je nutné ručně povolit ze strany Feedyou. Pokud je VA v testovacím režimu, nebude na webu zobrazen, pokud se na konec URL nepřidá #feedbot-test-mode.

b) Chat do vlastního elementu

Pokud je žádoucí upravit vzhled nebo chování chatu, je možné ho vložit do vlastního HTML elementu, který je možné nastylovat po svém. Daný DOM element vložte jako druhý parametr funkce BotChat.App. Chat se pak vyrenderuje do něj. Element nemusí být nutně vyskakovací okno, klidně může jít přímo o součást stránky.

Pokud je chat při načtení stránky skrytý a zobrazuje se až na základě akce uživatele, je důležité, aby se BotChat.App volalo až při jeho zobrazení a předešlo se tím zbytečným voláním VA.

Ukázky možného použití jsou k dispozici na GitHubu, a to např.:

c) Pokročilé způsoby nasazení

WebChat je otevřená knihovna postavená na Reactu, takže je možné ji snadno zapojit do stávající React aplikace nebo jakýmkoli způsobem upravovat její chování. Pro více informací prosím kontaktujte Feedyou.

d) Vyzkoušení na libovolné stránce

Pokud chcete jen vyzkoušet, jak bude VA na libovolné stránce vypadat, je možné do následujícího kódu nastavit odpovídající údaje a celý ho vložit do konzole ve webovém inspektoru (většinou stačí pravý klik kamkoli na stránku a pak Inspect nebo Prozkoumat). Tento kód NEPOUŽÍVEJTE v produkčním prostředí, k tomu jsou určeny možnosti a) - c). Pokud je bot stále v testovacím režimu, je nutné nejprve na konec URL dané stránky přidat #feedbot-test-mode

(function (f,y,b,o,t,s){(t = y.createElement(b)), (s = y.getElementsByTagName(b)[0]);t.async = 1;t.src = o;t.onload=function(){
BotChat.App({
  bot: { id: 'feedbot-...' }, // najdeme na konci "Code" odkazu v "Channels settings" sekci Designeru
  channel: { id: '...' }, // je 6ti pismenny kod ktery najdeme na konci "Preview" odkazu u daneho WebChatu v "Channels settings" sekci Designeru
})
};s.parentNode.insertBefore(t, s);
})(window,document,"script","https://feedyou.azureedge.net/webchat/latest/botchat-es5.js");
(function (f,y,b,o,t,s){(t = y.createElement(b)), (s = y.getElementsByTagName(b)[0]);t.rel = 'stylesheet';t.type = 'text/css';t.href = o;s.parentNode.insertBefore(t, s);
})(window,document,"link","https://feedyou.azureedge.net/webchat/latest/botchat.css");

Propojení s botem

Nehledě na to, kterou metodu vložení zvolíte, je nutné nastavit několik základních nastavení pro propojení se správným botem. Tyto údaje jsou v ukázkách vyznačeny pomocí ... a dostanete je od Feedyou - konkrétně jde o directLine.secret a bot.id. Během testování je možné využít hodnoty uvedené v komentáři v dané ukázce. 

Další nastavení

Existují i další nastavení, která je možné využít pro úpravy chování WebChatu:

directLine: { secret: '...' },
bot: { id: '...', name: 'Chatbot' },
theme: { mainColor: '#d83838' },
locale: 'en', // Zkratka jazyka, ve kterém mají být prvky webchatu, např. text inputu pro text
disableInputWhenNotNeeded: true // Skrýt input pro text, dokud není uživatel vybídnut, např. pomocí promptu

Úpravy vzhledu

Vzhled chatu je pak možné libovolně přizpůsobit pomocí CSS stylů - ideálně pravidla všech selectorů začínat pomocí .wc-app. Díky otevřenosti k takovýmto možnostem customizace se může na druhou stranu stát, že bude WebChat nepříznivě ovlivněn stylováním webu (např. obecná pravidla na základních elementech jako <button> apod.) - v tomto případě je nutné tyto problémy vyresetovat upřesňujícími zacílenými pouze na potomky .wc-app.

URL parameters

WebChat je možné ovlivnit následujícími parametry v URL vhodnými např. během testování:

{
  // ...
  userData: { zdroj: location.hash.substr(1) }, // vše za # v URL se předá do proměnné "zdroj"
  introDialog: { id: location.hash.substr(1) === 'xyz' : 'abc' : 'main' } // pokud je v URL #xyz, spustit dialog "abc"
}

Programové otevření chatu

Pokud je potřeba chat otevřít při nějaké akci na stránce, např. kliku na tlačítko, je k tomu možné využití čistý JS emulující kliknutí na hlavičku zavřeného chatu.

document.querySelector(".feedbot-wrapper.collapsed .feedbot-header").click()

Komunikace na pozadí

WebChat může s VA kromě přenosu klasických zpráv zpráv komunikovat i na pozadí pomocí událostí (tzv. back-channel).

Bot → WebChat

Následuje ukázka, jak zareagovat na libovolnou událost nadefinovanou kdekoli v komunikačním stromu přesně ve chvíli, kdy daný uživatel místem prochází:

// místo klasického nastavování secretu v propertou directLine je potřeba vytvořit
// objekt BotConnection a ten předat do nastavení
var botConnection = new BotChat.DirectLine({
  secret: "...",
});

BotChat.App({
  botConnection: botConnection,
  bot: { id: "feedbot-..." },
});

// na něm je pak možné zaregistrovat callbacky na určité události a z activity.value
// použít libovolnou hodnotu předanou z bota
botConnection.activity$.filter(function (activity) {
  return (
    activity.type === "event" && activity.name === "set-reload-timeout"
  );
}).subscribe(function (activity) {
  setTimeout(function () {
    location.reload();
  }, parseInt(activity.value || 60000));
});
WebChat → Bot

Naopak stránka, na které WebChat běží může v botovi vyvolat některou z následujících událostí pomocí jednoduše pomocí triggeru události na window objektu:

If support of Internet Explorer is required, please provide use fallback to support custom event creation there.

 

Revision #18
Created 19 February 2020 09:38:10
Updated 21 July 2022 08:06:32 by Jan Dvořák