Widget und mobile SDKs einheitlich anpassen

Ein gemeinsames Erscheinungsbild definieren

Halten Sie das gemeinsame Appearance-Objekt in Ihrer Designkonfiguration und übergeben Sie es dem Web-SDK bei der Initialisierung oder mit updateAppearance. Übergeben Sie dasselbe Objekt als Appearance-Option des nativen Widgets. Unterstützt werden system, lightSurfaceStyle, Palettentoken, Schriftmetriken, Control-Radius, Panel-Rahmen und Dimensionen. Ungültige Werte lehnen das vollständige Update ab, statt die Oberfläche teilweise zu ändern.

Verwenden Sie Plattform-Overrides nur für echte Plattformbeschränkungen wie Safe-Area-Platzierung oder die Übergabe an native Navigation. Verzweigen Sie nicht das gesamte Theme für jedes Framework. Die native Widget-Oberfläche bleibt nativ und rendert das Web-Widget nicht in einer 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,
});

Bewegung und natives Layout respektieren

Setzen Sie reduceMotion: false nicht als Standard. Wenn die Option fehlt, folgen Web- und native SDKs der aktuellen Systempräferenz für reduzierte Bewegung. Wenn Ihr Produkt eine ausdrückliche Einstellung besitzt, übergeben Sie diese Kundenwahl bewusst und halten Sie sie mit dem Host synchron.

Der native Presenter besitzt Safe Areas, Tastaturbewegung, Fokus und Plattformübergänge. Halten Sie Host-Steuerelemente außerhalb der präsentierten Oberfläche und verbergen Sie einen app-eigenen Launcher, solange das Widget offen ist, damit nicht zwei Steuerelemente um dieselbe Aktion konkurrieren.

Integrierte und vom Host erstellte Texte lokalisieren

Die integrierte native UI wird mit en, uk, de und es ausgeliefert. Das Web-Widget wird mit en, uk, de, es, fr und pt ausgeliefert. Der native Appearance-Vertrag ermöglicht einem nativen Renderer auf niedrigerer Ebene, die wichtigsten Textschlüssel der Widget-UI zu überschreiben, sodass eine native Oberfläche den Haupttext der UI auf Französisch oder Portugiesisch anzeigen kann. Das stellt keine vollständige französische oder portugiesische SDK-Locale bereit: Abgeleitete Beschriftungen wie Autor-Rollen, Verfahrens- und Validierungsstatus sowie andere generierte UI folgen weiterhin dem integrierten Locale-Katalog.

Framework-Wrapper halten die presentWidget-Optionen bewusst klein: locale, title und subtitle. Behandeln Sie diese Wrapper-Optionen nicht als vollständigen Copy-Katalog und behaupten Sie nicht, dass die native UI die sechs integrierten Web-Widget-Sprachen besitzt. Ein Copy-Override erweitert weder das SDK-Locale-Enum noch ändert er die Zahlen- oder Datumsformatierung oder übersetzt von Ihnen oder serverseitig erstellte Inhalte.

Lokalisieren Sie selbst erstellte FAQ-Einträge, Nachrichten und andere Kundeninhalte in Ihrer Anwendung oder Ihrem Backend. Verwenden Sie auf den Plattform-Referenzseiten denselben Appearance- und Copy-Vertrag und halten Sie plattformspezifische Overrides eng begrenzt.

Erscheinungsbild aktualisieren, ohne Arbeit zu verlieren

1. Wenden Sie ein Laufzeit-Update erst an, nachdem das vollständige Objekt gegen das veröffentlichte Schema und Kontrastgrenzen geprüft wurde.
2. Prüfen Sie das gerenderte Widget in hellen, dunklen, systembezogenen und reduzierten Bewegungsmodi. Bestätigen Sie, dass aktive Unterhaltung und Composer-Entwurf nach dem Update erhalten bleiben.
3. Halten Sie unbekannte Plattformschlüssel aus dem gemeinsamen Objekt heraus. Ein abgelehntes Update muss das letzte gültige Erscheinungsbild erhalten und einen behebbaren Host-Fehler anzeigen.