Integrating Interactive Web Content on the Prenly Start Page using the JS Bridge

What is JS Bridge?

JS Bridge is a powerful feature that allows your web component (an embedded webpage) to communicate with the native app shell it's running inside. The communication can mean that a user only has to log into the app once, but are then also able to view the locked web content and aren’t required to consent to cookies more than once. 

Read more about JS Bridge here

Step 1: Create the Web component in Prenly Workspace

Before you can use JS Bridge, you must first define your web content within the Prenly Workspace:

1. Navigate to your application, and then Start page.

2. Add a new component of the type "Web Content".

3. After creating it, make a note of the "Unique identifier" provided. This ID is essential for connecting your web code to this specific component instance.

Step 2: Implement the JS Bridge in your web content

To make the app aware of your web component and enable communication, install the prenly-js-bridge npm package as part of your build process and call the SDK functions from your application code.

Core Function: setComponentData

This function registers your web component with the native app. 
You must call it for the integration to work.

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 (Required): This field must contain the exact "Unique identifier" you copied from the Prenly Workspace in Step 3.

Summary & best practices

• Always create the "Web Content" component in Workspace first to get your Unique ID.

• The id field in your setComponentData call is mandatory and must be an exact match.

• Use JS Bridge to create a seamless user experience, especially for authentication (SSO) by passing user data like a JWT from the app to your web content.

• Reference: https://github.com/Textalk/prenly-js-bridge