2 min read
Integrera interaktivt webbinnehåll på Prenlys startsida med hjälp av JS Bridge
Den här guiden beskriver hur du bäddar in ditt eget interaktiva webbinnehåll (t.ex. pussel, formulär eller anpassade instrumentpaneler) på appens startsida och får det att kommunicera med den inbyggda Prenly-appen med hjälp av vår JavaScript (JS)-brygga.
Observera att helpdeskteamet måste aktivera JS-bridge innan den kan användas.
Vad är JS Bridge?
JS Bridge är en kraftfull funktion som gör det möjligt för din webbkomponent (en inbäddad webbsida) att kommunicera med det inbyggda appskalet som den körs i. Kommunikationen innebär att en användare bara behöver logga in i appen en gång, men sedan också kan se det låsta webbinnehållet och inte behöver ge sitt samtycke till cookies mer än en gång.
Steg 1: Skapa webbkomponenten i Prenly Workspace
Innan du kan använda JS Bridge måste du först definiera ditt webbinnehåll i Prenly Workspace:
-
Gå till din applikation och sedan till startsidan.
-
Lägg till en ny komponent av typen ”Webbinnehåll”.
-
När du har skapat den ska du anteckna den ”Unika identifieraren” som anges. Detta ID är nödvändigt för att koppla din webbkod till just denna komponentinstans.
Steg 2: Implementera JS Bridge i ditt webbinnehåll
För att appen ska känna igen din webbkomponent och möjliggöra kommunikation ska du installera npm-paketet prenly-js-bridge som en del av din byggprocess och anropa SDK-funktionerna från din applikationskod.
Kärnfunktion: setComponentData
Denna funktion registrerar din webbkomponent i den inbyggda appen.
Du måste anropa den för att integrationen ska fungera.
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 (obligatoriskt): Detta fält måste innehålla exakt den ”unika identifieraren” som du kopierade från Prenly Workspace i steg 3.
Sammanfattning och bästa praxis
-
Skapa alltid komponenten ”Web Content” i Workspace först för att få ditt unika ID.
- Fältet id i ditt setComponentData-anrop är obligatoriskt och måste stämma exakt.
-
Använd JS Bridge för att skapa en smidig användarupplevelse, särskilt för autentisering (SSO), genom att överföra användardata som en JWT från appen till ditt webbinnehåll.