@ frillco/ 标语
嵌入式安全 SDK 弗里尔 部件、勘测和升级的公告.
完整文档: 开发者. frill.co
安装
npm install @frillco/script
使用量
从装入开始 集装箱 ——它创建了部件,勘测和增强的公告 您已经在您的 Frill 仪表板中配置了, 并且是大多数应用程序推荐的切入点.
frill 是已打入的可调用(可调用) window.Frill) (中文(简体) ). 调用它装入 Frill 脚本
首先使用,所以调用 frill('container', …) 前面还有Frill急切地装货.
import { frill } from '@frillco/script';
// Load your container (optionally identifying the current user)
await frill('container', {
key: 'YOUR_CONTAINER_KEY',
user: { name: 'Mikey Hill', email: '[email protected]' },
});
// Open a specific widget on demand
const widget = await frill('widget', { key: 'YOUR_WIDGET_KEY' });
widget.open();
急速装入
在您第一次通话前开始装入 Frill 脚本, 请使用 loadFrill (类似于
loadStripe) (中文(简体) ). 过 domain: 'frill.eu' 欧盟的数据居住权.
import { loadFrill } from '@frillco/script';
loadFrill(); // begins loading immediately
// loadFrill({ domain: 'frill.eu' });
识别用户
// Guest user
await frill('identify', {
name: 'Mikey Hill',
email: '[email protected]',
attributes: { mrr: 100 },
});
// SSO (JWT from your server)
await frill('identify', { ssoToken: 'SSO_JWT' });
// Log out
await frill('unidentify');
控制部件
const widget = await frill('widget', { key: 'YOUR_WIDGET_KEY' });
widget.open();
widget.viewSection('roadmap');
widget.events.on('badgeCount', ({ count }) => console.log(`${count} unread`));
调查
const survey = await frill('survey', { key: 'YOUR_SURVEY_KEY', force: true });
survey.open();
反应 / Next.js
渲染器 <FrillScript /> 一次(例如在根部布局中)在水分化前加载容器.
import Script from 'next/script';
import { FrillScript } from '@frillco/script/react';
// app/layout.tsx
<FrillScript
as={Script}
strategy="beforeInteractive"
container={{
key: 'YOUR_CONTAINER_KEY',
user: { name: 'Mikey Hill', email: '[email protected]' },
}}
/>;
内容-安全政策(非)
运行一个严格的CSP? 通过 a nonce用于 <FrillScript> 标记,容器
它注入了脚本,之后SDK注入的每个脚本/样式标记——所以Frill加载
无 'unsafe-inline'。 。 。 .
<FrillScript nonce={nonce} container={{ key: 'YOUR_CONTAINER_KEY' }} />
loadFrill({ nonce }) 对必须的API也一样.
钩子
useWidget 返回部件实例(或 null 准备就绪之前,在装货时重新投降——
这样的效果就可以可靠地通过 widget.events。 。 。 .
import { useWidget } from '@frillco/script/react';
function FeedbackButton() {
const widget = useWidget({ key: 'YOUR_WIDGET_KEY' });
React.useEffect(() => {
if (!widget) return;
const unsubscribe = widget.events.on('badgeCount', ({ count }) => {
console.log(`${count} unread`);
});
return () => {
unsubscribe();
};
}, [widget]);
return <button onClick={() => widget?.open()}>Feedback</button>;
}
useSurvey 财务报告和审定财务报表 useContainer 镜像 useWidget (对于集装箱,更喜欢
<FrillScript container={…} /> (当您可以的话). useFrill() 返回时 frill 可调用
在事件处理器中必须使用.
嵌入部件
将部件内置( 插入到 <div>,而不是一种模式发射装置:
import { FrillWidgetEmbed } from '@frillco/script/react';
<FrillWidgetEmbed widgetKey="YOUR_WIDGET_KEY" style={{ width: 340, height: 460 }} />;