# Web

> Learn how PandaSuite's Web component allows you to embed web content into an application.

https://docs.pandasuite.com/essentials/components/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).

[Image: Smartphone displaying a blog inside a mobile app through the Web component, with an article about user interface elements]

## 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](https://docs.pandasuite.com/tutorials/tips/convert-web-to-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.

> **Info**
>
> 💡 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 **Type**: **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.

[Image: Web component in edit mode, Type Online with an https URL: the shop page of a garden plant displays in the screen]

> **Info**
>
> 💡 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.

> **Info**
>
> 💡 To embed a YouTube, Facebook video, or any audio from an online platform, use the [URL Media Player](https://docs.pandasuite.com/essentials/components/url-media-player/) component.

#### Embedding local HTML/CSS/JavaScript files

In the Web component properties, select **Type**: **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.

> **Warning**
>
> ⚠️ 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.

[Image: Finder menus. Do: compress the files themselves (css, index.html…), 4 items. Don't: compress the private folder that holds them]

## 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.

[Image: Action window of the Web component: after its markers, the Online and Offline triggers, used to notify offline users]

## 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](https://docs.pandasuite.com/essentials/interactions/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 double-click it (or click on its arrow in the Objects List) to enter its edit mode. In the **Markers** panel on the left, click **+**. An ID is automatically generated; save this ID to use it on your website for proper connection.

[Image: Web component in edit mode: on the left, the + button of the Markers panel has created two markers, marker17101 and marker17150]

In PandaSuite Studio, this marker appears as a trigger in the **Actions** panel of the Web component. You can also act on this marker using the **Interact with a component** action:

[Image: Action window of the Web component: the two markers head the list of triggers, before Online and Offline]

### Triggering this marker from a Web page

On your webpage administration (CMS like WordPress, Shopify...) or in the code, you have several ways to call the PandaBridge library and trigger the marker.

#### By inserting the JavaScript library

Insert the following code in your web page to load the library:

```html
<script src="https://cdn.jsdelivr.net/npm/pandasuite-bridge/lib/pandasuite-bridge.min.js"></script>
```

Use the following syntax to send the marker:

```javascript
PandaBridge.send("marker8622");
```

Or send parameters:

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

> **Note**
>
> Marker parameters are available in the action flow triggered by that marker. They do not create persistent fields in the data binding picker under **From a component**.

#### Or by using a URL

If you don't have access to the web page code, you can also trigger the marker automatically with the following URL. You can attach this URL to a button or to a redirect action.

```text
https://pandasuite.com/bridge/send?name=marker8622
```

### Associate an action with a web marker

Once the marker is set up in your web page and in your application, all that's left is to create the action.

Select your **Web** component, open the **Actions** panel and add an action. Choose your marker as the trigger and the action of your choice, for example **Change screen** then **Next screen**.

[Image: Action window of the Web component: the Marker ID marker17101 trigger runs the Next screen action, with Interval, Loop and Delay options]

### Receive a marker in a web page

You can also receive a marker defined in PandaSuite Studio.

For example, to build native navigation in the application and open different web content on click.

Use the following function:

```javascript
PandaBridge.setSnapshotData(function (pandaData) {
  // Read pandaData.data.id here
});
```

## Using `pandasuite.json` metadata (advanced)

Markers are a quick way to send simple events between your Web content and PandaSuite. For more structured integrations (custom properties, events, and actions that appear in Studio), you can also expose a `pandasuite.json` manifest next to your web content.

This is the same manifest system used by [Custom components](https://docs.pandasuite.com/essentials/components/custom-components/): Studio reads the file and generates the right-side properties panel and entries in the **Actions** window.

### Add `pandasuite.json` next to your web content

- **Online**: make sure `pandasuite.json` is reachable from the same base URL as your page (for example: `https://example.com/widget/pandasuite.json`).
- **Offline (ZIP)**: place `pandasuite.json` at the root of the ZIP, alongside `index.html`.

### Refresh metadata in Studio

Select your **Web** component, set **Type** to **Online**, enter your URL, then under **Metadata** tap/click **Refresh**.

> **Note**
>
> If you are using **Offline** content, update the ZIP and re-import it to reload `pandasuite.json`.

### Use the generated properties, exposed data, events, and actions

Once metadata is loaded, Studio can:

- Display manifest-defined **properties** in the right-side panel (including data binding when a property is bindable)
- Make the root `queryable` fields available in the data binding window under **From a component**
- Expose your manifest-defined **events** and **actions** in the **Actions** window

### Expose bindable fields from your web content

Use the root `queryable` object when you want your page to expose live values such as a user ID, a display name, or a session status to the rest of your PandaSuite project.

1. Declare these fields in the root `queryable` object of `pandasuite.json`.
2. Refresh the metadata in Studio, or re-import the ZIP if you are using offline content.
3. Update the values from your page when they change:

```javascript
PandaBridge.send(PandaBridge.UPDATED, {
  queryable: {
    userId: 'user-123',
    displayName: 'Panda Fan',
    sessionStatus: 'connected'
  }
});
```

Studio reads the field names from `pandasuite.json`, and `PandaBridge.UPDATED` keeps their values current at runtime. Use this pattern for persistent bindable fields. Keep `PandaBridge.send("markerId", payload)` for marker-driven events and contextual payloads.

To build the manifest and implement the bridge in your web code, follow the [Custom components](https://docs.pandasuite.com/essentials/components/custom-components/) guide.