Ask users logo
Ask users
BETA
Démarrer

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.

Documentation des widgets

Configuration des widgets

Découvrez les modes d'affichage, le positionnement, le dimensionnement, les animations et les paramètres de comportement

En savoir plus

Règles d'affichage

Contrôlez quand et à qui les widgets sont affichés en utilisant des règles de ciblage et des déclencheurs comportementaux

En savoir plus

Déclencheurs de widgets

Configurez les déclencheurs par bouton, icône et basés sur des conditions avec contrôle de fréquence

En savoir plus

Styles de widgets

Personnalisez les icônes, boutons, couleurs et créez de beaux designs de widgets

En savoir plus

Security and CSP

Configure Content Security Policy headers for widget integration

En savoir plus

Web Components

Utilisez Shadow DOM pour une isolation CSS complète lors de l'intégration sur des sites tiers

En savoir plus

docs.widgets.cards.reactLibrary.title

docs.widgets.cards.reactLibrary.description

En savoir plus
1

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.

Web Components (Shadow DOM)

Pour une isolation CSS complète lors de l'intégration de widgets sur des sites tiers, utilisez nos éléments personnalisés Web Component. Ils utilisent Shadow DOM pour empêcher les styles du site hôte d'affecter l'apparence du widget.

Quand utiliser les Web Components

Utilisez les Web Components quand:

  • Intégration sur des sites tiers où vous ne contrôlez pas le CSS
  • Le site hôte a des styles globaux qui entrent en conflit avec le widget
  • Vous avez besoin d'une cohérence visuelle garantie sur différents sites

Utilisez l'intégration standard div quand:

  • Intégration sur votre propre site où vous contrôlez les styles
  • Vous voulez que le widget hérite de certains styles du site hôte
  • Vous préférez la syntaxe des attributs data-*

Utilisation des Web Components

Les Web Components utilisent des attributs HTML propres au lieu des attributs data-*:

Widget de formulaire

<askusers-form
  form-id="YOUR_FORM_ID"
  display-mode="inline"
  prefill-email="user@example.com"
  prefill-name="John Doe"
></askusers-form>

Widget de sondage

<askusers-survey
  survey-id="YOUR_SURVEY_ID"
  display-mode="popup"
  trigger-style="icon"
  position="bottom-right"
></askusers-survey>

Correspondance des attributs

Attribut Web ComponentAttribut data-* équivalent
form-iddata-form-id
survey-iddata-survey-id
display-modedata-display-mode
prefill-emaildata-prefill-email
trigger-styledata-trigger-style

Support TypeScript

Si vous utilisez TypeScript avec React/JSX et obtenez des erreurs de type comme:

Property 'askusers-form' does not exist on type 'JSX.IntrinsicElements'

Téléchargez notre fichier de déclarations de type et ajoutez-le à votre projet:

// Download from: https://askusers.org/widget/askusers-widget.d.ts
// Then add to your project:
/// <reference path="path/to/askusers-widget.d.ts" />

Les déclarations de type incluent tous les attributs pris en charge pour les éléments personnalisés askusers-form et askusers-survey.

Activer les Web Components dans l'aperçu

  1. Allez sur la page d'aperçu du formulaire/sondage
  2. Faites défiler jusqu'à la configuration d'affichage du widget
  3. Trouvez la section Options d'intégration
  4. Cochez Utiliser Web Component pour l'isolation CSS
  5. Le code d'intégration généré utilisera la syntaxe Web Component

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 exemplesContacter le support