> For the complete documentation index, see [llms.txt](https://docs.convai.com/api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.convai.com/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/cdn-umd-script.md).

# 使用脚本标签嵌入体验

通过 script 标签从 CDN 加载 Pixel Streaming Embed 包，并在普通 HTML 页面中渲染已发布的体验，无需构建步骤。

通过从 CDN 加载该包的 UMD 构建，在普通 HTML 页面中渲染已发布的 Convai Pixel Streaming 体验。当网站没有打包器时，请使用此页面。最后，页面会显示体验的开始屏幕。

### 先决条件

* 已发布体验的体验 ID，以及一种授权方式：一个返回 Convai 认证令牌的服务器路由，或一个已被 Convai 加入允许名单的域名。参见 [发布并授权体验](/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/whitelisting-and-publishing-an-experience.md).
* 该页面的 Web 服务器，因为示例会从同一服务器上的一个路由获取令牌。

### 添加脚本和容器

UMD 构建文件是 `dist/core/convai-embed.umd.js`。它是自包含的，并且定义了一个全局对象， `PixelStreamCore`，其 `PixelStreamClient` 属性是渲染体验的类。客户端会填充其容器，因此请为容器设置大小：

{% code title="index.html" %}

```html
<!doctype html>
<html>
  <body>
    <div id="experience" style="width: 100%; height: 600px"></div>

    <script src="https://unpkg.com/@convai/experience-embed/dist/core/convai-embed.umd.js"></script>
    <script>
      fetch('/api/convai-token')
        .then((response) => response.json())
        .then((body) => {
          window.experience = new PixelStreamCore.PixelStreamClient({
            container: document.getElementById('experience'),
            expId: 'YOUR_EXPERIENCE_ID',
            authToken: body.token,
          });
        });
    </script>
  </body>
</html>
```

{% endcode %}

示例会从你服务器上的一个路由获取认证令牌， `/api/convai-token`。如果 Convai 已将你的域名加入允许列表，则省略 `authToken` 并且在不获取任何内容的情况下创建客户端。

{% hint style="warning" %}
上面的 URL 始终加载最新版本。若要固定在某个版本上，请在 URL 中添加其版本号，例如 `@convai/experience-embed@` 后跟 <code class="expression">space.vars.experience\_embed\_version</code>.
{% endhint %}

### 控制体验

客户端会显示一个 **点击开始你的体验** 屏幕，并在用户点击时启动体验。体验加载完成后，可以从你自己的控件中调用其方法：

```html
<button onclick="experience.enableCamera()">打开摄像头</button>
<button onclick="experience.disableCharacterAudio()">静音角色</button>
<button onclick="experience.muteMicrophone()">静音麦克风</button>
```

该 [Pixel Streaming Embed API 参考](/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/api-reference.md#pixelstreamclient-methods) 列出了所有方法、选项和回调。

### 验证嵌入

通过你的 Web 服务器打开该页面。

{% hint style="success" %}
容器会显示 **点击开始你的体验**，点击它会显示体验。
{% endhint %}

如果容器显示 `请联系 convai 以将 <origin> 加入白名单！` 或者显示有关认证令牌的消息，请参阅 [故障排查](/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/react-typescript.md#troubleshooting)；原因相同。

### 后续步骤

{% content-ref url="/pages/2ee929ec767e1d00ab78c4c9e94458676bd7a970" %}
[使用 JavaScript 模块嵌入体验](/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/vanilla-javascript-es-modules.md)
{% endcontent-ref %}

{% content-ref url="/pages/87b57936662c69d8802f20f500191b181163cf02" %}
[Pixel Streaming Embed API 参考](/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/api-reference.md)
{% endcontent-ref %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.convai.com/api-docs/zh/cha-jian-yu-ji-cheng/convai-pixel-streaming-embed/cdn-umd-script.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.