Zum Hauptinhalt gehen

Lead Generator Widget auf Webseiten einbinden

Aktualisiert

Einleitung

Das Lead-Generator-Widget kann mithilfe eines einfachen HTML-Snippets in Ihre Website eingebettet werden. So können Ihre Besucher direkt auf Ihrer Seite mit dem Widget interagieren. Das Erscheinungsbild können Sie über konfigurierbare Parameter anpassen.

⚠️ Bitte beachten Sie: Um das Widget nutzen zu können, benötigen Sie einen gültigen API-Key. Diesen erhalten Sie von Ihrem Account Manager / Kundenbetreuer:in. 

Inhalt

  1. Konfiguration

  2. Lead Generator V1

    1. Konstruktor und Parameter

    2. Testen im Browser

  3. Lead Generator V2

    1. Konstruktor und Parameter

    2. Testen im Browser

  4. GDPR Konformität

1. Konfiguration

Der einfachste Weg, das korrekte HTML-Snippet zu generieren, ist die Verwendung unserer Konstruktoren.

  • Über den Konstruktor können Sie den bereitgestellten API-Key eingeben und bestimmte Elemente des Widgets direkt konfigurieren.
  • Das Tool erstellt dann automatisch das fertige Code-Snippet für Sie, welches Sie einfach kopieren und in Ihrer Website oder CMS einfügen können.

Wenn Sie den Code lieber manuell erstellen möchten, finden Sie die Details dazu in unserer API-Dokumentation und unter Punkt 2 und 3 für die jeweiligen Varianten verlinkt.

 

2. Lead Generator V1

1. Konstruktor und Parameter

Sie finden den Konstruktor für den Lead Generator V1 hier: 

=> https://fisher.pricehubble.com/fisher-constructor.html 

Wenn Sie eine manuelle Erstellung bevorzugen, finden Sie die technische Dokumentation dazu hier: Lead Generator V1. 

Sie können gewisse Parameter und damit das Erscheinungsbild Ihres Widgets anpassen. Für Lead Generator V2 sind dies: 

  • activeColor (1): Die ausgewählte Farbe wird auf alle aktiven Elemente wie Felder und Schieberegler angewendet, bei denen eine Aktion oder Auswahl des Users erwartet wird.

  • buttonColor (2): Die ausgewählte Farbe wird auf alle Buttons angewendet. 

  • textColor (3): Die ausgewählte Farbe wird auf alle Textelemente wie Feldtitel angewendet.

  • resizable (4): Legt fest, ob das Widget seine Höhe und Breite automatisch an den Container anpasst. Wird diese Option deaktiviert, behält das Widget eine feste Größe und passt sich möglicherweise nicht korrekt an unterschiedliche Bildschirm- oder Containergrößen an.

  • lang (5): Fixiert die Sprache des Widgets auf einen bestimmten Wert (z. B. de, fr, en); ohne diese Angabe passt sich die Sprache dynamisch an die Browsereinstellung an

  • scrollTopOffset (6): Legt fest, wie weit das Widget vom oberen Rand der Seite entfernt positioniert werden soll, wenn die Seite gescrollt wird.
    Dies ist nützlich, wenn eine feststehende Navigationsleiste einen Teil des Widgets verdeckt. Wenn Ihre Navigationsleiste beispielsweise 50 Pixel hoch ist, setzen Sie scrollTopOffset: 50, damit das Widget immer darunter sichtbar bleibt.

  • custom (7): Übermittelt zusätzliche Informationen, wenn das Widget-Formular gesendet wird.

Dieser Wert wird in die Lead-E-Mail aufgenommen, wodurch die Herkunft verfolgt werden kann. Wenn das Widget beispielsweise auf mehreren Webseiten implementiert ist, können Sie custom: ‚www.beispiel_seite.com‘ definieren, um zu identifizieren, von welcher Website die Anfrage stammt.

  • gaTrackingId (8): ermöglicht die Weiterleitung bestimmter Widget-Events an Ihr Google Analytics-Konto. Um dieses Tracking zu aktivieren, muss eine gültige GA4-ID angegeben werden.

  • iframe border (9): Legt fest, ob das iFrame einen sichtbaren Rahmen hat oder nicht.

2. Testen im Browser

Sie können den Lead Generator Widget schnell und einfach in Ihrem Browser testen, um die Formularstrecke zu sehen. 

⚠️ Bitte beachten Sie: Diese Test-URL zeigt nur eine Vorschau. Sie aktualisiert nicht das Widget auf Ihrer Website.

Die Verwendung dieser URL ist eine bequeme Möglichkeit, den Ablauf des Widgets, die Formularfelder und die -schritte zu testen, bevor Sie es integrieren.

 

3. Lead Generator V2

1. Konstruktor und Parameter

Sie finden den Konstruktor für den Lead Generator V2 hier: 

=> https://fisher-v2.pricehubble.com/constructor/fisher.html 

Wenn Sie eine manuelle Erstellung bevorzugen, finden Sie die technische Dokumentation dazu hier: Lead Generator V2. 

Sie können gewisse Parameter und damit das Erscheinungsbild Ihres Widgets anpassen. Für Lead Generator V2 sind dies: 

  • primaryColor (1): Diese Farbe wird im Allgemeinen auf das Widget-Design angewendet.
  • scrollTopOffset (2): Legt fest, wie weit das Widget vom oberen Rand der Seite entfernt positioniert werden soll, wenn die Seite gescrollt wird.
    Dies ist nützlich, wenn eine feststehende Navigationsleiste einen Teil des Widgets verdeckt. Wenn Ihre Navigationsleiste beispielsweise 50 Pixel hoch ist, setzen Sie scrollTopOffset: 50, damit das Widget immer darunter sichtbar bleibt.
  • titleSettingStatus (3): Mit dem Lead Generator Widget V2 können Sie den Titel und Untertitel der ersten Formularseite anpassen oder den Titel vollständig ausblenden. Sie können den Status von „Default“ (Standardtext) auf „Hidden“ (kein Titel) oder „Custom“ ändern.
  • Wenn Sie „Custom“ wählen, können Sie Ihren Titel und Untertitel in den Feldern darunter („Custom title“ und „Custom subtitle“) festlegen.
  • lang (5): Fixiert die Sprache des Widgets auf einen bestimmten Wert (z. B. de, fr, en); ohne diese Angabe passt sich die Sprache dynamisch an die Browsereinstellung an
  • gaTrackingId (8): ermöglicht die Weiterleitung bestimmter Widget-Events an Ihr Google Analytics-Konto. Um dieses Tracking zu aktivieren, muss eine gültige GA4-ID angegeben werden.

Erste Formularseite mit Standardtiteln: 

Setup mit benutzerdefinierten Titeln: 

2. Testen im Browser

Sie können den Lead Generator Widget schnell und einfach in Ihrem Browser testen, um die Formularstrecke zu sehen. 

  • Schritt 1: 

    Basis URL: https://fisher-v2.pricehubble.com/?api-key={{API_key}}
    Ersetzen Sie {{API_key}} durch Ihren tatsächlichen API-Key.

  • Schritt 2: 

    Um das Widget in einer bestimmten Sprache zu testen, anstatt die Sprache des Browsers zu verwenden, fügen Sie den Parameter lang hinzu: 

    Beispiel: https://fisher-v2.pricehubble.com/?api-key={{your_API_key}}&lang=de

    lang=de legt die Sprache auf Deutsch fest

⚠️ Bitte beachten Sie: Diese Test-URL zeigt nur eine Vorschau. Sie aktualisiert nicht das Widget auf Ihrer Website.

Die Verwendung dieser URL ist eine bequeme Möglichkeit, den Ablauf des Widgets, die Formularfelder und die -schritte zu testen, bevor Sie es integrieren.

 

4. GDPR Konformität

Um den Bestimmungen von GDPR / DSGVO zu entsprechen, dürfen Analytics nur nach Zustimmung des Nutzers aktiviert werden. Der Parameter consentGranted steuert, ob das Widget während der Initialisierung Analysedaten an Dienste von Drittanbietern (wie Google) senden darf.

  • true → Tracking ist sofort erlaubt, wenn der Nutzer bereits zugestimmt hat. Die Zustimmung des Nutzers wurde bereits erteilt. Dies ist die Standardeinstellung.
  • false → Tracking ist zunächst blockiert. Sobald der Nutzer dem Tracking zustimmt, rufen Sie FisherWidget.grantConsent() auf, um Analytics zu aktivieren. Weitere Informationen zu diesem Ansatz finden Sie hier: Lead Generator - GDPR Configuration. 

consentGranted kann konfiguriert werden: 

  • im Kästchen "GDPR Consent granted" in den Konstruktoren
  • mit dem Parameter "consentGranted" direkt im HTML-Code-Snippet

Verwandte Beiträge

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.