Anmeldeformular einbinden

Damit du Anmeldungen deiner Webseiten-Besuchern erhalten kannst, muss das Anmeldeformular auf deiner Webseite eingebunden werden.

Damit deine Besucher dein Anmeldeformular finden und öffnen können müssen ein oder mehrere anklickbare Links auf deiner Webseite eingefügt werden. Unsere SDK bindet dafür bereits automatisch einen schwebenden Button für dich ein. Du kannst aber auch deine eigenen Links dafür ausrüsten.

Besitzt du bereits eine keinaufwand Webseite geschieht dies automatisch und du kannst diesen Schritt überspringen.

In diesem Artikel

SDK einbinden

Damit das Anmeldeformular auf deiner Webseite geladen wird, muss unsere Javascript-SDK eingebunden werden.

Füge dazu den folgenden <script> Tag an letzter Stelle im <head> Tag deiner Website ein.

Ersetze your-token.js mit deinem persönlichen Formular-Token welchen du im Einbetten Bereich des Admin-Panels findest.

<script src='//embed.keinaufwand.com/v1/your-token.js' async='async'></script>

Beispiel:

<html>
  <head>
    ...
    <script src='//embed.keinaufwand.com/v1/your-token.js' async='async'></script>
  </head>
  <body>
    ...
  </body>
</html>

Link zum Öffnen des Anmeldeformular ausrüsten

Du kannst jeglichen Elementen auf deiner Webseite mit der Funktionalität ausrüsten dein Anmeldeformular zu öffnen. Füge dazu ein data-takashi-behaviour='open-modal' Attribute dem gewünschten Link oder Element hinzu.

Beispiel Link:

<a data-takashi-behaviour='open-modal' href='#'>
  Jetzt ein Probetraining vereinbaren
</a>

Formular mit Vorauswahl öffnen

Du kannst das Formular auch mit einem bereits vorausgewählten Standort oder Angebot öffnen. Dies ist besonders nützlich für Bereiche auf deiner Webseite, welche Informationen über einen spezifischen Standort oder ein spezifisches Angebot beinhalten.

Beispiel Link mit Standort als Vorauswahl:

<a data-takashi-behaviour='open-modal' data-takashi-select='location' data-takashi-id='ID' href='#'>
  Jetzt ein Probetraining in Liestal vereinbaren
</a>

Beispiel Link mit Angebot als Vorauswahl:

<a data-takashi-behaviour='open-modal' data-takashi-select='product' data-takashi-id='ID' href='#'>
  Jetzt ein Krav Maga Probetraining in Liestal vereinbaren
</a>

Der Wert data-takashi-id='ID' muss dabei mit der ID des gewünschten Standortes oder Angebotes versehen werden. Diese findest du in der Anmeldeformular Übersicht im Admin-Panel.

Formular mit JavaScript öffnen

Es ist auch möglich das Formular via JavaScript zu öffnen. Führe dazu folgenden Befehl aus:

_takashi.show_modal();

oder mit einer Vorauswahl:

# Standort
_takashi.show_modal('location', ID);

# Angebot
_takashi.show_modal('product', ID);

Formular automatisch beim Seitenaufruf öffnen

Oftmals kann es auch nützlich sein, dass Formular automatisch bei einem Seitenaufruf zu öffnen. Beispielsweise beim Versenden eines E-Mail Newsletters, Verlinken von deiner Facebookseite oder einer Werbekampagne.

Dazu musst du lediglich deinen Webseiten-Link mit einem Parameter ergänzen. Standardmässig nutzen wir trial als Parameter Name und open als Parameter Wert.

Beispiel Link mit dem Standard URL Parameter:

https://demo.dns.kampfsport.center?trial=open

Zusätzlich besteht auch die Möglichkeit das Formular beim automatischen öffnen via Seitenaufruf mit einer Vorauswahl zu öffnen.

Beispiel Link mit Standort als Vorauswahl:

https://demo.dns.kampfsport.center?trial=open&trial-select=location&trial-id=40

Beispiel Link mit Angebot als Vorauswahl:

https://demo.dns.kampfsport.center?trial=open&trial-select=product&trial-id=144

Der Wert für den Parameter trial-id muss dabei mit der ID des gewünschten Standortes oder Angebotes versehen werden. Diese findest du in der Anmeldeformular Übersicht im Admin-Panel.

Falls unsere Standard-Parameter mit deiner bestehenden Webseite Probleme bereitet, kann dieser nach Bedarf in den Anmeldeformular Einstellungen angepasst werden.

Das Ändern des Parameter-Namen hat auch Einfluss auf die Parameter zum öffnen des Formulars mit einer Vorauswahl. Wird der Parameter-Name beispielsweise von trial auf probetraining geändert, ändert sich der Parameter trial-select zu probetraining-select und trial-id wird zu probetraining-id.

Als Link würde dies wie folgt aussehen:

https://demo.dns.kampfsport.center?probetraining=open&probetraining-select=product&probetraining-id=144

Conversion Tracking mit JavaScript Events

Mit Hilfe von JavaScript Events können erfolgreich übermittelte Anmeldungen an Conversion Tracking Software wie Facebook Pixel und Google Analytics übermittelt werden.

Dazu muss auf der eigenen Webseite ein Event Listener mit dem Event takashiTrialSuccess eingerichtet werden.

Beispiel für Facebook Pixel:

document.addEventListener('takashiTrialSuccess', function(event) {
  fbq('track', 'Lead');
})
Produkt: Updates, Blog, Newsletter.
Bleib in Kontakt: E-Mail
Kleingedrucktes: AGB, Datenschutzerklärung, Impressum.
Copyright © Codegestalt. Alle Rechte vorbehalten.
Geniesse den Rest deines Samstags!