Démarrage Rapide

Intégrez votre première campagne Gapila sur votre site en moins de 5 minutes.

Ce guide vous permet d'intégrer une campagne Gapila sur votre site web en quelques étapes simples.

Étape 1 : Ajouter votre domaine

  1. Connectez-vous à votre compte Gapila
  2. Allez dans Paramètres > Intégration Embed
  3. Dans la section "Ajouter un domaine", entrez votre domaine :
monsite.com

Note : Entrez le domaine sans https:// ni chemin. Les sous-domaines comme app.monsite.com doivent être ajoutés séparément.

  1. Cliquez sur Ajouter le domaine

Étape 2 : Publier une campagne

Assurez-vous d'avoir au moins une campagne publiée :

  1. Allez dans Campagnes
  2. Sélectionnez une campagne ou créez-en une nouvelle
  3. Cliquez sur Publier si ce n'est pas déjà fait

Étape 3 : Générer le lien d'embed

  1. Retournez dans Paramètres > Intégration Embed
  2. Dans la section "Générer un lien d'intégration" :
    • Sélectionnez votre campagne
    • Sélectionnez le domaine cible
  3. Cliquez sur Générer le lien
  4. Copiez l'URL générée

L'URL ressemble à :

https://gapila.com/embed/wheel/abc123-def456?token=eyJhbG...

Important : Ce lien expire après 30 minutes. Générez-en un nouveau si nécessaire.

Étape 4 : Intégrer sur votre site

Option A : Iframe simple (recommandé)

Copiez ce code HTML sur votre page :

<iframe
  src="VOTRE_URL_EMBED_ICI"
  width="100%"
  height="700"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
  style="border: none; max-width: 600px; margin: 0 auto; display: block;">
</iframe>

Option B : Conteneur responsive

Pour un affichage responsive :

<div style="position: relative; width: 100%; max-width: 600px; margin: 0 auto;">
  <div style="padding-top: 116%; /* Ratio 600:700 */">
    <iframe
      src="VOTRE_URL_EMBED_ICI"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope">
    </iframe>
  </div>
</div>

Option C : Plein écran (modal)

Pour afficher le jeu dans une modal :

<button onclick="openGapilaGame()">Jouer maintenant !</button>

<div id="gapila-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999;">
  <button onclick="closeGapilaGame()" style="position: absolute; top: 20px; right: 20px; color: white; background: none; border: none; font-size: 24px; cursor: pointer;">✕</button>
  <iframe
    id="gapila-iframe"
    src=""
    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; height: 80%; border: none; border-radius: 12px;">
  </iframe>
</div>

<script>
  const EMBED_URL = "VOTRE_URL_EMBED_ICI";

  function openGapilaGame() {
    document.getElementById('gapila-iframe').src = EMBED_URL;
    document.getElementById('gapila-modal').style.display = 'block';
  }

  function closeGapilaGame() {
    document.getElementById('gapila-modal').style.display = 'none';
    document.getElementById('gapila-iframe').src = '';
  }
</script>

Étape 5 : Tester l'intégration

  1. Ouvrez votre page dans un navigateur
  2. Vérifiez que le jeu s'affiche correctement
  3. Testez une participation complète

Problèmes courants

Le jeu ne s'affiche pas

  • Vérifiez que le domaine est bien ajouté dans Gapila
  • Vérifiez que le token n'a pas expiré (30 min)
  • Ouvrez la console du navigateur (F12) pour voir les erreurs

Erreur "Origin not allowed"

Votre domaine n'est pas dans la whitelist. Ajoutez-le dans Paramètres > Intégration Embed.

Erreur "Token expired"

Le lien d'embed a expiré. Générez-en un nouveau depuis Gapila.

Prochaines étapes