Ask Users - Online Forms and Surveys Builder

Ask users

BETA

Umfragen Formulare Blog Dokumentation Integrationen Preise

Anmelden LoslegenStart

Widget-Integrationsleitfaden

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

Widget-Dokumentation

Widget-Konfiguration

Erfahren Sie mehr über Anzeigemodi, Positionierung, Größe, Animationen und Verhaltenseinstellungen

Mehr erfahren

Anzeigeregeln

Steuern Sie, wann und wem Widgets angezeigt werden, mithilfe von Targeting-Regeln und Verhaltensauslösern

Mehr erfahren

Widget-Auslöser

Konfigurieren Sie Schaltflächen-, Symbol- und bedingungsbasierte Auslöser mit Frequenzkontrolle

Mehr erfahren

Widget-Styling

Passen Sie Symbole, Schaltflächen, Farben an und erstellen Sie schöne Widget-Designs

Mehr erfahren

Security and CSP

Configure Content Security Policy headers for widget integration

Mehr erfahren

Web Components

Verwenden Sie Shadow DOM für vollständige CSS-Isolation beim Einbetten auf Drittanbieter-Websites

Mehr erfahren

docs.widgets.cards.reactLibrary.title

docs.widgets.cards.reactLibrary.description

Mehr erfahren

1

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.

Web Components (Shadow DOM)

Für vollständige CSS-Isolation beim Einbetten von Widgets auf Drittanbieter-Websites verwenden Sie unsere benutzerdefinierten Web Component-Elemente. Diese verwenden Shadow DOM, um zu verhindern, dass Host-Site-Stile das Widget-Erscheinungsbild beeinflussen.

Wann Web Components verwenden

Verwenden Sie Web Components wenn:

Einbetten auf Drittanbieter-Sites, wo Sie das CSS nicht kontrollieren
Die Host-Site globale Stile hat, die mit dem Widget kollidieren
Sie garantierte visuelle Konsistenz über verschiedene Sites hinweg benötigen

Verwenden Sie Standard-div-Einbettung wenn:

Einbetten auf Ihrer eigenen Site, wo Sie die Stile kontrollieren
Sie möchten, dass das Widget einige Host-Site-Stile erbt
Sie die data-*-Attributsyntax bevorzugen

Web Component-Verwendung

Web Components verwenden saubere HTML-Attribute anstelle von data-*-Attributen:

Formular-Widget

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

Umfrage-Widget

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

Attributzuordnung

Web Component-Attribut	Äquivalentes data-*-Attribut
`form-id`	`data-form-id`
`survey-id`	`data-survey-id`
`display-mode`	`data-display-mode`
`prefill-email`	`data-prefill-email`
`trigger-style`	`data-trigger-style`

TypeScript-Unterstützung

Wenn Sie TypeScript mit React/JSX verwenden und Typfehler wie folgende erhalten:

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

Laden Sie unsere Typdeklarationsdatei herunter und fügen Sie sie Ihrem Projekt hinzu:

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

Die Typdeklarationen enthalten alle unterstützten Attribute für die benutzerdefinierten Elemente askusers-form und askusers-survey.

Web Components in der Vorschau aktivieren

Gehen Sie zur Formular-/Umfrage-Vorschauseite
Scrollen Sie zu Widget-Anzeigekonfiguration
Finden Sie den Abschnitt Einbettungsoptionen
Aktivieren Sie Web Component für CSS-Isolation verwenden
Der generierte Einbettungscode verwendet die Web Component-Syntax

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