小部件集成指南
将在线调查和反馈小部件集成到您的网站的完整说明。
Widget documentation
Widget configuration
Learn about display modes, positioning, sizing, animations, and behavior settings
Learn more
Display rules
Control when and to whom widgets are shown using targeting rules and behavioral triggers
Learn more
Widget triggers
Configure button, icon, and condition-based triggers with frequency control
Learn more
Widget styling
Customize icons, buttons, colors, and create beautiful widget designs
Learn more
1
向您的网站添加脚本
将这些脚本标签添加到 HTML 的 <head> 部分。将 YOUR_API_KEY 替换为您从仪表板获得的实际 API 密钥。
<!-- Add these to your <head> section --> <script src="https://askusers.org/widget/widget-common.js"></script> <!-- For survey widgets --> <script src="https://askusers.org/widget/survey-widget.js?api-key=YOUR_API_KEY"></script> <!-- For form widgets (waitlist, feedback, contact forms, feature requests, etc.) --> <script src="https://askusers.org/widget/form-widget.js?api-key=YOUR_API_KEY"></script>
注意： 仅包含您计划使用的小部件类型的脚本。
添加小部件 HTML
将小部件 HTML 放置在您希望小部件出现在页面上的位置。
在线调查小部件
<div class="askusers-survey-widget"
data-survey-id="YOUR_SURVEY_ID"
data-context-id="product-feedback"
data-context-type="survey">
</div>表单小部件（候补名单、联系、反馈）
<div class="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="product-launch"
data-context-type="product">
</div>在仪表板中创建您的表单，并使用模板如"候补名单/电子邮件注册"、"快速反馈（竖起大拇指）"、"联系表单"或"功能请求"。将 YOUR_FORM_ID 替换为您的表单 ID。
测试您的集成
添加脚本和 HTML 后，测试您的小部件以确保它们正常工作：
- 检查小部件是否正确加载和显示
- 测试表单提交（它们将出现在您的仪表板中）
- 验证样式是否与您的网站设计匹配
- 在不同设备和屏幕尺寸上测试
高级配置
自定义样式
使用 CSS 自定义属性自定义小部件外观。将它们添加到小部件元素的 style 属性中。
示例：自定义品牌颜色
<div class="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="my-product"
data-context-type="launch"
style="
--askusers-color-primary: #8b5cf6;
--askusers-color-background: #ffffff;
--askusers-color-text: #1f2937;
--askusers-color-success: #10b981;
">
</div>一页上的多个小部件
您可以通过为每个小部件提供唯一的 context-id 来在同一页面上使用多个小部件。
<!-- Survey widget -->
<div class="askusers-survey-widget"
data-survey-id="YOUR_SURVEY_ID"
data-context-id="product-feedback"
data-context-type="survey">
</div>
<!-- Form widget for feedback -->
<div class="askusers-form-widget"
data-form-id="YOUR_FEEDBACK_FORM_ID"
data-context-id="article-123"
data-context-type="article">
</div>
<!-- Form widget for feature requests -->
<div class="askusers-form-widget"
data-form-id="YOUR_FEATURE_REQUEST_FORM_ID"
data-context-id="product-roadmap"
data-context-type="roadmap">
</div>框架集成
对于单页应用程序（React、Vue、Angular 等），当组件挂载或路由更改时，您需要手动初始化小部件，因为自动初始化仅在页面加载时发生。
React
function MyComponent() {
useEffect(() => {
// Manual initialization required for SPAs
if (window.AskUsersWidget) {
// Initialize survey widgets
window.AskUsersWidget.initializeSurveyWidgets?.();
// Initialize form widgets (handles all form types)
window.AskUsersWidget.initializeFormWidgets?.();
}
}, []);
return (
<div
className="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="my-component"
data-context-type="feedback"
/>
);
}Vue.js
<template>
<div
class="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="my-component"
data-context-type="feedback"
/>
</template>
<script>
export default {
mounted() {
// Manual initialization required for SPAs
if (window.AskUsersWidget) {
window.AskUsersWidget.initializeSurveyWidgets?.();
window.AskUsersWidget.initializeFormWidgets?.();
}
}
}
</script>Angular
@Component({
selector: 'app-my-component',
template: `
<div
class="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="my-component"
data-context-type="feedback">
</div>
`
})
export class MyComponent implements OnInit {
ngOnInit() {
// Manual initialization required for SPAs
if ((window as any).AskUsersWidget) {
(window as any).AskUsersWidget.initializeSurveyWidgets?.();
(window as any).AskUsersWidget.initializeFormWidgets?.();
}
}
}Svelte
<script>
import { onMount } from 'svelte';
onMount(() => {
// Manual initialization required for SPAs
if (window.AskUsersWidget) {
window.AskUsersWidget.initializeSurveyWidgets?.();
window.AskUsersWidget.initializeFormWidgets?.();
}
});
</script>
<div
class="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="my-component"
data-context-type="feedback"
/>重要： 每次渲染小部件组件时调用适当的 init 方法。小部件优雅地处理多次初始化，只会初始化尚未处理的新小部件。