Apparence cohérente du widget et des SDK

Définir une apparence partagée

Gardez l'objet d'apparence partagé dans votre configuration de design et transmettez-le au SDK web à l'initialisation ou via updateAppearance. Transmettez le même objet comme option d'apparence du widget natif. Les valeurs prises en charge incluent system, lightSurfaceStyle, les tokens de palette, les métriques de police, le rayon des contrôles, la bordure du panneau et les dimensions. Les valeurs invalides refusent la mise à jour complète au lieu de modifier la surface partiellement.

Utilisez des overrides de plateforme uniquement pour une contrainte réelle comme le safe area ou un passage à la navigation native. Ne dupliquez pas tout le thème pour chaque framework. L'interface du widget natif reste native et ne rend pas le widget web dans une WebView.

const sharedAppearance = {
  mode: "system",
  lightSurfaceStyle: "white",
  tokens: {
    light: { accent: "#2457d6", onAccent: "#ffffff", surface: "#ffffff", text: "#182230" },
    dark: { accent: "#91b4ff", onAccent: "#101828", surface: "#171b23", text: "#f2f4f7" },
  },
};
const platformOverrides = {
  safeArea: { topPx: 0, rightPx: 0, bottomPx: 0, leftPx: 0 },
  keyboard: { resizeMode: "resize", dismissOnSubmit: true },
};

const webWidget = createDobroDeskWidget({
  integrationId: "wgt_0123456789abcdef0123456789abcdef",
  appearance: sharedAppearance,
});
webWidget.updateAppearance(sharedAppearance);

await mobileClient.presentWidget({
  appearance: sharedAppearance,
  platform: platformOverrides,
});

Respecter le mouvement et la mise en page native

Ne définissez pas reduceMotion: false par défaut. Lorsque l'option est omise, les SDK web et natifs suivent la préférence système actuelle de réduction des mouvements. Si votre produit possède un réglage explicite, transmettez le choix de l'utilisateur et synchronisez-le avec l'hôte.

Le presenter natif gère les safe areas, le clavier, le focus et les transitions de plateforme. Gardez les contrôles de l'hôte hors de la surface présentée et masquez un launcher géré par l'app lorsque le widget est ouvert afin que deux contrôles ne se disputent pas la même action.

Localiser les textes intégrés et ceux de l'hôte

L'interface native intégrée est fournie en en, uk, de et es. Le widget web est fourni en en, uk, de, es, fr et pt. Le contrat d'apparence natif permet à un moteur de rendu natif de niveau inférieur de remplacer les clés de texte principales de l'interface du widget, afin qu'une surface native puisse afficher son texte d'interface principal en français ou en portugais. Cela ne fournit pas une locale SDK française ou portugaise complète : les libellés dérivés, comme les rôles d'auteur, les statuts de procédure et de validation ainsi que les autres éléments d'interface générés, suivent toujours le catalogue de locales intégré.

Les wrappers de framework gardent volontairement des options presentWidget limitées à locale, title et subtitle. Ne considérez pas ces options du wrapper comme un catalogue complet de textes et n'affirmez pas que l'interface native possède les six langues intégrées du widget web. Un override de texte n'étend pas l'enum de locales du SDK, ne modifie pas le formatage des nombres ou des dates et ne traduit pas le contenu rédigé par l'intégrateur ou généré côté serveur.

Localisez les entrées de FAQ, les messages et les autres contenus rédigés par votre application dans votre propre application ou backend. Utilisez le même contrat d'apparence et de textes dans les références de chaque plateforme et gardez les overrides propres à la plateforme limités.

Mettre à jour l'apparence sans perdre le travail

1. Appliquez une mise à jour à chaud seulement après avoir validé l'objet complet avec le schéma publié et les limites de contraste.
2. Vérifiez le widget rendu en mode clair, sombre, système et réduction des mouvements. Confirmez que la conversation active et le brouillon du composer restent intacts.
3. Gardez les clés de plateforme inconnues hors de l'objet partagé. Une mise à jour refusée doit conserver la dernière apparence valide et afficher une erreur récupérable à l'hôte.