Interprefy iframe 组件嵌入技术指南
如何将 Interprefy 的远程同声传译解决方案与基于浏览器的会议平台集成?.
Interprefy 可消除在任何平台上举办活动的语言障碍。我们与 70 多个网络会议和虚拟活动平台集成,提供以下服务:
- 同声传译
- 人工智能语音翻译
- 手语翻译
- 自动实时字幕
- 机器翻译实时字幕/副标题
Interprefy 的响应式语言选择器小部件使用户可以通过三种不同的方式访问这些服务:
方案一:带有 postMessage 的 iframe 小部件
您只需两个简单步骤,即可将 Interprefy 语言选择器作为小部件放置在 iframe 中,从而将其直接集成到现有网页中:
- 使用 iframe 标签打开 Interprety 登录链接,格式如下:https://interpret.world/integrationlink?token=thisisyourtoken
- 将“thisisyourtoken”替换为 Interprefy 提供的实际事件令牌。.
还可以使用其他查询参数来配置该小部件:
- video=“true / false”
此参数用于手语,默认设置为 false。 - captions=“true / false”
设置为 true 时,Interprefy 小部件会在有字幕的情况下显示字幕。请注意,如果事件不包含字幕,则将其设置为 true 除了显示眼睛图标外,不会产生任何其他效果。 - lang=“ENG / 3 字母国家代码”
此参数用于预先选择语言,以便集成商能够以编程方式更改语言,默认设置为无。 - audio-“true / false”
如果设置为 false,则该事件将变为仅显示字幕的事件。也就是说,该事件没有语音翻译,只有字幕显示。同时,耳机图标也会被移除。请注意,通常不建议将此参数设置为 true,因为这是默认行为。 - cc=”ENG / 3字母国家/地区代码” 此
设置将打开时字幕语言设置为指定语言。用户打开小部件后仍可更改此设置。
与 Interprefy Widget 的交互是通过使用 postMessage API 实现的,具体方法是使用以下代码:window.addEventListener("message", (event) => {…})。
该 Widget 会发布两种类型的事件,以便平台能够响应变化:
- 语言变更事件
- 当用户通过控件在组件内选择或重新选择语言时,会触发语言更改事件。例如,如果用户在组件中选择英语,则会发布以下事件:
{
event:”language-changed”,
language:”ENG”
}
2. 地板静音事件 - 当译员开始翻译时,会触发“楼层静音”事件。这允许宿主平台通过将源音频静音来做出响应。例如,如果用户订阅了法语频道,并且法语译员开始在该频道发言,则会发布以下事件:
{
event:”floor-mute”,
floorMute:”true”,
issuerLang:”FRA”
}
以下是 iframe 代码示例:
<!DOCTYPE html>
<html>
<head>
<title>Interprefy iFrame 集成示例页面</title>
</head>
<body style="margin:0;">
<iframe id="interprefyiFrame"
src="https://interpret.world/integrationlink?token=livedemo&captions=true"
style="position: relative; width:300px;height:100vh"
滚动="否"></iframe>
</body>
</html>
最小宽度为 300 像素,最小高度为 100 像素。平台可以使用更大的 iframe 尺寸以适应用户界面设计。Interprefy 建议将其放置在视频窗口的侧边。.
参会者将在网络直播页面看到语言选择器。演示代码循环运行传统口译音频和 Interprefy AI 语音翻译。用户可以选择自己偏好的语言收听音频(请注意,演示状态下会显示字幕选择框,但字幕功能未启用,请联系团队安排字幕测试)。选择语言后,请将网络直播的原始音频静音。.
建议:
- 仅将小部件放置在需要用户登录才能访问的页面上,以防止流量过大。.
- 添加一个按钮(例如“口译”),以确保只有需要口译服务的用户才能启动该小部件。.
示例:嵌入在 ON24 活动平台上的 Interprefy iframe 小部件


选项 2:语言选择器弹出窗口
您只需两步即可在网站上添加一个小按钮或链接,打开语言选择器弹出窗口:
- 将以下简短的 HTML 代码片段添加到您的网络直播页面:
window.open('https://interpret.world/integrationlink?token=thisisyourtoken', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=400,height=300');
- 将“thisisyourtoken”替换为 Interprefy 提供的实际事件令牌。.
当参会者点击新增的按钮/链接并选择语言后,即可立即收听实时同声传译。为避免同时听到两个音频流,他们需要将原会议音频静音。.
例如:活动平台 Zuddl 中的语言选择器弹出窗口

选项 3:新建浏览器窗口
第三种方法是添加一个链接或按钮,点击后将在新的浏览器窗口中打开选择器。.
- 请将以下链接发送给您的参会者,并请他们将其粘贴到新的浏览器窗口中:
https://interpret.world/integrationlink?token=livedemo(其中 livingemo 替换为您的活动令牌)
2. 与会者随后输入 Interprefy 提供的活动令牌。.
当参会者点击并选择语言后,他们将立即听到实时口译或查看实时字幕。如果选择音频口译,他们必须将原有的网络直播声音静音,以免同时听到两个音频流。.
示例:启用手语翻译的新浏览器窗口

