In-App Mini Program Embedded SaaS Viewing Page Product Jump Mini Program Integration Guide

Applicable Scenarios

This document applies when the integrating party embeds the Polyv SaaS viewing page within their WeChat Mini Program via <web-view>, and wishes for product clicks within the viewing page to navigate to a specified page within the integrating party's Mini Program.

Typical requirements include:

• Viewers watch the Polyv SaaS live streaming viewing page within the integrating party's Mini Program.
• Products configured in the product library are displayed within the viewing page.
• Clicking a product navigates the viewer to a specified page within the integrating party's Mini Program.
• The integrating party wishes to reuse the capabilities of the Polyv SaaS viewing page or handle product fulfillment within their own Mini Program system.

Note: The current product jump implementation for the Polyv SaaS viewing page requires initializing the WeChat JS-SDK first, then calling the Mini Program jump interface. Configuration items differ based on the viewing page domain and the fulfillment method.

Solution 1: Directly Embed the Polyv SaaS Viewing Page for Product Jumps

Implementation Method

This method is suitable when the integrating party directly embeds the default Polyv SaaS viewing page into their Mini Program <web-view>, without using a custom viewing page domain or configuring a custom official account.

Implementation Logic:

• The integrating party's Mini Program opens the default Polyv SaaS viewing page via <web-view>.
• The SaaS viewing page loads products configured in the product library.
• A viewer clicks a product within the SaaS viewing page.
• The SaaS viewing page initializes using the WeChat JS-SDK configuration corresponding to the default Polyv viewing page domain.
• The SaaS viewing page calls the Mini Program jump interface.
• The viewer enters the specified page within the integrating party's Mini Program.

Polyv is responsible for:

• Providing the default SaaS viewing page.
• Displaying products within the SaaS viewing page.
• Triggering the Mini Program jump logic based on product library configuration.
• Maintaining the WeChat JS-SDK configuration for the default viewing page domain.

The integrating party is responsible for:

• Configuring the default Polyv viewing page domain as a business domain in the WeChat Mini Program backend. Path: WeChat Mini Program Backend → Development Management → Development Settings → Business Domains.
• Configuring the Mini Program path and parameters for product clicks in the product library.
• Ensuring the integrating party's Mini Program can recognize the product jump path and parameters.

Advantages:

• Lower integration cost.
• No need for the integrating party to configure a custom viewing page domain.
• No need for the integrating party to configure a custom official account.
• Suitable for scenarios requiring rapid reuse of the SaaS viewing page's product jump capability.

Notes:

• The integrating party must still configure the default Polyv viewing page domain as a business domain in the Mini Program backend; otherwise, the Mini Program may not be able to open the viewing page.
• This solution uses the default Polyv viewing page domain and default WeChat JS-SDK configuration, typically requiring no additional custom official account configuration from the integrating party.
• The Mini Program path and parameters for product jumps must still be confirmed and tested by the integrating party.
• If the integrating party must display their own viewing page domain externally, the custom viewing page domain solution should be chosen.

Integration Process

graph TD
    A["观众进入接入方小程序"] --> B["小程序 web-view 打开保利威默认 SaaS 观看页"]
    B --> C["SaaS 观看页加载商品"]
    C --> D["观众点击商品"]
    D --> E["SaaS 观看页发起小程序跳转"]
    E --> F["跳转接入方小程序指定页面"]

Solution 2: Configure Custom Domain and Official Account for SaaS Viewing Page Product Jumps

Implementation Method

This method is suitable when the integrating party wants viewers to access the SaaS viewing page via their own domain and reuse the built-in product jump capability of the SaaS viewing page. When a viewer clicks a product, the SaaS viewing page initiates the Mini Program jump.

Implementation Logic:

• The integrating party's Mini Program opens the SaaS viewing page under the integrating party's custom domain via <web-view>.
• The SaaS viewing page loads products configured in the product library.
• A viewer clicks a product within the SaaS viewing page.
• The SaaS viewing page initializes the WeChat JS-SDK using the integrating party's configured custom official account information.
• The SaaS viewing page calls the Mini Program jump interface.
• The viewer enters the specified page within the integrating party's Mini Program.

Polyv is responsible for:

• Supporting the integrating party in accessing the SaaS viewing page using a custom viewing page domain.
• Displaying products within the SaaS viewing page.
• Triggering the Mini Program jump logic based on product library configuration.
• Supporting the use of the integrating party's configured custom official account information for WeChat JS-SDK initialization.

The integrating party is responsible for:

• Completing the custom viewing page domain configuration. If using the CNAME method, the integrating party must point the custom domain to the target address provided by Polyv at their DNS service provider.
• Configuring the custom viewing page domain as a business domain in the WeChat Mini Program backend. Path: WeChat Mini Program Backend → Development Management → Development Settings → Business Domains.
• Configuring the custom viewing page domain as a JS interface security domain in the WeChat Official Account backend. Path: WeChat Official Account Backend → Settings & Development → Official Account Settings → Function Settings → JS Interface Security Domains.
• Preparing custom official account information. Path: WeChat Official Account Backend → Settings & Development → Basic Configuration, obtain the official account AppID and AppSecret.
• Downloading the domain verification file as required by the WeChat Official Account backend and ensuring the file is accessible via the root path of the custom viewing page domain.
• Configuring the custom official account information on the Polyv side. The configuration entry is typically the custom official account or WeChat authorization configuration entry in the Polyv backend; if the current account lacks this entry, contact support for assistance.
• Configuring the Mini Program path and parameters for product clicks in the product library.

Advantages:

• Viewers see the integrating party's own viewing page domain.
• Reuses the built-in product display and jump capabilities of the SaaS viewing page.
• The integrating party does not need to develop a separate product click landing page.

Notes:

• If the integrating party uses a custom viewing page domain, the default Polyv official account usually cannot cover the JS-SDK configuration for this custom domain.
• The integrating party must use their own official account or a custom official account for WeChat JS-SDK initialization.
• The Mini Program <web-view> business domain and the Official Account JS interface security domain need to be configured separately. The former determines whether the Mini Program can open the viewing page, and the latter determines whether the WeChat JS-SDK can be initialized within the viewing page.
• If WeChat JS-SDK initialization fails, clicking a product may result in no response.

Integration Process

graph TD
    A["观众进入接入方小程序"] --> B["小程序 web-view 打开自定义域名 SaaS 观看页"]
    B --> C["SaaS 观看页加载商品"]
    C --> D["观众点击商品"]
    D --> E["SaaS 观看页使用自定义公众号完成微信 JS-SDK 初始化"]
    E --> F["SaaS 观看页发起小程序跳转"]
    F --> G["跳转接入方小程序指定页面"]

Solution 3: Integrating Party's H5 Page Handles Product Clicks and Jumps to Mini Program

Implementation Method

This method is suitable when the integrating party wishes to control the jump chain after a product click themselves, or wishes to complete WeChat JS-SDK initialization and Mini Program jumps within their own H5 page.

Implementation Logic:

• The integrating party's Mini Program opens the integrating party's H5 page via <web-view>.
• The integrating party's H5 page completes WeChat JS-SDK initialization.
• The integrating party's H5 page embeds the SaaS viewing page via an iframe or other method.
• A viewer clicks a product within the SaaS viewing page.
• The SaaS viewing page passes the product click information to the integrating party's H5 page via window.parent.postMessage.
• The integrating party's H5 page calls wx.miniProgram.navigateTo to jump to the Mini Program page.

Polyv is responsible for:

• Providing the SaaS viewing page and product click capability.
• Supporting the emission of click events for product items in the product list.
• Passing product click information to the integrating party's H5 page via window.parent.postMessage in the iframe embedding scenario.

The integrating party is responsible for:

• Developing their own H5 landing page.
• Configuring the domain of the H5 landing page as a business domain in the WeChat Mini Program backend. Path: WeChat Mini Program Backend → Development Management → Development Settings → Business Domains.
• Configuring the domain of the H5 landing page as a JS interface security domain in the WeChat Official Account backend. Path: WeChat Official Account Backend → Settings & Development → Official Account Settings → Function Settings → JS Interface Security Domains.
• Completing WeChat JS-SDK initialization on the H5 landing page.
• Listening for and validating product click information transmitted by the SaaS viewing page via postMessage.
• Calling wx.miniProgram.navigateTo to complete the Mini Program jump.
• Maintaining product paths, parameter parsing, and jump exception handling.

Advantages:

• The jump logic is fully controlled by the integrating party.
• Can be integrated with the integrating party's own product, membership, order, and other business processes.
• The integrating party can uniformly handle authentication, tracking, and error prompts after product clicks.

Notes:

• The integrating party must maintain the H5 landing page and Mini Program jump logic themselves.
• The integrating party must handle postMessage message communication between the H5 page and the SaaS viewing page.
• Vue emit events within the SaaS viewing page cannot be directly listened to by the external iframe page; if the integrating party embeds the SaaS viewing page via an iframe, the SaaS viewing page must explicitly call window.parent.postMessage to pass product click information to the integrating party's H5 page.
• The integrating party must still ensure correct configuration of business domains, JS interface security domains, official accounts, and Mini Program paths.
• Development and testing costs are higher than directly using the SaaS viewing page's jump capability.

Integration Process

graph TD
    A["观众进入接入方小程序"] --> B["web-view 打开接入方 H5 页面"]
    B --> C["接入方 H5 完成微信 JS-SDK 初始化"]
    C --> D["接入方 H5 承载 SaaS 观看页"]
    D --> E["观众点击商品"]
    E --> F["SaaS 观看页 postMessage 商品点击信息"]
    F --> G["接入方 H5 调用 wx.miniProgram.navigateTo"]
    G --> H["跳转接入方小程序指定页面"]

Solution Comparison

Supplementary Notes

Custom Viewing Page Domain

A custom viewing page domain means the integrating party uses their own domain to access the Polyv SaaS viewing page, for example, replacing the default viewing page URL with the integrating party's own business domain.

The common integration method is the CNAME method:

• The integrating party prepares their own domain, e.g., live.example.com.
• Polyv provides a CNAME target address.
• The integrating party points the CNAME of live.example.com to the target address provided by Polyv at their DNS service provider.
• Once the domain resolution takes effect, viewers accessing live.example.com will actually access the SaaS viewing page hosted by Polyv.

This can be understood as: CNAME does not copy the page to the integrating party's server, but rather points the integrating party's domain to Polyv's viewing page service. The integrating party displays their own domain externally, while the viewing page content is still provided by Polyv.

Mini Program Business Domain vs. Official Account JS Interface Security Domain

The Mini Program <web-view> business domain and the Official Account JS interface security domain are two different configurations, controlling different capabilities.

Therefore, the fact that the integrating party's Mini Program can successfully open the SaaS viewing page does not guarantee that product jumps within the viewing page will work correctly. Product jumps also require the current H5 page to have a valid WeChat JS-SDK initialization configuration.