Web component

Embed a ZIP file or display a web page with the web component. Trigger and receive markers from your web page with the PandaBridge library.

Insert a ZIP

Within the Web component, you can insert any ZIP file. This is how you can insert in your application your own code, an animation or any web export from another tool (Powerpoint,...).

In the Properties window, choose Offline (local) and insert your zip.

Be careful to put your files at the root: they must be directly accessible from the extraction so that they can be used. Do not group your files in a folder before compression (see example below).

exemple fichier zip

If you wish to go further and create a communication between the ZIP file (send & receive information), please refer to the article on the custom component.

Display a web page

Use the Web component to display a web page in the form of an iframe (e.g. an article from your blog). 

Insert the Web component. In the Properties window, choose Online and specify the URL.

The URL must be in HTTPS.

 Tip: as this content is online, users must be connected to the Internet to view it. Using the Connected (online) / Disconnected (offline) triggers, you can send a notification to offline users.

Trigger a marker from a web page

This is not only display, you can also interact with the content of the web page thanks to the PandaBridge library.

For example, you want to integrate the login of your Wordpress site and trigger an action as soon as the user is authenticated (for example a screen change)?

In PandaSuite Studio, create the required markers from the Edit window of the component. For example marker8622


In your Wordpress site, include the PandaBridge file. It is available from this download link:  pandabridge.js

When appropriate (for example on the login URL page), execute the javascript code to send an event: PandaBridge.send('marker8622');

Back in PandaSuite Studio, you just have to associate the event to the chosen action: Go to next screen.


Receive a marker in a web page

It is also possible to receive a marker defined in PandaSuite Studio.

For example, if you want to create your navigation menu in the studio and redirect the buttons to different web contents.

In your Wordpress site, include the PandaBridge file. It is available from this download link: pandabridge.js

Use the following function:

PandaBridge.setSnapshotData(function (pandaData) {<br>// <a href="http://pandaData.data.id">pandaData.data.id</a><br>});

Still need help? Contact Us Contact Us