Umfrage auf einer Webseite veröffentlichen

Über die Veröffentlichung der Umfrage auf einer Webseite

Technisch gesehen ist eine mit QUESTIONSTAR erstellte Online-Umfrage bzw. ein Online-Fragebogen eine gewöhnliche Webseite, die unter ihrem Link für Ihre Probanden verfügbar ist. Sie können diesen Link wie jeden anderen Web-Link unter Ihren Probanden verbreiten oder ihn in Ihre Webseite einbetten. In diesem Artikel erklären wir die verschiedenen Methoden, wie Sie Ihren Online-Fragebogen bzw. die Einladung zur Teilnahme an Ihrer Online-Umfrage innerhalb Ihrer Webseite integrieren können.

Link zur Umfrage auf der Webseite veröffentlichen

Die einfachste Methode, den Fragebogen in Ihre Webseite einzubauen, besteht darin, den Link zum Fragebogen auf Ihrer Webseite zu veröffentlichen. Das können Sie mit der Funktion “Link einfügen” Ihres Content-Management-Systems (CMS), oder durch die Eingabe eines einfachen HTML-Codes erreichen.

Angenommen lautet der Link zu Ihrer Umfrage https://survey.questionstar.com/nps-beispiel

Dann können Sie diesen Link i.d.R. mittels der Funktionen Ihres CMS oder durch die Eingabe vom folgenden HTML-Code in den Code Ihrer Website einfügen:

 

Und so Sieht dieser Code dann in Ihrer Website aus:
Hier klicken

iFrame-Methode

Eine gängige Methode, Webseiten (in diesem Fall Ihre Online-Umfrage) innerhalb anderer Webseiten (Ihrer Webseite), anzeigen zu lassen, ist das Einfügen des sogenannten iFrame (engl. „inline frame“) in Ihre Webseite. Das impliziert, dass Sie innerhalb Ihrer Webseite an der gewünschten Stelle den folgenden HTML-Code eingeben:

Und so sieht dann das Ergebnis aus:

Der Nachteil dieser Methode besteht darin, dass Sie von vornhinein die Breite und die Höhe der integrierten Webseite angeben müssen (die Eigenschaften “width” und “height” im o.g. HTML-Code). Da aber die einzelnen Seiten des Fragebogens typischerweise in ihrer Höhe variieren, kann es dazu kommen, dass Sie entweder zu wenig Platz für Ihren Fragebogen reservieren, sodass Ihre Probanden innerhalb des iFrames scrollen müssen, oder dass Sie zu viel Platz dem iFrame zuweisen und so die Webseite mit dem Fragebogen von Ihrem Probanden als unschön wahrgenommen wird.

In diesem Beispiel ist die Höhe zu kurz gewählt, sodass der Proband scrollen muss, um den Button zum Abschicken des Fragebogens in seinem Sichtfeld zu bekommen.

Umfrage in die Webseite einbetten

Alternativ zu der iFrame-Methode, können Sie Ihre Umfrage in Ihre Webseite mittels eines JavaScript-Snippets in Ihre Webseite einbetten. Dafür fügen Sie an der entsprechenden Stelle Ihrer Webseite den JavaScript-Code ein, den Sie auf dem Reiter “Einbettung” auf der Ansicht “Umfrage versenden” -> “Embed Code” erhalten.

Der Vorteil dieser Methode ist es, dass im Gegensatz zum iFrame,  die Höhe des in die Webseite integrierten Fragebogens sich immer auf die Höhe der anzuzeigenden Fragebogenseite anpasst.

Im Ergebnis sieht es so aus:

Umfrage im Popup öffnen

Sie können Ihre Umfrage im Popup-Fenster innerhalb Ihrer Webseite öffnen lassen. Dabei können Sie bestimmen, ob das Popup automatisch beim Laden der Seite oder nach dem Klick auf dem Link geöffnet werden soll.

Klicken Sie hier, um das Popup-Fenster mit dem Beispielsfragebogen zu öffnen.

Einladung zur Teilnahme an der Umfrage im Popup-Dialog anzeigen

Anstatt die eigentliche Umfrage in die Webseite einzubetten oder sie im Popup-Fenster anzeigen zu lassen, können Sie die Einladung zur Teilnahme an Ihrer Umfrage in einem Popup erscheinen lassen. Dabei können Sie einstellen, ob die Einladung sofort oder nach einer bestimmten Zeit angezeigt werden soll.

Zusätzlich merkt sich das Einladungs-Popup wenn die Besucher die Einladung abgelehnt haben und öffnet sich für solche Besucher nicht mehr, um sie nicht zu stören.

Außerdem können Sie in den Einstellungen der Einladung bestimmen, wie oft und wie vielen Prozenten Ihrer Besucher die Einladung gezeigt werden soll.

Klicken Sie hier, um das Einladungs-Popup-Fenster zu öffnen.

Einladung zur Teilnahme an der Umfrage als Button anzeigen

Sie können die Einladung zur Teilnahme an der Umfrage als Button anzeigen lassen. Platzieren Sie dafür einfach das Code-Snippet für die Button-Einbettung an der gewünschten Stelle auf Ihrer Webseite.

Einladung zur Teilnahme an der Umfrage als Feedback-Tab anzeigen

Haben Sie den Feedback-Tab am rechten Seitenrand bemerkt? Dies ist ebenfalls eine praktische Möglichkeit, Ihre Probanden zur Teilnahme an der Umfrage einzuladen. Mithilfe der Einstellungen im Code-Snippet können Sie festlegen, ob der Tab am rechten, linken oder unteren Seitenrand angezeigt werden soll.

Feedback-Tab

Code-Snippets zur Einbettung der Umfrage in Ihre Webseite

Die Code-Snippets zur Einbettung einer Umfrage in Ihre Webseite können Sie direkt aus QUESTIONSTAR kopieren.

Code-SnippetsGehen Sie dafür wie folgt vor:

  1. Wechseln Sie zur Ansicht „Umfrage versenden“.
  2. Wählen Sie links im Menü den Punkt „Embed Code“.
  3. Entscheiden Sie sich für eine der angebotenen Einbettungsmethoden:
    • Einbettung (direkte Integration)
    • Button (Integration per Klick auf einen Button)
    • Einladung (dezenter Hinweis zur Umfrageteilnahme)
    • Feedback-Tab (Seitenrand-Tab zur Teilnahme)
    • Modal (Popup-Dialog)
  4. Wählen Sie zwischen „Einfach“ und „Erweitert“:
    • Der einfache Code bietet eine schnelle Standardintegration.
    • Der erweiterte Code bietet zusätzliche Optionen zur individuellen Gestaltung der Einbettung sowie zur Verwaltung von Ereignissen (Events).
  5. Nutzen Sie das Augensymbol („Vorschau“), um eine direkte Vorschau der Integration zu erhalten und sich einen Eindruck davon zu verschaffen, wie die Einbettung auf Ihrer Webseite aussehen wird.
  6. Kopieren Sie den gewünschten Code über den Button „Embed Code kopieren“ in Ihre Zwischenablage und fügen Sie ihn anschließend an der gewünschten Stelle auf Ihrer Webseite ein.
  7. Zusätzlich haben Sie die Möglichkeit, eine abweichende Layout-Vorlage speziell für diese Einbettung zu definieren. Das ist beispielsweise sinnvoll, wenn Sie eine kleine Feedback-Umfrage (z.B. zu einem Blogartikel) in den natürlichen Lesefluss integrieren möchten und dafür ein Layout ohne Kopfzeile und Fortschrittsbalken bevorzugen.

 

Falls Sie mehr Kontrolle über die Einstellungen des Embed-Codes haben wollen, lesen Sie unseren Hilfe-Artikel Embed-Code: Erweiterte Einstellungen.