2 min read
Einbindung interaktiver Webinhalte auf der Prenly-Startseite mithilfe der JS-Bridge
In dieser Anleitung wird erläutert, wie Sie Ihre eigenen interaktiven Webinhalte (wie Rätsel, Formulare oder benutzerdefinierte Dashboards) in die Startseite Ihrer App einbetten und mithilfe unserer JavaScript (JS)-Bridge eine Kommunikation mit der nativen Prenly-App herstellen können.
Beachten Sie, dass das Helpdesk-Team die JS-Bridge erst aktivieren muss, bevor sie genutzt werden kann.
Was ist JS Bridge?
JS Bridge ist eine leistungsstarke Funktion, die es Ihrer Webkomponente (einer eingebetteten Webseite) ermöglicht, mit der nativen App-Shell zu kommunizieren, in der sie ausgeführt wird. Dank dieser Kommunikation muss sich ein Nutzer nur einmal in der App anmelden, kann dann aber auch die gesperrten Webinhalte anzeigen und muss nicht mehr als einmal seine Zustimmung zu Cookies erteilen.
Erfahren Sie hier mehr über JS Bridge
Schritt 1: Erstellen Sie die Webkomponente im Prenly Workspace
Bevor Sie JS Bridge nutzen können, müssen Sie zunächst Ihre Webinhalte im Prenly Workspace definieren:
-
Navigieren Sie zu Ihrer Anwendung und dann zur Startseite.
-
Fügen Sie eine neue Komponente vom Typ „Webinhalt“ hinzu.
-
Notieren Sie sich nach der Erstellung die angegebene „Eindeutige Kennung“. Diese ID ist unerlässlich, um Ihren Webcode mit dieser spezifischen Komponenteninstanz zu verbinden.
Schritt 2: Implementieren Sie die JS Bridge in Ihren Webinhalt
Damit die App Ihre Webkomponente erkennt und die Kommunikation ermöglicht wird, installieren Sie das npm-Paket „prenly-js-bridge“ als Teil Ihres Build-Prozesses und rufen Sie die SDK-Funktionen aus Ihrem Anwendungscode auf.
Kernfunktion: setComponentData
Diese Funktion registriert Ihre Webkomponente bei der nativen App.
Sie müssen sie aufrufen, damit die Integration funktioniert.
import PrenlyAppSDK från "prenly-js-bridge";
const { api } = new PrenlyAppSDK();
api?.setComponentData({
id: "your-unique-identifier-here",
items: [
{
id: "1",
header: "Hello World",
subheader: "Example item",
deeplink_url: "https://example.com/",
image_url: "https://example.com/image.jpg",
image_width: 1200, // optional
image_height: 800, // optional
},
],
});-
id (erforderlich): Dieses Feld muss genau die „Eindeutige Kennung“ enthalten, die Sie in Schritt 3 aus dem Prenly-Workspace kopiert haben.
Zusammenfassung und bewährte Vorgehensweisen
-
Erstellen Sie die Komponente „Web Content“ immer zuerst im Workspace, um Ihre eindeutige ID zu erhalten.
-
Das Feld „id“ in Ihrem `setComponentData`-Aufruf ist obligatorisch und muss exakt übereinstimmen.
-
Verwenden Sie die JS-Bridge, um ein nahtloses Benutzererlebnis zu schaffen, insbesondere für die Authentifizierung (SSO), indem Sie Benutzerdaten wie ein JWT von der App an Ihren Web-Content übergeben.