Card Push
Feature Overview
This module is primarily used to handle logic related to card pushing. It listens for messages such as card push start and card push end. Integrators can customize their own UI based on these event flows.
Initialization and Destruction
Note: Before instantiating and using this module, the SDK must be initialized and configured. See the reference documentation for details.
Initialize Card Push Instance
Online File Import Method
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk/0.24.0/lib/polyv-ir.umd.js"></script>
<script>
const { PushCard } = window.PolyvIRSDK;
</script>
Import Method (Recommended)
import { PushCard } from '@polyv/interactions-receive-sdk';
const pushCardSdk = new PushCard();
Card Push Instance Destruction
pushCardSdk.destroy();
Instance Properties
| Property Name | Type | Description |
|---|---|---|
| events | Object | Card push module events |
Instance Methods
| Method Name | Parameters | Return Value | Description |
|---|---|---|---|
| getResidueTime | void | Current instance object | Get the remaining time of the card |
| toClose | void | void | Close the card |
| getPushCardData | roomId, cardId | Promise | Get push card data |
Usage Flow
Listen for the "Card Push Start (start)" Event
When a card is pushed from the live streaming backend, the SDK internally triggers the pushCardSdk.events.START event. Integrators can listen for this event and then call getPushCardData(roomId, cardId) to obtain more specific card data for displaying the card or card entry interface.
pushCardSdk.on(pushCardSdk.events.START, async function(msg) {
console.log(`卡片开始推送：`, msg);
const res = await pushCardSdk.getPushCardData(msg.roomId, msg.id);
});
The data object returned by pushCardSdk.events.START contains the following properties
| Property Name | Type | Description |
|---|---|---|
| roomId | String | Room ID |
| id | Number | Card ID |
| total | Number | Total card display duration, unit: seconds |
| time | Number | Remaining card display duration, unit: seconds |
| entrance | String | Whether there is a card entry, Y indicates yes, N indicates no |
| lookTime | Number | How long to wait before displaying the card, unit: seconds |
The object returned by getPushCardData contains the following properties
| Property Name | Type | Description |
|---|---|---|
| conditionValue | Number | How long to wait before displaying, unit: seconds |
| duration | Number | Total card push duration, unit: seconds |
| countdownMsg | String | Countdown text |
| enterEnabled | String | Whether there is a card entry, Y indicates yes, N indicates no |
| imageType | String | Cover type: redpack/giftbox/custom |
| cardImage | String | Cover image URL when the cover type is custom |
| enterImage | String | Entry image URL when the cover type is custom |
| link | String | Redirect link |
| showCondition | String | Card display method: PUSH means display immediately, WATCH means display after watching for conditionValue seconds |
| title | String | Card title |
| redirectType | String | Method to open the link, tab or iframe. Default is tab (opens a new tab). iframe is a custom type, users can display it based on actual business needs |
Listen for the "Card Push Stop (CANCEL)" Event
When a card push is cancelled from the live streaming backend, the SDK triggers the pushCardSdk.events.CANCEL event.
pushCardSdk.on(pushCardSdk.events.CANCEL, function(msg) {
console.log('卡片停止推送');
});
Get Card Countdown
After the card pops up, if the card has a countdown, use pushCardSdk.getResidueTime() to get the remaining time of the card. After obtaining the data, the pushCardSdk.events.GET_RESIDUE_TIME event will be triggered.
pushCardSdk.on(pushCardSdk.events.GET_RESIDUE_TIME, function(msg) {
console.log('卡片剩余显示时间：', msg.time);
});
Note
If the card push SDK is no longer needed, please call the destroy method of the SDK instance to destroy the instance.
