SOMMAIRE

Définition du SDK et de la DIV
Paramétrage à suivre pour installer le SDK et la DIV
Paramètres avancés du SDK
Mise en place du SDK et la balise DIV pour une série d’opérations
Comment créer une série d’opérations ?
Conseils à l’intégration

Définition du SDK et de la DIV

Le SDK et la balise DIV permettent d’installer un jeu sur un site web.

2. Paramétrage à suivre pour installer le SDK et la DIV

Vous devrez vous rendre dans l’onglet diffusion de votre opération pour récupérer les informations :

Le SDK doit être installé une seule fois n'importe où sur votre page. Généralement il est intégré avec les autres scripts, dans le header ou le footer.

La balise 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.

Chaque opération possède un SDK ID unique. Autrement dit, la balise div sera différente d’une opération à une autre. Il faudra à chaque installation modifier la balise div.

3. Paramètres avancés du SDK

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

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 - Activer les paramètres d'auto-passage du formulaire sur le formulaire de votre opération.
2 - Reprendre le SDK de l'opération concerné.
3 - Insérer le code suivant juste avant </script> : kx('formAutoFill',
4 - 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":"variable de l'email",
"lastname":"variable du nom",

"firstname":"variable du prénom",
});

Exemple de SDK avec paramètres avancés :

<head>

<script>

kx('formAutoFill', {

"email":"variable du client",

"lastname":"variable du client",

"firstname": "variable du client"

"extend_k6eWWHAQ": "variable du client"

});

</script>

</head>

Vous pouvez trouver la liste des champs supportés par l'auto-complétion ➡️ ici

4. Mise en place du SDK et balise DIV pour une série d’opérations

Afin de faciliter l’intégration de plusieurs opérations, vous pouvez générer un ID unique sur le page “Série d’opération” cela vous permet d’intégrer la balise qu’une seule fois. Les opérations s'afficheront en fonction des dates de publication.

L’ID sera associé aux opérations que vous aurez sélectionnées lors de la création de cette série d'opérations. Il vous suffit d'incorporer l’ID dans la balise d’intégration.

5. Comment créer une série d'opérations ?

Lorsque vous souhaitez générer un ID unique, vous devez suivre les étapes suivantes :

Se rendre dans l’onglet opérations

Se rendre sur la partie “Séries d’opérations”

Cliquez sur “créer une série d’opération”

Indiquer un intitulé pour votre série et choisir une ou plusieurs opérations à associer

Exemple :

Une fois l’ID créé, vous pouvez copier le code sdk et la balise div mise à disposition dans la partie intégration et le coller sur la page HTML du site sur lequel le jeu s’affiche.

N’oubliez pas d’ajouter ID de la série créé dans la balise d’intégration

*A noter, vous pouvez ajouter des opérations en cours sur des séries d’opérations déjà créées.

6. 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>

/* Centrer le jeu */

.k-contest { margin:auto; }

</style>

<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='https://kimple.co/sdk.js';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="P0k1hQJ" data-layout="responsive"></div>

</body>

</html>

------------------------------------------- FIN DU CODE -------------------------------

Qu’est-ce que le SDK ?