Insertar en una app móvil

Lleva el agente de Syncanix a una app de React Native o Flutter cargando el widget web en un WebView, sin necesidad de un SDK nativo.

El widget de Syncanix es un componente web y un WebView es un navegador, así que el mismo embed de una sola etiqueta que funciona en tu sitio web funciona sin cambios dentro de una app de React Native o Flutter. Obtienes el chat completo —adaptable al móvil, con gestión de área segura y teclado en pantalla integrada— sin publicar un SDK nativo. Esta página es la receta.

Cómo funciona

No hay nada específico para móvil que instalar. Alojas una pequeña página web que lleva el script de embed estándar y luego cargas esa página en un WebView a pantalla completa. El widget arranca dentro del WebView igual que en un navegador de escritorio.

Aloja una página que lleve el embedUna sola página HTML en tu propio origen HTTPS —a menudo una ruta dedicada como /assistant— con la etiqueta de script de Syncanix. Añade ese origen a la lista de orígenes permitidos del widget de tu espacio de trabajo en el panel.
Carga esa página en un WebView a pantalla completaApunta react-native-webview o webview_flutter a la URL de la página y deja que ocupe toda la pantalla. No hace falta ningún otro cableado nativo para que el chat funcione.

La página que alojas

Monta el chat para que ocupe el WebView y nombra un proveedor de token que el widget llame en cada turno para actuar como el usuario que ha iniciado sesión. La meta viewport-fit=cover permite que el chat respete las áreas seguras del dispositivo.

<!-- 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>

El script en línea define la función global que el widget llama en cada turno; tu código nativo establece window.__SYNCANIX_TOKEN__ antes de que la página cargue (abajo).

React Native

Renderiza un WebView a pantalla completa e inyecta el token del usuario antes de que cargue el contenido de la página. Mantén JavaScript activado: lo está de forma predeterminada.

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.
    />
  );
}

Cuando el token se renueve, envía el nuevo valor con webviewRef.injectJavaScript('window.__SYNCANIX_TOKEN__ = "..."; true;').

Flutter

Usa webview_flutter con JavaScript sin restricciones y establece el token cuando la página empiece a cargar.

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);

Iniciar sesión del usuario

Un WebView no comparte sesión con tu app nativa, así que el widget no puede saber quién ha iniciado sesión a menos que se lo digas. Entrégale el token del usuario desde el SDK de identidad de tu app; el widget actúa entonces como ese usuario, limitado por sus propios permisos, con el mismo modelo actuar-como-usuario que en la web.

El token es el JWT del usuario de tu proveedor de identidad, el mismo en el que tu API ya confía.
Se lee una vez por turno de chat, así que un token renovado se recoge automáticamente.
Al cerrar sesión, bórralo (establece window.__SYNCANIX_TOKEN__ en null) para que el asistente deje de actuar como ese usuario.

Antes de publicar

Aloja la página en un origen HTTPS real (no un recurso file:// empaquetado) y añade ese origen a la lista de orígenes permitidos del widget: la lista se compara por origen.
Activa JavaScript en el WebView (React Native: activado por defecto; Flutter: JavaScriptMode.unrestricted).
Añade viewport-fit=cover para que el chat evite el notch y el indicador de inicio.
Deja que el teclado en pantalla redimensione el viewport en lugar de taparlo; el widget mantiene el redactor a la vista mediante visualViewport.

Próximos pasos

Insertar en tu appLa instalación web completa: SPAs, identidad y CSP.ConfiguraciónCada atributo data-* que el embed acepta.