@ characterxyz/ 部件
将您的字符 XYZ 代理放在任何网站: 角落中的字符, 流出的文本聊天, 和实时的语音通话 与公平排队 当每行忙。 阴影中的一个网络组件 DOM,所以它在简单的HTML, React, Vue, Svelte, Angular 或其他什么方面都有效, 没有任何你 页面的 CSS 漏出进出。 34 KB gzipped, 包括一切; 一旦页面闲置, 便开始 .
创建可公布的密钥, 选择它可能运行的站点并选择查看 字符 XYZ QQ 设置 QQ 开发者。 。 。 .
脚本标记( 无构建步骤)
<script src="https://unpkg.com/@characterxyz/widget@0/dist/cx.js" data-key="cxyz_pk_live_…" async></script>
标签上的设置如下: data-* 属性 : data-display="full", (中文(简体) ), data-accent="#e11d48", (中文(简体) ),
data-position="bottom-left", (中文(简体) ), data-mode="dark", (中文(简体) ), data-show-call="false", (中文(简体) ), data-agent="agent_…"。 。 。 .
从自己的按钮驱动它 CharacterXYZ.open('chat') 或者说 CharacterXYZ.open('call')。 。 。 .
绑定页面
// Who this is / what is true now. Stays in scope for every later turn.
CharacterXYZ.identify({ id: 'u_42', name: 'Asha', traits: { plan: 'pro' } });
CharacterXYZ.setContext({ page: '/pricing', cart: { items: 2 } });
// Something they did. Only names the agent's graph declares.
CharacterXYZ.track('pricing_viewed', { plan: 'pro' });
// Something the agent may ask the page to do.
CharacterXYZ.registerAction('openCart', async ({ itemId }) => { cart.open(itemId); return { opened: true }; });
track 是火与忘却void),发出"一能"id,活下来a
导航点击. 等待的页面动作会运行您的处理器并公布结果
同一请求; 代理答复随附。 图表节点是 打开
站点活动 财务报告和审定财务报表 客户端动作。 。 。 .
无
npm install @characterxyz/widget
import { mount } from '@characterxyz/widget';
const widget = mount({ publishableKey: 'cxyz_pk_live_…', accent: '#e11d48' });
widget.open('chat'); // or 'call'; widget.close(); widget.destroy()
使用反应还是Next.js? 安装 @characterxyz/react
相反;它包括这个软件包.
设置
默认来自密钥( 设置在 Embed 页面上) ; 这里通过的任何内容都会覆盖它们 .
| 设置 | 数值 |
|---|---|
agentId | 哪个钥匙的经纪人? 默认: 密钥的第一个 |
display | bubble • 妇女 half • 妇女 full (多少她的节目) |
launcher, (中文(简体) ), position | 发射器样式; bottom-right • 妇女 bottom-left |
accent, (中文(简体) ), mode, (中文(简体) ), radius, (中文(简体) ), font | 颜色, auto • 妇女 light • 妇女 dark,角半径,字体家族 |
showChat, (中文(简体) ), showCall, (中文(简体) ), branding | 关闭聊天、电话或页脚 |
offsetX, (中文(简体) ), offsetY, (中文(简体) ), zIndex, (中文(简体) ), container | 安置情况 |
movable | 游客可以沿着底部的任何一带拖住她(先按住接头);放高一点,她会倒下. 然后从她所处的位置开始聊天 默认关闭 |
代理商所说的(人物,知识,问候)是代理商自己的,设定在字符XYZ.
样式
元素上的 CSS 符号 : character-xyz { --cx-accent: …; --cx-font: …; --cx-radius: … }组件 :
::part(launcher | presence | actions | panel | header | composer | banner | message | message-agent | message-visitor | message-event | event | greeting)。 。 。 .
活动
元素起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 cx-ready, (中文(简体) ), cx-open, (中文(简体) ), cx-close, (中文(简体) ), cx-call (单位:千美元){phase, position, endReason}和 cx-error。 。 。 .
已注册访问者
将服务器上的会话擦除 @characterxyz/server, (中文(简体) ),
然后: mount({ getSessionToken: () => fetch('/api/characterxyz/session').then((r) => r.json()) })。 。 。 .
然后他们的聊天历史跟随他们穿越设备.
警卫
可公布的密钥( E)cxyz_pk_…)按设计是公开的:它只从它上开列的地点工作,而且
交换15分钟的会话,然后去那个地点 永远不要放出密钥( N)cxyz_sk_…在一页中;
sDK拒绝与一个运行.
许可证
麻省理工学院