{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"redocly_category":"Activation","product_name":"Engage Studio","type":"markdown"},"seo":{"title":"Hosted Pages WebView and Bridge Integration","description":"Integrate Hosted Pages WebView content with the Engage Mobile SDK, including profile context, links, custom actions, security, and measurement.","siteUrl":"https://docs.treasure.ai","image":"/assets/treasure-ai-social-preview.e6fefb35676f6da91c2d1bc783bd39e618e7af2b1ad3aa52a96ae69d72e700fe.b1bff462.png","lang":"en-US","jsonLd":{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.treasure.ai/","name":"Treasure AI","url":"https://www.treasure.ai/","logo":"https://www.treasure.ai/hubfs/assets/images/logos/primary-logo.svg"},{"@type":"WebSite","@id":"https://docs.treasure.ai/#website","name":"Treasure AI Documentation","url":"https://docs.treasure.ai/","inLanguage":["en","ja"],"publisher":{"@id":"https://www.treasure.ai/"}}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"hosted-pages-webview-and-bridge-integration","__idx":0},"children":["Hosted Pages WebView and Bridge Integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this page when you develop the hosted page and native app integration for Hosted Pages. For campaign configuration and Launch, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing"},"children":["Hosted Pages"]},"."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Beta"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hosted Pages SDK APIs, Bridge methods, payloads, and distribution may change before general availability."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"hosted-page-requirements","__idx":1},"children":["Hosted Page Requirements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The hosted page must:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use HTTPS."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Provide a clear close, back, or completion action."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use a responsive viewport and support mobile screen sizes."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Avoid drawing a second campaign overlay when the SDK owns the surrounding presentation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keep controls usable around safe-area regions."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Avoid assuming a fixed app screen width."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Limit JavaScript and external resources to what the campaign needs."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The preview SDK injects ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["window.TDContext"]}," before page scripts run. The exact Bridge method names and callback behavior are part of the preview SDK contract."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"app-and-sdk-responsibilities","__idx":2},"children":["App and SDK Responsibilities"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Responsibility"},"children":["Responsibility"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"right","data-label":"Customer app"},"children":["Customer app"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"right","data-label":"Engage Mobile SDK"},"children":["Engage Mobile SDK"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Obtain consent and app state"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Provide the trigger event"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Evaluate audience and delivery conditions"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓ Realtime Personalization"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Display the full-screen WebView"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Resolve app-owned Deep Links"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supply ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["profileContext"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["Injects it into the page"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Authorize custom ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invoke"]}," actions"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["Passes the request through"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Open supported web links"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["✓ where supported"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"profile-context","__idx":3},"children":["Profile Context"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The app can provide JSON-serializable values that the SDK injects as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["window.TDContext"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const tier = window.TDContext?.member_tier;\nconst points = window.TDContext?.points;\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"hosted-pages-bridge-api","__idx":4},"children":["Hosted Pages Bridge API"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK exposes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["window.TDBridge"]}," before page scripts run. Guard access when your page can load outside the SDK, or listen for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TDBridgeReady"]}," before initializing page behavior."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDBridge.closeMessage();\nTDBridge.closeMessage(\"completed\");\nTDBridge.openUrl(\"https://example.com/next\");\nTDBridge.invoke(\"openProduct\", { product_id: \"product-123\" });\nTDBridge.track(\"form_submit\", { form_id: \"signup\" });\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["closeMessage(label)"]}," closes the experience. The optional label can identify the dismiss source in campaign measurement."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openUrl(url)"]}," asks the app and SDK to handle a URL, normally closing the current experience first."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invoke(name, params)"]}," sends an app-specific action to the native bridge. The app must authenticate, authorize, and validate the action and every parameter."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["track(event, values)"]}," sends a customer-defined content event. It is separate from the SDK-generated ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["click"]}," measurement event."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A plain ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a href=\"https://...\">"]}," navigates inside the Hosted Pages experience. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target=\"_blank\""]}," when the link should open externally while the experience remains visible. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TDBridge.openUrl(url)"]}," when the app-owned navigation should close the experience."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK controls the viewport for the Hosted Pages WebView. Do not assume a fixed device width; use responsive CSS and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["env(safe-area-inset-*)"]}," where appropriate."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"links-and-custom-actions","__idx":5},"children":["Links and Custom Actions."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hosted Pages content can interact with the app through the SDK Bridge. The app remains responsible for business authorization and navigation."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["App-owned custom schemes should be resolved by the app's link handler or bridge delegate."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Web URLs may use the SDK's default in-app browser behavior."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom actions must validate the action name, login state, permissions, and every parameter."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The app should not open a second browser and then return an unhandled result to the SDK."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For platform-specific APIs, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios"},"children":["iOS SDK Integration"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android"},"children":["Android SDK Integration"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"security-considerations","__idx":6},"children":["Security Considerations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hosted Pages content runs in a WebView and may receive profile context from the app."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use HTTPS URLs and trusted hosting."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Do not expose credentials in URLs, page source, JavaScript, or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["window.TDContext"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Validate every app-owned Deep Link before navigation."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Authorize every custom action in the app."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Do not treat campaign HTML or URL parameters as trusted business instructions."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Avoid sending unnecessary personal data to the hosted page."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"measurement","__idx":7},"children":["Measurement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A campaign-delivered Hosted Pages can create ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["impression"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["click"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dismiss"]}," records through the native SDK measurement flow. A direct app call to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openUrl"]}," has no campaign identity and does not create those campaign events."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For the event fields and destination, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/measurement"},"children":["Mobile In-App Measurement"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-documentation","__idx":8},"children":["Related Documentation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing"},"children":["Hosted Pages"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/sdk-reference"},"children":["Engage Mobile SDK API and Event Reference"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/measurement"},"children":["Mobile In-App Measurement"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/sdk-troubleshooting"},"children":["Mobile In-App SDK Troubleshooting"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios"},"children":["iOS SDK Integration"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android"},"children":["Android SDK Integration"]}]}]}]},"headings":[{"value":"Hosted Pages WebView and Bridge Integration","id":"hosted-pages-webview-and-bridge-integration","depth":1},{"value":"Hosted Page Requirements","id":"hosted-page-requirements","depth":2},{"value":"App and SDK Responsibilities","id":"app-and-sdk-responsibilities","depth":2},{"value":"Profile Context","id":"profile-context","depth":2},{"value":"Hosted Pages Bridge API","id":"hosted-pages-bridge-api","depth":2},{"value":"Links and Custom Actions.","id":"links-and-custom-actions","depth":2},{"value":"Security Considerations","id":"security-considerations","depth":2},{"value":"Measurement","id":"measurement","depth":2},{"value":"Related Documentation","id":"related-documentation","depth":2}],"frontmatter":{"seo":{"title":"Hosted Pages WebView and Bridge Integration","description":"Integrate Hosted Pages WebView content with the Engage Mobile SDK, including profile context, links, custom actions, security, and measurement."}},"lastModified":"2026-09-15T09:37:24.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing-integration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}