Skip to content
PandaSuite Docs

Web

The Web component allows you to integrate web content directly into your application, either via an online URL or by embedding custom HTML/CSS/JavaScript code.

This flexibility lets you enrich your application with web features without requiring users to leave the app environment.

Beyond simple display, it is also possible to trigger events and create actions based on user interactions with the web content (e.g., clicking a button).

Integrating a blog into a mobile app

Use cases for the Web component

The Web component is ideal for integrating interactive and dynamic web content into your application. Here are some use cases:

  • Convert a website into a mobile and desktop app: If you already have a website, you can integrate it directly into an app using the Web component. This approach is detailed in our article: Convert a website into an app.

  • Displaying dynamic dashboards: Integrating dashboards from Google Data Studio, Power BI, or other online reporting solutions.

  • Embedding HTML5 games: If you develop HTML5 games, they can be directly integrated and played within your application.

  • Embedding an authentication form: From your website.

Methods to integrate Web content

You can embed web content using several methods:

  • Using an online web page (URL): Display a webpage by simply specifying its URL. Ensure the site is secure (HTTPS) and allows iframe embedding.

  • Embedding HTML/CSS/JavaScript code: Import a ZIP file containing your web content. This method is ideal for custom animations or specific functionalities.

💡 With the Open URL action, you can also link to a URL, but the user must open an external browser window to access the content.

Technical considerations based on platform

Depending on your project format (web, mobile…), the component uses an appropriate integration mode:

  • For a web app: The content is displayed using an iframe, allowing you to embed an external webpage directly into your application.

  • On iOS and Android: The content is rendered via a native webview, ensuring smooth and optimized integration for mobile devices.

Setting up the Web component

Adding the Web Component

In PandaSuite Studio, open your project.

In the Components tab, search for Web and drag the component into your interface.

Configuring the content

Displaying an online Web page (URL)

In the Web component properties, select Mode: Online.

Enter the URL of the page you want to display.

Ensure the URL starts with https://.

Double-click the component to test the display and preview your project.

Example of an embedded page

💡 If nothing appears, check that the domain is HTTPS. Only secure sites are allowed! However, not all HTTPS sites allow iframe usage. In this case, you may need to use the Open URL action.

💡 To embed a YouTube, Facebook video, or any audio from an online platform, use the URL Media Player component.

Embedding local HTML/CSS/JavaScript files

In the Web component properties, select Mode: Offline.

Click Import a ZIP file.

Upload your ZIP file containing all HTML, CSS, and JavaScript files.

Ensure the index.html file is placed at the root of the ZIP folder.

⚠️ To be readable, your files must be at the root of your ZIP file to be directly accessible upon extraction. Do not group your files into a folder before compressing them into .ZIP.

Example ZIP file structure

Interactive actions

Triggering an action based on connection status

If your content is online, your user must be connected to the internet to view it.

Using the Offline (Disconnected) triggers, you can display a notification to offline users.

Offline trigger notification

Interacting with web content

The Web component allows advanced interactions between the application and web content using the PandaBridge library. For example, you can send messages between your app and embedded HTML code.

If you’re embedding a login form from a website, it is useful to know when a user logs in so you can automatically redirect them to another screen within your app.

To send or receive events between web content and your application, create markers.

Creating a marker

A marker triggers an event or serves as an action target to customize the user experience. You can create multiple markers.

Select your Web component and click Edit. In the Edit window on the left, click + Add Marker. An ID is automatically generated; save this ID to use it on your website for proper connection.

Web component markers

In PandaSuite Studio, this marker appears as a trigger in the Actions window of the Web component. You can also act on this marker using the Act on a Component action:

Marker actions

Triggering this marker from a Web page

On your webpage administration (CMS like WordPress, Shopify…) or in the code, you can use the PandaBridge library to trigger the marker:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/pandasuite-bridge.min.js"></script>

Use the following syntax to send the marker:

PandaBridge.send("marker8622");

Or send parameters:

PandaBridge.send("marker8622", [{ url: "https://pandasuite.com" }]);