Probetrainings-Formular einbinden

Damit du Probetrainings-Anfragen deiner Webseiten-Besuchern erhalten kannst, muss das Probetrainings-Formular auf deiner Webseite eingebunden werden.

Damit deine Besucher dein Probetrainings-Formular 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 kampfsport.center Webseite geschieht dies automatisch und du kannst diesen Schritt überspringen.

In diesem Artikel

SDK einbinden

Damit das Probetrainings-Formular 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 Schul-Token welchen du im Einbetten Bereich des Admin-Panels findest.

<script src='//embed.kampfsport.center/v1/your-token.js' async='async'></script>

Beispiel:

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

Link zum öffnen des Probetrainings-Formular ausrüsten

Du kannst jeglichen Elementen auf deiner Webseite mit der Funktionalität ausrüsten dein Probetrainings-Formular 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 Probetrainings-Formular Ü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 Probetrainings-Formular Übersicht im Admin-Panel.

Falls unsere Standard-Parameter mit deiner bestehenden Webseite Probleme bereitet, kann dieser nach Bedarf in den Probetrainings-Formular 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