# Hosted Pages WebView and Bridge Integration

Use this page when you develop the hosted page and native app integration for Hosted Pages. For campaign configuration and Launch, see [Hosted Pages](/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing).

Beta
Hosted Pages SDK APIs, Bridge methods, payloads, and distribution may change before general availability.

## Hosted Page Requirements

The hosted page must:

- Use HTTPS.
- Provide a clear close, back, or completion action.
- Use a responsive viewport and support mobile screen sizes.
- Avoid drawing a second campaign overlay when the SDK owns the surrounding presentation.
- Keep controls usable around safe-area regions.
- Avoid assuming a fixed app screen width.
- Limit JavaScript and external resources to what the campaign needs.


The preview SDK injects `window.TDContext` before page scripts run. The exact Bridge method names and callback behavior are part of the preview SDK contract.

## App and SDK Responsibilities

| Responsibility | Customer app | Engage Mobile SDK |
|  --- | --- | --- |
| Obtain consent and app state | ✓ |  |
| Provide the trigger event | ✓ |  |
| Evaluate audience and delivery conditions |  | ✓ Realtime Personalization |
| Display the full-screen WebView |  | ✓ |
| Resolve app-owned Deep Links | ✓ |  |
| Supply `profileContext` | ✓ | Injects it into the page |
| Authorize custom `invoke` actions | ✓ | Passes the request through |
| Open supported web links |  | ✓ where supported |


## Profile Context

The app can provide JSON-serializable values that the SDK injects as `window.TDContext`.

```javascript
const tier = window.TDContext?.member_tier;
const points = window.TDContext?.points;
```

Do not put API keys, Personalization tokens, passwords, or unnecessary personal data in the context. Clear or replace the context when the signed-in customer changes.

## Hosted Pages Bridge API

The SDK exposes `window.TDBridge` before page scripts run. Guard access when your page can load outside the SDK, or listen for `TDBridgeReady` before initializing page behavior.

```javascript
TDBridge.closeMessage();
TDBridge.closeMessage("completed");
TDBridge.openUrl("https://example.com/next");
TDBridge.invoke("openProduct", { product_id: "product-123" });
TDBridge.track("form_submit", { form_id: "signup" });
```

- `closeMessage(label)` closes the experience. The optional label can identify the dismiss source in campaign measurement.
- `openUrl(url)` asks the app and SDK to handle a URL, normally closing the current experience first.
- `invoke(name, params)` sends an app-specific action to the native bridge. The app must authenticate, authorize, and validate the action and every parameter.
- `track(event, values)` sends a customer-defined content event. It is separate from the SDK-generated `click` measurement event.


A plain `<a href="https://...">` navigates inside the Hosted Pages experience. Use `target="_blank"` when the link should open externally while the experience remains visible. Use `TDBridge.openUrl(url)` when the app-owned navigation should close the experience.

The SDK controls the viewport for the Hosted Pages WebView. Do not assume a fixed device width; use responsive CSS and `env(safe-area-inset-*)` where appropriate.

## Links and Custom Actions.

Hosted Pages content can interact with the app through the SDK Bridge. The app remains responsible for business authorization and navigation.

- App-owned custom schemes should be resolved by the app's link handler or bridge delegate.
- Web URLs may use the SDK's default in-app browser behavior.
- Custom actions must validate the action name, login state, permissions, and every parameter.
- The app should not open a second browser and then return an unhandled result to the SDK.


For platform-specific APIs, see [iOS SDK Integration](/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios) and [Android SDK Integration](/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android).

## Security Considerations

Hosted Pages content runs in a WebView and may receive profile context from the app.

- Use HTTPS URLs and trusted hosting.
- Do not expose credentials in URLs, page source, JavaScript, or `window.TDContext`.
- Validate every app-owned Deep Link before navigation.
- Authorize every custom action in the app.
- Do not treat campaign HTML or URL parameters as trusted business instructions.
- Avoid sending unnecessary personal data to the hosted page.


## Measurement

A campaign-delivered Hosted Pages can create `impression`, `click`, and `dismiss` records through the native SDK measurement flow. A direct app call to `openUrl` has no campaign identity and does not create those campaign events.

For the event fields and destination, see [Mobile In-App Measurement](/products/marketing-cloud/engage-studio/channels/mobile-inapp/measurement).

## Related Documentation

- [Hosted Pages](/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)
- [Engage Mobile SDK API and Event Reference](/products/marketing-cloud/engage-studio/channels/mobile-inapp/sdk-reference)
- [Mobile In-App Measurement](/products/marketing-cloud/engage-studio/channels/mobile-inapp/measurement)
- [Mobile In-App SDK Troubleshooting](/products/marketing-cloud/engage-studio/channels/mobile-inapp/sdk-troubleshooting)
- [iOS SDK Integration](/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios)
- [Android SDK Integration](/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android)