Embed the Booking Form

To receive bookings from your website visitors, you need to embed the booking form on your website.

So your visitors can find and open your booking form, you need to add one or more clickable links to your website. Our SDK automatically adds a floating button for you. But you can also set up your own links to do this.

If you already have a keinaufwand website, this happens automatically and you can skip this step.

Embed the SDK

To load the booking form on your website, you need to embed our JavaScript SDK.

To do this, add the following <script> tag as the last element inside the <head> tag of your website.

Replace your-token.js with your personal form token, which you can find in the Embed section of the admin panel.

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

Example:

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

Add a Link That Opens the Booking Form

You can give any element on your website the ability to open your booking form. To do this, add a data-takashi-behaviour='open-modal' attribute to the link or element you want.

Example link:

<a data-takashi-behaviour='open-modal' href='#'>
  Book a trial class now
</a>

Open the Form with a Preselection

You can also open the form with a location or offer already preselected. This is especially useful for sections of your website that contain information about a specific location or offer.

Example link with a location preselected:

<a data-takashi-behaviour='open-modal' data-takashi-select='location' data-takashi-id='ID' href='#'>
  Book a trial class in Liestal now
</a>

Example link with an offer preselected:

<a data-takashi-behaviour='open-modal' data-takashi-select='product' data-takashi-id='ID' href='#'>
  Book a Krav Maga trial class in Liestal now
</a>

The value data-takashi-id='ID' must contain the ID of the location or offer you want. You can find it in the booking form overview in the admin panel.

Open the Form with JavaScript

You can also open the form with JavaScript. To do this, run the following command:

_takashi.show_modal();

or with a preselection:

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

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

Open the Form Automatically When a Page Loads

It's often useful to open the form automatically when a page loads, for example when sending an email newsletter, linking from your Facebook page, or running an ad campaign.

All you need to do is add a parameter to your website link. By default, we use trial as the parameter name and open as the parameter value.

Example link with the default URL parameter:

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

You can also open the form with a preselection when it opens automatically on page load.

Example link with a location preselected:

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

Example link with an offer preselected:

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

The value of the trial-id parameter must contain the ID of the location or offer you want. You can find it in the booking form overview in the admin panel.

If our default parameter causes problems with your existing website, you can change it as needed in the booking form settings.

Changing the parameter name also affects the parameters for opening the form with a preselection. For example, if the parameter name is changed from trial to probetraining, the parameter trial-select changes to probetraining-select and trial-id becomes probetraining-id.

As a link, this would look like this:
https://demo.dns.kampfsport.center?probetraining=open&probetraining-select=product&probetraining-id=144

Conversion Tracking with JavaScript Events

JavaScript events let you pass successfully submitted bookings to conversion tracking software such as Facebook Pixel and Google Analytics.

To do this, set up an event listener for the takashiTrialSuccess event on your website.

Example for Facebook Pixel:

document.addEventListener('takashiTrialSuccess', function(event) {
  fbq('track', 'Lead');
})