Guide d'intégration des widgets

Instructions complètes pour intégrer des enquêtes en ligne et des widgets de commentaires sur votre site web.

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

Créez votre compte

Inscrivez-vous à Ask Users et choisissez le plan qui correspond à vos besoins. Vous recevrez une clé API que vous utiliserez pour authentifier vos widgets.

S'inscrire maintenant

Ajoutez des scripts à votre site web

Ajoutez ces balises de script à la section <head> de votre HTML. Remplacez YOUR_API_KEY par votre vraie clé API du tableau de bord.

<!-- 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>

Note: Incluez uniquement les scripts pour les types de widget que vous prévoyez d'utiliser.

Ajoutez le HTML du widget

Placez le HTML du widget où vous voulez que le widget apparaisse sur votre page.

Widget d'enquête en ligne

<div class="askusers-survey-widget"
     data-survey-id="YOUR_SURVEY_ID"
     data-context-id="product-feedback"
     data-context-type="survey">
</div>

Widget de formulaire (liste d'attente, contact, commentaires)

<div class="askusers-form-widget"
     data-form-id="YOUR_FORM_ID"
     data-context-id="product-launch"
     data-context-type="product">
</div>

Créez votre formulaire dans le tableau de bord et utilisez des modèles comme "Liste d'attente / Inscription par email", "Commentaires rapides (Pouces)", "Formulaire de contact" ou "Demande de fonctionnalité". Remplacez YOUR_FORM_ID par l'ID de votre formulaire.

Testez votre intégration

Une fois que vous avez ajouté les scripts et le HTML, testez vos widgets pour vous assurer qu'ils fonctionnent correctement:

Vérifiez que les widgets se chargent et s'affichent correctement
Testez les soumissions de formulaires (elles apparaîtront dans votre tableau de bord)
Vérifiez que le style correspond au design de votre site
Testez sur différents appareils et tailles d'écran

Configuration avancée

Personnalisation des styles

Personnalisez l'apparence du widget en utilisant des propriétés CSS personnalisées. Ajoutez-les à l'attribut style de l'élément du widget.

Exemple: Couleurs de marque personnalisées

<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>

Plusieurs widgets sur une page

Vous pouvez utiliser plusieurs widgets sur la même page en donnant à chacun un context-id unique.

<!-- 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>

Intégration avec les frameworks

Pour les applications à page unique (React, Vue, Angular, etc.), vous devez initialiser manuellement les widgets lorsque les composants se montent ou que les routes changent, car l'initialisation automatique ne se produit qu'au chargement de la page.

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"
/>

Important: Appelez la méthode init appropriée chaque fois que vous rendez un composant de widget. Les widgets gèrent plusieurs initialisations de manière élégante et n'initialiseront que les nouveaux widgets qui n'ont pas encore été traités.

Besoin d'aide?

Si vous rencontrez des problèmes lors de la configuration, nous sommes là pour vous aider. Consultez notre documentation ou contactez le support.

Voir des exemples Contacter le support