In eine mobile App einbetten
Bringen Sie den Syncanix-Agenten in eine React-Native- oder Flutter-App, indem Sie das Web-Widget in einer WebView laden – kein natives SDK nötig.
Das Syncanix-Widget ist eine Web-Komponente und eine WebView ist ein Browser, daher läuft dasselbe Ein-Tag-Embed, das auf Ihrer Website läuft, unverändert in einer React-Native- oder Flutter-App. Sie erhalten den vollständigen Chat – mobiloptimiert, mit integrierter Behandlung von Sicherheitsbereich und Bildschirmtastatur – ohne ein natives SDK zu veröffentlichen. Diese Seite ist das Rezept.
So funktioniert es
Es gibt nichts Mobilspezifisches zu installieren. Sie hosten eine kleine Webseite, die das Standard-Embed-Skript trägt, und laden diese Seite dann in einer Vollbild-WebView. Das Widget startet in der WebView genau wie in einem Desktop-Browser.
- Hosten Sie eine Seite mit dem EmbedEine einzelne HTML-Seite auf Ihrer eigenen HTTPS-Origin – oft eine dedizierte Route wie /assistant – mit dem Syncanix-Skript-Tag. Fügen Sie diese Origin der Widget-Origin-Zulassungsliste Ihres Arbeitsbereichs im Dashboard hinzu.
- Laden Sie diese Seite in einer Vollbild-WebViewRichten Sie react-native-webview oder webview_flutter auf die URL der Seite und lassen Sie sie den Bildschirm füllen. Für den Chat ist keine weitere native Verdrahtung erforderlich.
Die Seite, die Sie hosten
Binden Sie den Chat so ein, dass er die WebView füllt, und benennen Sie einen Token-Provider, den das Widget in jeder Runde aufruft, um als der angemeldete Benutzer zu handeln. Das Meta viewport-fit=cover lässt den Chat die Sicherheitsbereiche des Geräts respektieren.
<!-- https://help.yourapp.com/assistant — a page you host, loaded by the WebView -->
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<style>
html, body { margin: 0; height: 100%; }
#assistant { height: 100vh; }
</style>
<div id="assistant"></div>
<script
type="module"
src="https://cdn.syncanix.com/widget.js"
data-key="pk_live_..."
data-chat-size="embedded"
data-mount-target="#assistant"
data-token-provider="getSyncanixToken"
></script>
<script>
// The widget calls this once per turn; return the token your app injected.
window.getSyncanixToken = () => window.__SYNCANIX_TOKEN__ ?? undefined;
</script>Das Inline-Skript definiert die globale Funktion, die das Widget pro Runde aufruft; Ihr nativer Code setzt window.__SYNCANIX_TOKEN__ vor dem Laden der Seite (unten).
React Native
Rendern Sie eine Vollbild-WebView und injizieren Sie das Token des Benutzers, bevor der Seiteninhalt geladen wird. Lassen Sie JavaScript aktiviert – es ist standardmäßig an.
import { WebView } from 'react-native-webview';
export function AssistantScreen({ userToken }: { userToken: string }) {
return (
<WebView
source={{ uri: 'https://help.yourapp.com/assistant' }}
// Hand the signed-in user's token to the page before its content loads.
injectedJavaScriptBeforeContentLoaded={
`window.__SYNCANIX_TOKEN__ = ${JSON.stringify(userToken)}; true;`
}
// JavaScript is enabled by default; the widget needs it.
/>
);
}Wenn das Token erneuert wird, übergeben Sie den neuen Wert mit webviewRef.injectJavaScript('window.__SYNCANIX_TOKEN__ = "..."; true;').
Flutter
Verwenden Sie webview_flutter mit uneingeschränktem JavaScript und setzen Sie das Token, sobald die Seite zu laden beginnt.
final controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(NavigationDelegate(
onPageStarted: (_) => controller.runJavaScript(
'window.__SYNCANIX_TOKEN__ = ${jsonEncode(userToken)};',
),
))
..loadRequest(Uri.parse('https://help.yourapp.com/assistant'));
// In build(): return WebViewWidget(controller: controller);Den Benutzer anmelden
Eine WebView teilt keine Sitzung mit Ihrer nativen App, daher kann das Widget nicht wissen, wer angemeldet ist, sofern Sie es ihm nicht mitteilen. Übergeben Sie ihm das Token des Benutzers aus dem Identitäts-SDK Ihrer App; das Widget handelt dann als dieser Benutzer, begrenzt durch dessen eigene Berechtigungen – dasselbe Handeln-als-Benutzer-Modell wie im Web.
- Das Token ist das JWT des Benutzers von Ihrem Identitätsanbieter – dasselbe, dem Ihre API bereits vertraut.
- Es wird einmal pro Chat-Runde gelesen, sodass ein erneuertes Token automatisch übernommen wird.
- Löschen Sie es bei der Abmeldung (setzen Sie window.__SYNCANIX_TOKEN__ auf null), damit der Assistent aufhört, als dieser Benutzer zu handeln.
Bevor Sie veröffentlichen
- Hosten Sie die Seite auf einer echten HTTPS-Origin (kein gebündeltes file://-Asset) und fügen Sie diese Origin der Widget-Origin-Zulassungsliste hinzu – die Liste wird nach Origin abgeglichen.
- Aktivieren Sie JavaScript in der WebView (React Native: standardmäßig an; Flutter: JavaScriptMode.unrestricted).
- Fügen Sie viewport-fit=cover hinzu, damit der Chat die Notch und den Home-Indikator freihält.
- Lassen Sie die Bildschirmtastatur den Viewport verkleinern, statt ihn zu verdecken; das Widget hält den Eingabebereich über visualViewport sichtbar.