Widget-Integrationsleitfaden

Vollständige Anleitung zur Integration von Online-Umfragen und Feedback-Widgets in Ihre Website.

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

Erstellen Sie Ihr Konto

Melden Sie sich bei Ask Users an und wählen Sie den Plan, der Ihren Bedürfnissen entspricht. Sie erhalten einen API-Schlüssel, den Sie zur Authentifizierung Ihrer Widgets verwenden.

Jetzt anmelden

Fügen Sie Skripte zu Ihrer Website hinzu

Fügen Sie diese Script-Tags zum <head>-Bereich Ihres HTML hinzu. Ersetzen Sie YOUR_API_KEY durch Ihren tatsächlichen API-Schlüssel aus dem Dashboard.

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

Hinweis: Fügen Sie nur die Skripte für die Widget-Typen hinzu, die Sie verwenden möchten.

Fügen Sie Widget-HTML hinzu

Platzieren Sie das Widget-HTML dort, wo das Widget auf Ihrer Seite erscheinen soll.

Online-Umfrage-Widget

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

Formular-Widget (Warteliste, Kontakt, Feedback)

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

Erstellen Sie Ihr Formular im Dashboard und verwenden Sie Vorlagen wie "Warteliste / E-Mail-Anmeldung", "Schnelles Feedback (Daumen)", "Kontaktformular" oder "Feature-Anfrage". Ersetzen Sie YOUR_FORM_ID durch die ID Ihres Formulars.

Testen Sie Ihre Integration

Nachdem Sie die Skripte und HTML hinzugefügt haben, testen Sie Ihre Widgets, um sicherzustellen, dass sie korrekt funktionieren:

Überprüfen Sie, ob Widgets geladen und korrekt angezeigt werden
Testen Sie Formularübermittlungen (sie erscheinen in Ihrem Dashboard)
Überprüfen Sie, ob das Styling zu Ihrem Site-Design passt
Testen Sie auf verschiedenen Geräten und Bildschirmgrößen

Erweiterte Konfiguration

Benutzerdefiniertes Styling

Passen Sie das Widget-Erscheinungsbild mit CSS-Custom-Properties an. Fügen Sie sie dem style-Attribut des Widget-Elements hinzu.

Beispiel: Benutzerdefinierte Markenfarben

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

Mehrere Widgets auf einer Seite

Sie können mehrere Widgets auf derselben Seite verwenden, indem Sie jedem eine eindeutige context-id geben.

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

Framework-Integration

Für Single-Page-Anwendungen (React, Vue, Angular usw.) müssen Sie Widgets manuell initialisieren, wenn Komponenten gemountet werden oder Routen sich ändern, da die automatische Initialisierung nur beim Seitenladen erfolgt.

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

Wichtig: Rufen Sie die entsprechende init-Methode jedes Mal auf, wenn Sie eine Widget-Komponente rendern. Die Widgets handhaben mehrere Initialisierungen elegant und initialisieren nur neue Widgets, die noch nicht verarbeitet wurden.

Brauchen Sie Hilfe?

Wenn Sie während der Einrichtung auf Probleme stoßen, sind wir hier, um zu helfen. Schauen Sie sich unsere Dokumentation an oder kontaktieren Sie den Support.

Beispiele ansehen Support kontaktieren