Preskočiť na obsah
OttoOtto ottoai.sk
SKCZEN
Pre vývojárov

Chat v mobilnej aplikácii

Chat Otta zobrazíte v aplikácii pre Android aj iOS cez webové zobrazenie. Stačí otvoriť jednu adresu, nič sa neinštaluje.

Adresa chatu

https://ottoai.sk/m/<verejný kľúč>?lang=sk

Verejný kľúč je ten istý ako v kóde chatu na webe (data-otto-key). Tajný API kľúč aplikácia nepotrebuje. lang je sk, cs alebo en, bez neho platí jazyk z panela.

Chat Otta otvorený na celú obrazovku telefónu
Chat v aplikácii: na celú obrazovku, bez bubliny.

Čo stránka robí

Udalosti pre aplikáciu

Stránka posiela správy cez most, ktorý aplikácia pripojí. Každá je JSON s "source": "otto".

typeKedy prídeĎalšie polia
readychat sa načítal a je otvorený
closezákazník klikol na krížik alebo stlačil Esc
messageprišla odpoveď Otta alebo správa kolegurole: bot alebo operator
handoffOtto odovzdal rozhovor kolegovi
resolvedkolega rozhovor uzavrel
productClickzákazník klikol na kartu produktuurl
linkzákazník klikol na iný odkazurl
errorchat je vypnutý alebo kľúč neplatíreason: off alebo key

Prihlásený zákazník

Ak chcete, aby kolega videl meno a e-mail prihláseného zákazníka, vložte pred načítaním stránky objekt window.ottoUser. Osobné údaje nikdy neposielajte v adrese. Príklady nižšie to ukazujú pre každú platformu.

Android (Kotlin)

Most pripojte cez androidx.webkit s povoleným pôvodom https://ottoai.sk, nie cez addJavascriptInterface.

val web = WebView(this)
web.settings.javaScriptEnabled = true
web.settings.domStorageEnabled = true

if (WebViewFeature.isFeatureSupported(WebViewFeature.WEB_MESSAGE_LISTENER)) {
    WebViewCompat.addWebMessageListener(web, "ottoChatBridge", setOf("https://ottoai.sk")) { _, sprava, _, _, _ ->
        val u = JSONObject(sprava.data ?: "{}")
        when (u.optString("type")) {
            "close" -> finish()
            "productClick", "link" -> startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(u.optString("url"))))
        }
    }
}
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOCUMENT_START_SCRIPT)) {
    WebViewCompat.addDocumentStartJavaScript(web,
        "window.ottoUser = { name: 'Ján Novák', email: 'jan@example.sk' };", setOf("https://ottoai.sk"))
}
web.loadUrl("https://ottoai.sk/m/pk_vas_kluc?lang=sk")

iOS (Swift)

final class OttoMost: NSObject, WKScriptMessageHandler {
    var zatvor: () -> Void = {}
    func userContentController(_ c: WKUserContentController, didReceive m: WKScriptMessage) {
        guard m.frameInfo.securityOrigin.host == "ottoai.sk", let u = m.body as? [String: Any] else { return }
        switch u["type"] as? String {
        case "close": zatvor()
        case "productClick", "link":
            if let s = u["url"] as? String, let url = URL(string: s) { UIApplication.shared.open(url) }
        default: break
        }
    }
}

let most = OttoMost()
let nastavenie = WKWebViewConfiguration()
nastavenie.userContentController.add(most, name: "ottoChat")
nastavenie.userContentController.addUserScript(WKUserScript(
    source: "window.ottoUser = { name: 'Ján Novák', email: 'jan@example.sk' };",
    injectionTime: .atDocumentStart, forMainFrameOnly: true))
let web = WKWebView(frame: .zero, configuration: nastavenie)
web.load(URLRequest(url: URL(string: "https://ottoai.sk/m/pk_vas_kluc?lang=sk")!))

WKUserContentController si most drží silnou referenciou. Keď obrazovku zatvárate, zavolajte removeScriptMessageHandler(forName: "ottoChat").

React Native

import { WebView } from "react-native-webview";
import { Linking } from "react-native";

<WebView
  source={{ uri: "https://ottoai.sk/m/pk_vas_kluc?lang=sk" }}
  injectedJavaScriptBeforeContentLoaded={"window.ottoUser = { name: 'Ján Novák', email: 'jan@example.sk' }; true;"}
  onMessage={(e) => {
    const u = JSON.parse(e.nativeEvent.data);
    if (u.type === "close") navigation.goBack();
    if (u.type === "productClick" || u.type === "link") Linking.openURL(u.url);
  }}
/>

Flutter

final ovladac = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('OttoChat', onMessageReceived: (sprava) {
    final u = jsonDecode(sprava.message) as Map<String, dynamic>;
    if (u['type'] == 'close') Navigator.of(context).pop();
    if (u['type'] == 'productClick' || u['type'] == 'link') launchUrl(Uri.parse(u['url'] as String));
  })
  ..loadRequest(Uri.parse('https://ottoai.sk/m/pk_vas_kluc?lang=sk'));

webview_flutter nevie vložiť skript pred načítaním stránky, prihláseného zákazníka tu zatiaľ neodovzdáte.

Súkromie a obchody s aplikáciami