Install a game on a site

In the "Distribution" tab you will find all the information to install a game on a website.

You will need the two codes present in the "diffusion" tab.

The first is an SDK, it allows you to call our services and can contain specific settings that allow you to auto-fill the form fields etc. To know how to install these settings, we refer youto the article in the section "Advanced SDK settings"

The SDK needs to be installed (just pasted) only once anywhere on your page. Usually it is integrated with the other scripts, in the header or the footer.

The second code to integrate is a div.

This div is like a sort of box that will allow you to display your game. You have to paste the code of the div where you want to display your game on your page.

You can add specific options in your SDK and DIV.

Pre-fill the form fields with your customers' data:

If they are connected to your site, you can retrieve their information to pre-fill the form:

1 - Use the SDK for the operation concerned.

2 - Insert the following code just before </script>: kx ('formAutoFill',

3 - Insert all the names of the fields you want to pre-fill followed by the variables you use on your site (instead of the names in bold):

{
"email":"monemail",
"name":"myname"
});

You can find the name of our fields by inspecting the code in our operation preview.

Please note that setting up advanced parameters in the SDK to auto-complete participant data can only be used for an operation. Advanced settings in the SDK of a mini-site are not functional.

The final code of your SDK will therefore look like this:

<script type="text/javascript">(function(){window.kx=window.kx || function(){(kx.q=kx.q||[]).push(arguments)};kx.l = +new Date;var k=document.createElement('script');k.id='k-jssdk';k.type='text/javascript';k.async=true;k.src='//kx1.co/sdk.js?v=1.7&apiKey=NbRLjJ6WKqgG84kdeB1z';var s=document.getElementsByTagName('script')[0];if(document.getElementById(k.id)){return;}s.parentNode.insertBefore(k,s);})();

kx('formAutoFill', {
"email":"votre_variable_email",
"name":"votre_variable_nom"
});

</script>

You just need to add the following code after the prefill:

kx ('formAutoCreate', true);

Final rendering of the SDK:

<script type="text/javascript">(function(){window.kx=window.kx || function(){(kx.q=kx.q||[]).push(arguments)};kx.l = +new Date;var k=document.createElement('script');k.id='k-jssdk';k.type='text/javascript';k.async=true;k.src='//kx1.co/sdk.js?v=1.7&apiKey=NbRLjJ6WKqgG84kdeB1z';var s=document.getElementsByTagName('script')[0];if(document.getElementById(k.id)){return;}s.parentNode.insertBefore(k,s);})();

kx('formAutoFill', {
"email":"monemail",
"name":"myname"
});

kx('formAutoCreate', true);

</script>

On the "Delivery" page, under the two embed codes, you have a table with many settings. If you want to use them you will need to integrate them into the div as follows:

If, for example, you want your game to scroll automatically, you will have to take the data-auto-scroll = "1" attribute. This will give:

You can also input several settings one after the other:

You can integrate all the advanced settings of the SDK and of the DIV directly in the URL of your game. This is practical in the case of an email for example, of which the button "Play" will include the pre-filling of the data of a specific consumer. Or if you just want to display the game on its kx1.co/contest-XXXX link from a banner with an autoscroll.

To add parameters in a url you must take the url kx1.co/contest-XXXX and immediately after type ?attribut=valeur_de_l_attribut.

For prefill, the syntax is as follows:

https://kx1.co/contest-MalvivL?form_auto_fill[email]=variable_de_l_email

When you want to add several attributes you will have to place an "&" between the attributes, as follows:

https://kx1.co/contest-MalvivL?form_auto_fill[email]=variable_de_l_email&form_auto_fill[name]=variable_du_nom

You can enable all of these settings in the URL:

form_auto_fill[email]=monemail : pre-fills the indicated field with the chosen variable

form_auto_create=1 : automatically skip the form, be careful it must be pre-filled otherwise you will not have any information saved.

auto_scroll = 1 : Activate the automatic scroll

auto_scroll_only_mobile = 1 : Activate the automatic scroll only on mobile

loader_color = black : Change the color of the loader (can receive hexadecimal)

force_mobile_render = 1 : Force mobile rendering.

In order for your game to integrate correctly into a blank site, we recommend that you integrate it as follows:

------------------------------------------- DEBUT DU CODE -------------------------------

<!doctype html>
<html>
<head>

<title>
Le titre de votre site
</title>

<script type="text/javascript">(function(){window.kx=window.kx || function(){(kx.q=kx.q||[]).push(arguments)};kx.l = +new Date;var k=document.createElement('script');k.id='k-jssdk';k.type='text/javascript';k.async=true;k.src='//kx1.co/sdk.js?v=1.5&apiKey=Ox08P7Q9wOEWnqaglmD6';var s=document.getElementsByTagName('script')[0];if(document.getElementById(k.id)){return;}s.parentNode.insertBefore(k,s);})();</script>
</head>
<body>

<div class="k-contest" data-id="VbeeHk9" data-layout="responsive"></div>
</body>
</html>
------------------------------------------- FIN DU CODE -------------------------------

For correct rendering on mobile devices, we advise you to activate the option to deactivate viewport changes. Activating this option will not affect the size of the web page, and will optimize the display of your game.

This display setting is available in "Game size configuration".

Install a game on a site

Advanced SDK and DIV settings

Advanced SDK Settings

Automatically skip the form

Advanced div settings

URL settings

Pre-fill the fields

Other settings:

Integration advice.