Dans l'onglet "Diffusion", vous trouverez toutes les informations nécéssaire à l'installation d'un jeu Kimple sur un site web.

Installer un jeu sur un site

Vous allez avoir besoin des deux éléments présents dans l'onglet "diffusion".

Le premier est un bout de code Javascript (appelé SDK) permettant d'initialiser et de démarrer un jeu Kimple sur votre site internet.
Il peut être personnalisé afin de transmettre des informations additionnelles à Kimple, tels que des noms/prénoms/emails/... afin d'auto-remplir certains champs du formulaire.
Pour savoir comment installer ces paramètres je vous invite à vous rendre plus loin dans l'article dans la section "Paramètres avancés du SDK"

Le SDK ne doit être ajouté qu'une seule fois sur votre page. Généralement il est intégré avec les autres scripts, dans le header (mais peut très bien se trouver dans le body).

Le deuxième code à intégrer est une div.

Cette div est comme une sorte de boite qui va permettre d'afficher votre jeu. Il faut coller le code de la div à l'endroit où vous voulez afficher votre jeu sur votre page.

Paramètres avancés du SDK et de la DIV

Vous pouvez ajouter des options spécifiques dans votre SDK et votre DIV.

Paramètres avancés du SDK

Pré-remplir les champs du formulaire avec les données de vos clients :
S'ils sont connectés sur votre site vous pouvez récupérer leurs informations pour pré-remplir le formulaire :
1 - Reprendre le SDK de l'opération concerné.
2 - Insérer le code suivant juste avant </script> : kx('formAutoFill',
3 - Insérer tous les noms des champs que vous voulez pré-remplir suivi des variables que vous utilisez sur votre site (à la place des noms en gras) :
{
"email":"monemail",
"name":"myname"
});

Vous pouvez trouver le nom de nos champs en inspectant le code de la prévisualisation de votre opération.

Attention, la mise en place de paramètres avancés dans le SDK pour auto-compléter les données des participants peuvent être utilisé uniquement s'il s'agit d'une opération. Les paramètres avancés dans le SDK d'un mini-site ne sont pas fonctionnels.

Le code final de votre SDK ressemblera donc à ceci :

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

</script>

Passer automatiquement le formulaire

Lorsque vous souhaitez mettre en place le passage automatique du formulaire sur votre jeu, dans un premier temps vous devez activer l'option "autocreate" mise à disposition dans l'onglet juridique de votre opération. Cette option est fonctionnelle uniquement si vous mettez en place de l'autofill. De ce fait, le passage automatique du formulaire sera effectif, si tous les champs sont pré-remplis.

De plus, vous pouvez vérifier que les données soient présentes lors du pré-remplissage. Autrement-dit, si vous activez cette fonctionnalité, le formulaire pourra s'afficher si des informations requises ne sont pas indiquées.

Il vous suffit d'ajouter le code suivant à la suite du pré-remplissage :

kx('formAutoCreate', true);

Rendu final du 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>

Paramètres avancés de la div

Sur la page "Diffusion", sous les deux codes d'intégration, vous avez un tableau avec de nombreux paramètres. Si vous souhaitez les utiliser il vous faudra les intégrer dans la div comme suit :

Si, par exemple, vous voulez que votre jeu scroll automatiquement, il faudra prendre l'attribut data-auto-scroll="1". Cela donnera :
<div class="k-contest" data-id="XxxXXxX" data-layout="responsive" data-auto-scroll="1"></div>

Vous pouvez également mettre plusieurs paramètres les uns à la suite des autres :
<div class="k-contest" data-id="XxxXxxX" data-layout="responsive" data-auto-scroll="1" data-auto-scroll-only-mobile="1" data-loader-color="black" >

Paramètres dans l'URL

Vous pouvez intégrer tous les paramètres avancés du SDK et de la DIV directement dans l'URL de votre jeu. Cela est pratique dans le cas d'un email par exemple, dont le bouton "Jouer" comprendrai le pré-remplissage des données d'un consommateur précis. Ou si vous souhaitez juste afficher le jeu sur son lien kx1.co/contest-XXXX depuis une bannière en ayant un autoscroll.

Pré-remplir les champs
Pour ajouter des paramètres dans une url vous devez prendre l'url kx1.co/contest-XXXX et écrire juste derrière "?attribut=valeur_de_l_attribut".

Pour le pré-remplissage, la syntaxe est la suivante :
https://kx1.co/contest-MalvivL?form_auto_fill[email]=variable_de_l_email

Quand vous souhaitez ajouter plusieurs attributs il faudra placer un "&" entre les attributs, comme suit :
https://kx1.co/contest-MalvivL?form_auto_fill[email]=variable_de_l_email&form_auto_fill[name]=variable_du_nom

Autres paramètres :
Vous pouvez agir sur tous ces paramètres dans l'URL :
form_auto_fill[email]=monemail : pré-remplit le champ indiqué avec la variable choisie
form_auto_create=1 : passe automatiquement le formulaire, attention il doit être pré-rempli sinon vous n'aurez aucune information sauvegardée.

encode=1 : Permet de décoder les données form_auto_fill transmises en base64
auto_scroll=1 : Active le scroll automatique
auto_scroll_only_mobile=1 : Active le scroll automatique uniquement sur mobile
loader_color=black : Change la couleur du loader (peut recevoir de l'hexadécimal)
force_mobile_render=1 : Force le rendu mobile.
viewport_desktop="width=device-width, initial-scale=1" : Permet de surcharger le viewport en mode desktop
viewport_mobile="width=device-width, initial-scale=1" : Permet de surcharger le viewport en mode mobile

layout=mobile, desktop ou responsive : Permet de forcer un affichage particulier (responsive = adaptatif par défaut)

Conseils à l'intégration.

Pour que votre jeu s'intègre correctement dans un site vierge nous vous conseillons de l'intégrer comme suit :

------------------------------------------- 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="XXxxXxx" data-layout="responsive"></div>
</body>
</html>
------------------------------------------- FIN DU CODE -------------------------------

Sur mobile pour avoir un rendu correct, nous vous conseillons d'activer l'option qui permet de désactiver le changement du viewport. L'activation permet de ne pas impacter la dimension de la page web et optimisera l'affichage de votre jeu.

Ce paramétrage d'affichage est mis à disposition dans "la configuration de la taille du jeu"