Special Signup Form: Delivering a Bonus Without Forwarding

In this article we would like to show you how you can create a signup form, which immediately delivers your bonus, using our API.

For this you require jQuery on your website. If you don’t use jQuery yet, please copy the following script and paste it onto the website in which you want to have the signup form:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This script loads a very reliable Google library which makes jQuery available to you.

Now please add the following code to your website in order to integrate the signup form.

<script type="text/javascript">

$( document ).ready(function() {
  
 $( "#bonus" ).hide();

  $( "#kt-button" ).click(function() {

    $( "#register" ).hide();
    $( "#bonus" ).show();

    var email = $("#kt-email").val();
    var api_key = "YXBpay0ydjMtNnktODgxMS0x";
    
    if ( email == "" ) return;
    
    $.ajax({
	type: "POST",
	url: "https://api.klicktipp.com/subscriber/signin",
	data: { 'email': email, 'apikey': api_key },
    });

  });

});

</script>

<div id="register">
<input id="kt-email" type="text" name="email" />
<input id="kt-button" type="button" value="Eintragen" />
</div>

<div id="bonus">
<p>This is where you display the bonus...</p>
</div>

The following is an explanation for the code above:

You signup form is split into two sections. The first section consists of the entry field for your prospective customer’s email address and a button, which they can use to sign up. This section is marked with the ID “register”.

<div id="register">
<input id="kt-email" type="text" name="email" />
<input id="kt-button" type="button" value="Eintragen" />
</div>

The second section of your signup form consists of the hidden bonus which to which your prospective customers gain access to immediately after signing up. This section is marked with the ID “bonus”.

<div id="bonus">
<p>This is where you display the bonus...</p>
</div>

To add your prospective customer to your ContactCloud, and to immediately after signing up send him your bonus, we use a JavaScript function.

First, we hide the bonus, which we only want to show once the prospective customer is signed up.

$( "#bonus" ).hide();

After the prospective customer, by clicking the “Anmelden” button (Signup button), has signed up and was entered into your ContactCloud, we hide the signup form and in its place display the bonus.

  $( "#kt-button" ).click(function() {

    $( "#register" ).hide();
    $( "#bonus" ).show();

Now we prepare for entering your prospective customer into your ContactCloud. In order to do that we determine two variables. In the variable “email” we save the email address the prospective customer entered into the signup form. In the variable “api_key” we save the API Key, which we previously created in our account. You have to replace this with your personal API key. After that we check whether or not your prospective customer has indeed entered an email address. If not, we don’t enter him into your ContactCloud.

    var email = $("#kt-email").val();
    var api_key = "YXBpay0ydjMtNnktODgxMS0x";
    
    if ( email == "" ) return;

Now we use the Klick-Tipp API’s function “signin”. It’s of the “POST” type and has to receive the parameters “email” and “apikey”. We integrate the previously defined variables “email” and “api_key” into these parameters. A complete list of functions of our REST API is listed in our manual entry Klick-Tipp REST API.

    $.ajax({
	type: "POST",
	url: "https://api.klicktipp.com/subscriber/signin",
	data: { 'email': email, 'apikey': api_key },
    });

Your prospective customer will now be entered into your ContactCloud and will simultaneously see your provided bonus displayed on the signup page.