Ein Anmeldeformular erstellen und einbetten

Dieser Artikel erklärt, wie Sie ein Anmeldeformular mithilfe des Engage-Widgets erstellen und einbetten können.

Was ist das Engage-Widget?

Das Engage-Widget ist ein leistungsstarkes On-Site-Tool, das Ihnen hilft, Ihre Kontaktliste zu erweitern, indem es Abonnenten direkt von Ihrer Website erfasst. Es ermöglicht Ihnen, anpassbare Anmeldeformulare zu erstellen, sie genau zum richtigen Zeitpunkt anzuzeigen und neue Kontakte automatisch an Ihre Listen zu senden – ganz ohne Programmierkenntnisse. 

Anmeldeformulare

Mit dem Engage-Widget können Sie den Traffic Ihrer Website ganz einfach in treue Abonnenten umwandeln. Egal, ob Sie sich auf die Lead-Generierung oder die Pflege Ihrer Community konzentrieren, ein gut platziertes Anmeldeformular kann den entscheidenden Unterschied machen. Beginnen Sie mit einer Vorlage, passen Sie sie an und gehen Sie live – alles in nur wenigen Minuten.

Ein Anmeldeformular erstellen

Gehen Sie im Hauptnavigationsmenü zu Einstellungen > Engage-Widget.

Gehen Sie dann zum Tab Anmeldeformulare und klicken Sie auf Mein erstes Formular erstellen:

Vorlagenauswahl

Als Nächstes können Sie aus einer Reihe von Vorlagen auswählen, die wir basierend auf verschiedenen Anwendungsfällen gruppiert haben - Lead-Generierung, Sales und Konversion oder Interaktion und Growth. Wählen Sie eine Vorlage, die Ihren Bedürfnissen entspricht, oder erstellen Sie Ihr eigenes Formular von Grund auf, indem Sie auf die Schaltfläche in der oberen rechten Ecke klicken.

Anpassung der Vorlage

Wenn Sie eine Vorlage auswählen, werden Sie zunächst aufgefordert, Ihrem Formular einen Namen zu geben und die Kontaktliste auszuwählen, der neue Abonnenten hinzugefügt werden. Wenn Sie noch keine Listen haben, werden Sie auf die Seite Kontaktlisten weitergeleitet, wo Sie eine erstellen können. So bleiben Ihre Kontakte von Anfang an geordnet.

Als Nächstes werden Sie zum Formular-Builder weitergeleitet, wo Sie das Formular anpassen können. Formulare sind in 3 individuell anpassbare Schritte unterteilt:

1. Blickfang – dies ist das erste Element, das Ihre Empfänger sehen, wenn sie mit dem Widget auf Ihrer Website interagieren.

2. Datenerfassung – hier füllen die Empfänger ein Formular aus, um die Daten zu sammeln, die Sie erfassen möchten. Sie können durch Hinzufügen von Feldern auswählen, welche Informationen (wie Name oder E-Mail-Adresse) gesammelt werden sollen. 

3. Bestätigungsseite – hier bestätigen Sie, dass alle erforderlichen Informationen erfasst wurden und alle nachfolgenden Aktionen stattfinden (z. B. die Anzeige eines Rabattcodes oder die Bestätigung, dass eine Buchung vorgenommen wurde). 

Sie können zwischen diesen im linken Menü wechseln. Sie können das Erscheinungsbild auch an Ihre Marke anpassen, indem Sie das Menü Design-Tools auf der rechten Seite der Seite verwenden.

Sie können zwischen der mobilen und der Desktop-Vorschau umschalten, indem Sie den Schalter unter der Vorschau verwenden:

Klicken Sie auf Änderungen speichern (wenn Sie mit der Anpassung des Formulars noch nicht fertig sind) oder auf Aktiv setzen. Das Formular wird nun in Ihrer Liste Anmeldeformulare als aktiver Artikel oder Entwurf angezeigt.

Anmelde-Vorlage konfigurieren und veröffentlichen

Wenn Sie auf Aktiv setzen klicken, wird der Dialog Vorlage veröffentlichen angezeigt. Dies ermöglicht es Ihnen, eine automatisierte Bestätigungsnachricht zu konfigurieren, die Abonnenten sofort nach der Anmeldung über Ihr Widget erhalten.

Bestätigungsnachricht

Wählen Sie aus, ob eine automatisierte SMS an neue Abonnenten versendet werden soll:

• Bestätigungsnachricht bei Anmeldung versenden – Eine SMS wird automatisch versendet, sobald jemand das Formular absendet. Nutzen Sie dies, um neue Abonnenten willkommen zu heißen und ihr Opt-in zu bestätigen.
• Keine Bestätigungsnachricht – Abonnenten werden stillschweigend hinzugefügt, ohne eine SMS zu erhalten.

Nachrichtenfeld

Wenn Sie Bestätigungsnachricht bei Anmeldung versenden ausgewählt haben, müssen Sie eine Nachricht eingeben – dieses Feld ist erforderlich. Schreiben Sie die SMS, die Abonnenten sofort nach der Anmeldung erhalten werden.

Platzhalter ermöglichen es Ihnen, die Nachricht mit Daten zu personalisieren, die über das Anmeldeformular gesammelt wurden. Um einen Platzhalter einzufügen, tippen Sie $input. gefolgt vom Feldnamen. Zum Beispiel fügt $input.firstname den Vornamen des Abonnenten ein. Platzhalter werden als Inline-Tags im Editor angezeigt und bei Versand einer SMS durch die tatsächlichen Daten des Abonnenten ersetzt.

Beispiel: Hallo $input.firstname, danke für die Anmeldung! Wir werden uns in Kürze bei Ihnen melden.

Absender-ID

Wählen Sie die Telefonnummer aus, von der die Bestätigungs-SMS versendet wird. Das Dropdown-Menü listet alle Absender-IDs auf, die in Ihrem Konto verfügbar sind.

Die Vorlage veröffentlichen

Sobald Sie mit der Konfiguration zufrieden sind, klicken Sie auf Aktiv setzen, um die Vorlage zu veröffentlichen und das Widget live zu schalten. Klicken Sie auf Abbrechen, um ohne Veröffentlichung zurückzukehren.

Das Formular wird in Ihrer Liste für Anmeldeformulare als aktiv angezeigt. Neue Abonnenten erhalten ab sofort Bestätigungsnachrichten gemäß Ihren Einstellungen.

Das Engage-Widget in Ihre Website einbetten

Um das Engage-Widget zu aktivieren, klicken Sie auf den Button Go Live .

Sobald das Widget veröffentlicht wurde, können Sie es bearbeiten, indem Sie auf das Symbol für weitere Optionen (⋮) klicken:

Wichtig: Sie können ein Anmeldeformular nicht löschen, wenn es veröffentlicht wurde und der Status des Widgets als live angezeigt wird. Zuerst müssen Sie auf Veröffentlichung aufheben klicken. Klicken Sie dann auf das Symbol für weitere Optionen (⋮) und Sie sehen eine Option zum Löschen:
 

Kopieren Sie den Installationscode aus dem Tab Installieren:

Fügen Sie ihn dann vor dem schließenden Tag </body> in den HTML-Code Ihrer Website ein. 

Das Widget zu Ihrem Shopify-Store hinzufügen

1. Kopieren Sie nach der Veröffentlichung des Widgets den generierten JavaScript-Installationscode.

2. Gehen Sie in Ihrer Shopify-Verwaltung zu Onlineshop > Themes.

3. Klicken Sie auf Anpassen, öffnen Sie dann das Drei-Punkte-Menü oben links und wählen Sie Code bearbeiten.

4. Wählen Sie im Abschnitt Layout die Option theme.liquid.

5. Fügen Sie den Widget-Code direkt vor dem schließenden Tag </body> ein.

6. Speichern Sie Ihre Änderungen. Nach dem Speichern wird das Engage-Widget in Ihrer Shopify-Storefront angezeigt.
    

Den Widget-Code über den Google Tag Manager hinzufügen

Fügen Sie das Widget zu Ihrem BigCommerce-Shop hinzu

Option A: Verwendung des Script Managers (empfohlen)

1. Kopieren Sie nach der Veröffentlichung des Widgets den generierten JavaScript-Installationscode.
2. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Storefront > Script Manager.
3. Klicken Sie auf Skript erstellen und füllen Sie die Details aus: Setzen Sie den Speicherort auf der Seite auf Fußzeile, wählen Sie für die Seiten Alle Seiten aus und als Skripttyp Skript.
4. Fügen Sie Ihren Installationscode für das Engage-Widget in das Feld für den Skriptinhalt ein.
5. Speichern Sie Ihre Änderungen. Ihr Engage-Widget ist nun auf Ihrer BigCommerce-Storefront live.

1. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Storefront > My Themes.
2. Klicken Sie bei Ihrem aktiven Theme auf Anpassen, um den Page Builder zu öffnen.
3. Ziehen Sie im linken Bereich ein HTML-Widget aus dem Bereich „Basic“ auf die Seite.
4. Fügen Sie Ihren Installationscode für das Engage-Widget in das HTML-Widget ein.
5. Speichern und veröffentlichen Sie Ihre Änderungen. Ihr Engage-Widget ist nun auf der ausgewählten Seite live.

Neue Einreichungen anzeigen

Neue Abonnenten werden automatisch in der ausgewählten Kontaktliste angezeigt, sobald ein Formular abgeschickt wurde.