GUIDE: Using Elements in Iframes

In case you can’t natively integrate the Glisser React SDK into your web application, an alternative solution would be to consider iframing the Elements instead.

In order to achieve this, you will need to create a basic React web application, with different pages for each of the elements you require. A guide on how to create a single page React application with Elements can be found here, just repeat for each page needed.

Assuming you only need to use the commentFeed, slideFeed, and Stream elements, you will end up with a structure like this, for example:

Rather than hard coding session values and onboarding into the Elements on the above pages, it would be wise to use a router library (such as react router dom) within the application to pass through URL variables and make use of our silent login mechanism, documented here. For example, 403 Forbidden where session123 is your Glisser session code, and name@email.com is the attendee identifier.

This way you can pass these details into the iframe, and have the element respond dynamically, loading the correct session with the correct credentials.

1 Like