Webview Relay in Mobile App | Reactiv Support Center

Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1.Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1. Table of contents Webview Relay in Mobile App

Webview Relay in Mobile App

How to set up your Webview relay theme extension to work with your mobile app.

Updated over a month agoReactiv App Table of contents

Overview

Webview Relay is a Shopify theme extension that connects your online store pages to your React Native mobile app.

Its main purpose is to display a Home page or Landing page inside the app’s webview and relay user actions (like link clicks) back to the app for native navigation.

When active, it hides unnecessary storefront elements (like headers, footers, or popups) and ensures that navigation happens through the app’s native screens for a seamless in-app experience.

How It Works

Where It Runs

The Webview Relay runs when embedded in a React Native app’s webview on these types of pages:

• Home page — /

• Landing page — /pages/landing-page (or another path you specify)

Home page — /

Landing page — /pages/landing-page (or another path you specify)

When It Activates

The script activates only when:

1. The page is opened inside the React Native app’s webview (detected via the user agent).

2. The store name in the user agent matches the store the block is configured for.

3. The current page path matches one of your configured activation paths (e.g., / or /pages/landing-page).

The page is opened inside the React Native app’s webview (detected via the user agent).

The store name in the user agent matches the store the block is configured for.

The current page path matches one of your configured activation paths (e.g., / or /pages/landing-page).

If someone visits the same page in a regular browser, the script does nothing.

What It Does When Active

1. Hide Unnecessary Elements

• Specify CSS selectors for elements to hide, such as:

  • Shopify theme sections like the header or footer.

  • Third-party widgets or popups that load later.

• The script continuously monitors and hides these elements if they reappear due to dynamic content.

Specify CSS selectors for elements to hide, such as:

Shopify theme sections like the header or footer.

Shopify theme sections like the header or footer.

Third-party widgets or popups that load later.

Third-party widgets or popups that load later.

The script continuously monitors and hides these elements if they reappear due to dynamic content.

2. Intercept Navigation

• Define interceptor paths (e.g., /products/*, /collections/*, /pages/*) to capture in-app navigation events.

• The relay intercepts:

  • Link clicks (e.g., a product link)

  • Form submissions (e.g., search forms)

  • Browser history changes (e.g., forward/back or in-page routing)

• When an intercepted path is triggered, storefront navigation stops, and the action is sent to the app instead.

Define interceptor paths (e.g., /products/*, /collections/*, /pages/*) to capture in-app navigation events.

The relay intercepts:

Link clicks (e.g., a product link)

Link clicks (e.g., a product link)

Form submissions (e.g., search forms)

Form submissions (e.g., search forms)

Browser history changes (e.g., forward/back or in-page routing)

Browser history changes (e.g., forward/back or in-page routing)

When an intercepted path is triggered, storefront navigation stops, and the action is sent to the app instead.

3. Relay User Intent to the App

When a navigation event is intercepted, the relay sends a message to the app via ReactNativeWebView.postMessage containing:

• The intended path

• The content type (product, collection, page, blog, search, cart, or other)

• Additional context (e.g., product handle, variant ID, collection handle)

The intended path

The content type (product, collection, page, blog, search, cart, or other)

Additional context (e.g., product handle, variant ID, collection handle)

Example event types:

• PRODUCT_CLICKED — includes product handle and variant ID (if present)

• COLLECTION_CLICKED — includes collection handle

• PAGE_CLICKED, STORE_LOCATOR_CLICKED, BLOG_CLICKED, SEARCH_CLICKED, CART_CLICKED, OTHER_CLICKED

PRODUCT_CLICKED — includes product handle and variant ID (if present)

COLLECTION_CLICKED — includes collection handle

PAGE_CLICKED, STORE_LOCATOR_CLICKED, BLOG_CLICKED, SEARCH_CLICKED, CART_CLICKED, OTHER_CLICKED

This allows the React Native app to open the corresponding native screen—for example, a native product page or collection view—creating a consistent app-native experience.

Typical Use Cases

Display the Home Page in the App

• Add / to your activation paths.

• Hide the storefront header/footer so the app can use its own native header.

• Intercept links to products or collections to open native product or collection screens.

Add / to your activation paths.

Hide the storefront header/footer so the app can use its own native header.

Intercept links to products or collections to open native product or collection screens.

Display a Landing Page in the App

• Add your landing page path (e.g., /pages/holiday-sale) to activation paths.

• Hide marketing popups or third-party banners that clash with app UI.

• Intercept buttons or links for products, collections, the store locator, cart, or search—then hand them off to native navigation.

Add your landing page path (e.g., /pages/holiday-sale) to activation paths.

Hide marketing popups or third-party banners that clash with app UI.

Intercept buttons or links for products, collections, the store locator, cart, or search—then hand them off to native navigation.

Configuration

Steps to Enable the Extension:

1. From your Shopify admin, go to Online Store > Themes.

2. Find your active theme, then click Customize to open the Theme Editor.

3. In the Theme Editor sidebar, click the App embeds icon (the puzzle piece icon).

4. Scroll through the list of available app embeds and locate Reactiv Webview Relay.

5. Toggle the switch to enable the Reactiv Webview Relay extension.

6. Click Save in the top-right corner to apply your changes.

From your Shopify admin, go to Online Store > Themes.

Find your active theme, then click Customize to open the Theme Editor.

In the Theme Editor sidebar, click the App embeds icon (the puzzle piece icon).

Scroll through the list of available app embeds and locate Reactiv Webview Relay.

Toggle the switch to enable the Reactiv Webview Relay extension.

Click Save in the top-right corner to apply your changes.

Once saved, the Webview Relay is active and ready to connect Reactiv features with your storefront.

📝 Please make sure that you enable this every time you switch your theme.

Activation

Enable the Webview Relay on specific pages:

• Add one path per line under “Enable the Webview Relay script on specific paths.”

• Examples:

  • / — Home page

  • /pages/landing-page — Landing page

Add one path per line under “Enable the Webview Relay script on specific paths.”

Examples:

/ — Home page

/ — Home page

/pages/landing-page — Landing page

/pages/landing-page — Landing page

Navigation Interceptors

Define which paths the app should take over:

• Add one path pattern per line. Wildcards (*) are supported.

• Common patterns:

  • /products/* — Product pages

  • /collections/* — Collection pages

  • /pages/* — Standard pages

  • /cart, /search — Optional additions

Add one path pattern per line. Wildcards (*) are supported.

Common patterns:

/products/* — Product pages

/products/* — Product pages

/collections/* — Collection pages

/collections/* — Collection pages

/pages/* — Standard pages

/pages/* — Standard pages

/cart, /search — Optional additions

/cart, /search — Optional additions

Element Interceptor

Hide elements that shouldn’t appear inside the app:

• Theme elements: e.g., #shopify-section-header, #footer

• Third-party widgets: e.g., #atlwdg-trigger

• The relay continuously hides these elements if they reappear dynamically.

Theme elements: e.g., #shopify-section-header, #footer

Third-party widgets: e.g., #atlwdg-trigger

The relay continuously hides these elements if they reappear dynamically.

Native Navigation Handoff

When the relay detects an intercepted navigation:

1. It stops the normal web navigation.

2. Sends a message to the React Native app through ReactNativeWebView.postMessage.

3. The app reads the event type and context (like a product handle) and navigates to the corresponding native screen.

It stops the normal web navigation.

Sends a message to the React Native app through ReactNativeWebView.postMessage.

The app reads the event type and context (like a product handle) and navigates to the corresponding native screen.

Result: Users interact with web content but experience native navigation and native UI.

Behavior Details and Safeguards

• Locale-friendly: Handles locale-prefixed URLs (e.g., /en/products/…, /fr-ca/products/...) correctly.

• Exact activation: Runs only on exact activation paths you define.

• App-only: Checks user agent and store name to avoid running in normal browsers.

• Graceful hiding: Ignores invalid CSS selectors; dynamically hides elements that reappear.

• Safe messaging: Only posts messages if the webview bridge is available.

Locale-friendly: Handles locale-prefixed URLs (e.g., /en/products/…, /fr-ca/products/...) correctly.

Exact activation: Runs only on exact activation paths you define.

App-only: Checks user agent and store name to avoid running in normal browsers.

Graceful hiding: Ignores invalid CSS selectors; dynamically hides elements that reappear.

Safe messaging: Only posts messages if the webview bridge is available.

Privacy: Sends only navigation context (no personal data).

Once the above is all completed don't forget to save to activate the relay on your theme. Always reach out to our Support team if you need any guidance.

Did this answer your question?😞😐😃