Guia de integração de widgets
Instruções completas para integrar pesquisas online e widgets de feedback no seu site.
Documentação de widgets
Configuração de widgets
Aprenda sobre modos de exibição, posicionamento, dimensionamento, animações e configurações de comportamento
Regras de exibição
Controle quando e para quem os widgets são mostrados usando regras de segmentação e gatilhos comportamentais
Gatilhos de widgets
Configure gatilhos baseados em botão, ícone e condição com controle de frequência
Estilos de widgets
Personalize ícones, botões, cores e crie belos designs de widgets
Security and CSP
Configure Content Security Policy headers for widget integration
Crie sua conta
Cadastre-se no Ask Users e escolha o plano que atende suas necessidades. Você receberá uma chave de API que usará para autenticar seus widgets.
Cadastre-se agoraAdicione os scripts ao seu site
Adicione estas tags de script à seção <head> do seu HTML. Substitua YOUR_API_KEY pela sua chave de API real do painel.
<!-- 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>
Nota: Inclua apenas os scripts para os tipos de widget que você planeja usar.
Adicione o HTML do widget
Coloque o HTML do widget onde você quiser que o widget apareça na sua página.
Widget de pesquisa online
<div class="askusers-survey-widget"
data-survey-id="YOUR_SURVEY_ID"
data-context-id="product-feedback"
data-context-type="survey">
</div>Widget de formulário (lista de espera, contato, feedback)
<div class="askusers-form-widget"
data-form-id="YOUR_FORM_ID"
data-context-id="product-launch"
data-context-type="product">
</div>Crie seu formulário no painel e use modelos como "Lista de Espera / Cadastro de Email", "Feedback Rápido (Curtidas)", "Formulário de Contato" ou "Solicitação de Recursos". Substitua YOUR_FORM_ID pelo ID do seu formulário.
Teste sua integração
Depois de adicionar os scripts e o HTML, teste seus widgets para garantir que estejam funcionando corretamente:
- Verifique se os widgets carregam e são exibidos corretamente
- Teste os envios de formulário (eles aparecerão no seu painel)
- Verifique se a estilização corresponde ao design do seu site
- Teste em diferentes dispositivos e tamanhos de tela
Configuração avançada
Estilização personalizada
Personalize a aparência do widget usando propriedades CSS customizadas. Adicione-as ao atributo style do elemento do widget.
Exemplo: Cores personalizadas da marca
<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>Múltiplos widgets em uma página
Você pode usar múltiplos widgets na mesma página atribuindo a cada um um context-id único.
<!-- 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>Integração com frameworks
Para aplicações de página única (React, Vue, Angular, etc.), você precisa inicializar manualmente os widgets quando os componentes montam ou as rotas mudam, já que a inicialização automática só acontece no carregamento da página.
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"
/>Importante: Chame o método init apropriado cada vez que renderizar um componente de widget. Os widgets lidam com múltiplas inicializações de forma elegante e só inicializarão novos widgets que ainda não foram processados.
Precisa de ajuda?
Se você encontrar problemas durante a configuração, estamos aqui para ajudar. Confira nossa documentação ou entre em contato com o suporte.