Intégrer dans une application mobile
Placez l'agent Syncanix dans une application React Native ou Flutter en chargeant le widget web dans une WebView, sans SDK natif.
Le widget Syncanix est un composant web et une WebView est un navigateur : le même embed d'une seule balise qui tourne sur votre site tourne sans changement dans une application React Native ou Flutter. Vous obtenez le chat complet — adapté au mobile, avec la gestion de la zone de sécurité et du clavier virtuel intégrée — sans publier de SDK natif. Cette page est la recette.
Comment ça marche
Il n'y a rien de spécifique au mobile à installer. Vous hébergez une petite page web qui porte le script d'embed standard, puis vous chargez cette page dans une WebView plein écran. Le widget démarre dans la WebView exactement comme dans un navigateur de bureau.
- Hébergez une page qui porte l'embedUne seule page HTML sur votre propre origine HTTPS — souvent une route dédiée comme /assistant — avec la balise de script Syncanix. Ajoutez cette origine à la liste des origines autorisées du widget de votre espace de travail dans le tableau de bord.
- Chargez cette page dans une WebView plein écranPointez react-native-webview ou webview_flutter vers l'URL de la page et laissez-la remplir l'écran. Aucun autre câblage natif n'est nécessaire pour que le chat fonctionne.
La page que vous hébergez
Montez le chat pour qu'il remplisse la WebView, et nommez un fournisseur de jeton que le widget appelle à chaque tour pour agir en tant qu'utilisateur connecté. La méta viewport-fit=cover permet au chat de respecter les zones de sécurité de l'appareil.
<!-- 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>Le script en ligne définit la fonction globale que le widget appelle à chaque tour ; votre code natif définit window.__SYNCANIX_TOKEN__ avant le chargement de la page (ci-dessous).
React Native
Affichez une WebView plein écran et injectez le jeton de l'utilisateur avant le chargement du contenu de la page. Gardez JavaScript activé — il l'est par défaut.
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.
/>
);
}Quand le jeton est renouvelé, transmettez la nouvelle valeur avec webviewRef.injectJavaScript('window.__SYNCANIX_TOKEN__ = "..."; true;').
Flutter
Utilisez webview_flutter avec JavaScript sans restriction, et définissez le jeton au démarrage du chargement de la page.
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);Connecter l'utilisateur
Une WebView ne partage aucune session avec votre application native : le widget ne peut pas savoir qui est connecté tant que vous ne le lui dites pas. Donnez-lui le jeton de l'utilisateur depuis le SDK d'identité de votre application ; le widget agit alors en tant que cet utilisateur, borné par ses propres permissions — le même modèle agir-en-tant-qu'utilisateur que sur le web.
- Le jeton est le JWT de l'utilisateur issu de votre fournisseur d'identité — celui auquel votre API fait déjà confiance.
- Il est lu une fois par tour de chat, si bien qu'un jeton renouvelé est pris en compte automatiquement.
- À la déconnexion, effacez-le (mettez window.__SYNCANIX_TOKEN__ à null) pour que l'assistant cesse d'agir en tant que cet utilisateur.
Avant de publier
- Hébergez la page sur une vraie origine HTTPS (pas un fichier file:// empaqueté) et ajoutez cette origine à la liste des origines autorisées du widget — la liste est comparée par origine.
- Activez JavaScript dans la WebView (React Native : activé par défaut ; Flutter : JavaScriptMode.unrestricted).
- Ajoutez viewport-fit=cover pour que le chat évite l'encoche et l'indicateur d'accueil.
- Laissez le clavier virtuel redimensionner le viewport au lieu de le couvrir ; le widget garde le champ de saisie visible via visualViewport.