> For the complete documentation index, see [llms.txt](https://polyv.gitbook.io/document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://polyv.gitbook.io/document/docs/live/js/new-sdk/interactions-receive-sdk/ui/default/feed_back.md).

# 反馈组件

本文档主要描述如何接入互动功能接收端的反馈组件，接入后可实现观众端提交反馈。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：[互动功能接收端 UI 组件 - 配置 SDK](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/interactions_receive_sdk/ui/default/overview/README.md#配置-sdk)。

## 引入

#### 在线文件引入方式

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

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

#### import 方式引入（推荐）

```javascript
// PC 端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';   
```

```javascript
// 移动端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/MobileFeedBack';  
```

## 代码示例

先实例化SDK，然后将其传入到组件中，以便内部进行相应逻辑处理。

以 PC 端接入为例：

```vue
<template>
  <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
  <modal
      no-bg
      draggable
      title="投诉反馈"
      :visible="visible"
      :close-on-click-modal="false"
      @close="visible = false"
  >
    <feed-back
      :feed-back-sdk="feedBackSdk"
      :is-show-feed-back="visible"
      @to-show="onSetFeedBackVisible(true)"
      @to-hide="onSetFeedBackVisible(false)"
    />
  </modal>
</template>

<script>
import { FeedBack as FeedBackSDK } from '@polyv/interactions-receive-sdk';
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';   

export default {
  components: {
    FeedBack,
  },

  data() {
    return {
      // 反馈 SDK 实例
      feedBackSdk: null,
      visible: false,
    };
  },

  created() {
    this.feedBackSdk = new FeedBackSDK();
  },

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

  methods: {
    onSetFeedBackVisible(visible) {
      this.visible = visible;
    },
  },
};
</script>
```

### Attributes

| 属性名               | 类型                    | 默认值       | 含义             |
| ----------------- | --------------------- | --------- | -------------- |
| checkInSdk        | Object                | null      | 签到 SDK 实例      |
| lang              | string：'zh\_CN', 'en' | `'zh_CN'` | 语言             |
| is-show-feed-back | boolean               | false     | 是否显示反馈组件（重置状态） |

### Events

| 事件名     | 参数类型 | 参数含义 | 说明       |
| ------- | ---- | ---- | -------- |
| to-show | 无参数  | -    | 需要展示签到弹窗 |
| to-hide | 无参数  | -    | 需要隐藏签到弹窗 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://polyv.gitbook.io/document/docs/live/js/new-sdk/interactions-receive-sdk/ui/default/feed_back.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.