Card Push Component

This document primarily describes how to integrate the card push component on the interactive feature receiver side. After integration, operations such as displaying cards on the audience side can be implemented.

Before introducing and using this feature component, public configuration of the interactive feature receiver SDK is required. For details, please refer to: Interactive Feature Receiver UI Component - Configure SDK.

Import

Online File Import Method

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PushCard/PushCard.umd.min.js"></script>
<script>
    const PushCardComp = window.PolyvIRScene.PushCard.default;
</script>

Import Method (Recommended)

import PushCardComp from '@polyv/interactions-receive-sdk-ui-default/lib/PushCard';

Code Example

First, instantiate the card push SDK, then pass it into the card push component for internal logic processing.

Taking PC integration as an example:

<template>
  <push-card
    :lang="lang"
    :push-card-sdk="pushCardSdk"
    @open="handleOpen"
    @entry-visible-changed="entryVisibleChanged"
  />
</template>

<script>
import { PushCard } from '@polyv/interactions-receive-sdk';
import PushCardComp from '@polyv/interactions-receive-sdk-ui-default/lib/PushCard';

export default {
  components: {
    'push-card': PushCardComp,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 卡片推送 SDK 实例
      pushCardSdk: null,
    };
  },

  mounted() {
    this.pushCardSdk = new PushCard();
  },

  beforeDestroy() {
    this.pushCardSdk?.destroy();
  },

  methods: {
    handleOpen(data) {
      // 点击卡片，回调相关数据
      // cardId: 卡片ID
      // link: 卡片链接
      // redirectType: 打开链接的方式，tab或iframe，默认为tab（即打开新的标签页），iframe为自定义类型，用户可根据实际业务情况进行展示
      // userInfo: 当前用户信息
      console.info('###卡片相关数据：', data);
    },
    entryVisibleChanged(visible) {
      // 当有入口时，回调入口的显示状态
      // visible：是否显示，true：显示，false：隐藏
      console.info('###卡片入口当前的显示状态：', visible);
    }
  }
};
</script>

Attributes