Dépannage

Solutions aux problèmes courants lors de l'intégration de campagnes Gapila.

Ce guide vous aide à résoudre les problèmes courants lors de l'intégration de campagnes Gapila.

Erreurs courantes

"Invalid or expired embed token"

Cause : Le token JWT a expiré ou est invalide.

Solutions :

  1. Générez un nouveau token depuis Paramètres > Intégration Embed
  2. Les tokens expirent après 30 minutes
  3. Vérifiez que l'URL n'a pas été tronquée lors du copier-coller

"This domain is not authorized"

Cause : Le domaine de votre site n'est pas dans la whitelist.

Solutions :

  1. Ajoutez votre domaine dans Paramètres > Intégration Embed
  2. Vérifiez l'orthographe exacte du domaine
  3. Les sous-domaines doivent être ajoutés séparément :
    • monsite.com ≠ www.monsite.com
    • app.monsite.com ≠ monsite.com

"Game not found"

Cause : La campagne n'existe pas ou a été supprimée.

Solutions :

  1. Vérifiez que la campagne existe toujours dans Gapila
  2. Vérifiez l'ID de la campagne dans l'URL

"Campaign is not published"

Cause : La campagne n'est pas publiée.

Solutions :

  1. Publiez la campagne depuis l'interface Gapila
  2. Vérifiez le statut de la campagne

"Invalid wheel game data"

Cause : Les données de la campagne sont incomplètes.

Solutions :

  1. Vérifiez que la campagne a un template configuré
  2. Vérifiez que des segments existent sur la roue
  3. Contactez le support si le problème persiste

Problèmes d'affichage

L'iframe est vide / écran blanc

Diagnostics :

  1. Ouvrez la console du navigateur (F12)
  2. Vérifiez les erreurs réseau (onglet Network)
  3. Vérifiez les erreurs JavaScript (onglet Console)

Solutions courantes :

<!-- Assurez-vous que l'URL est correcte -->
<iframe src="https://gapila.com/embed/wheel/GAME_ID?token=TOKEN">
</iframe>

<!-- Vérifiez les permissions sandbox -->
<iframe
  src="..."
  sandbox="allow-scripts allow-same-origin allow-forms">
</iframe>

Le jeu est coupé / mal dimensionné

Solution : Ajustez les dimensions :

<iframe
  src="..."
  width="100%"
  height="700"
  style="min-height: 600px; max-width: 600px;">
</iframe>

Les styles de mon site affectent le jeu

Solution : L'iframe devrait isoler les styles. Si ce n'est pas le cas :

<!-- Assurez-vous de ne pas avoir de styles globaux ciblant les iframes -->
<style>
  /* ÉVITER */
  iframe * { font-family: Arial !important; }

  /* PRÉFÉRER */
  .my-content iframe { /* styles spécifiques */ }
</style>

Le jeu ne s'affiche pas sur mobile

Solutions :

  1. Utilisez une hauteur adaptée :
@media (max-width: 768px) {
  .gapila-iframe {
    height: 100vh;
    max-height: 600px;
  }
}
  1. Évitez overflow: hidden sur les conteneurs parents

Problèmes de fonctionnement

Le bouton "Tourner" ne fonctionne pas

Diagnostics :

  1. Vérifiez la console pour les erreurs JavaScript
  2. Vérifiez l'onglet Network pour les requêtes échouées

Solutions :

  1. Rafraîchissez la page
  2. Videz le cache du navigateur
  3. Testez dans un navigateur différent
  4. Vérifiez que la campagne est bien publiée

Les sons ne se jouent pas

Cause : Politique de lecture automatique des navigateurs.

Solutions :

  1. L'utilisateur doit interagir avec la page avant que les sons puissent jouer
  2. Ajoutez la permission autoplay :
<iframe src="..." allow="autoplay"></iframe>

Le formulaire ne s'envoie pas

Diagnostics :

  1. Vérifiez les erreurs réseau (onglet Network)
  2. Vérifiez les erreurs de validation dans la console

Solutions :

  1. Assurez-vous que le sandbox inclut allow-forms :
<iframe sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
  1. Vérifiez que CORS n'est pas bloqué

Les événements postMessage ne sont pas reçus

Diagnostics :

// Ajoutez un listener de debug
window.addEventListener('message', function(event) {
  console.log('Message reçu:', event.origin, event.data);
});

Solutions :

  1. Vérifiez que vous écoutez sur window, pas sur l'iframe
  2. Vérifiez le filtre d'origine :
// ❌ Trop restrictif
if (event.origin !== 'https://gapila.com') return;

// ✅ Incluez les variantes
if (!event.origin.includes('gapila.com')) return;

Problèmes de sécurité

Erreur CSP (Content Security Policy)

Message : Refused to frame 'https://gapila.com' because it violates the Content-Security-Policy directive

Solution : Ajoutez Gapila à votre CSP :

<meta http-equiv="Content-Security-Policy"
  content="frame-src https://gapila.com https://www.gapila.com;">

Erreur CORS

Message : Access to fetch has been blocked by CORS policy

Cause : Ce n'est généralement pas un problème d'embed mais de configuration API.

Solution : L'embed fonctionne via iframe, pas via fetch direct. Si vous voyez cette erreur, vérifiez votre code JavaScript.

Erreur Mixed Content

Message : Mixed Content: The page was loaded over HTTPS but requested an insecure frame

Solution : Utilisez toujours HTTPS :

<!-- ❌ HTTP -->
<iframe src="http://gapila.com/embed/...">

<!-- ✅ HTTPS -->
<iframe src="https://gapila.com/embed/...">

Outils de diagnostic

Console du navigateur

  1. Appuyez sur F12 (ou Cmd+Option+I sur Mac)
  2. Allez dans l'onglet Console
  3. Recherchez les erreurs en rouge

Onglet Network

  1. F12 > onglet Network
  2. Rechargez la page
  3. Cherchez les requêtes en rouge (échouées)
  4. Cliquez dessus pour voir les détails

Test d'isolation

Pour vérifier que l'embed fonctionne :

  1. Ouvrez l'URL d'embed directement dans un nouvel onglet
  2. Si le jeu s'affiche, le problème vient de l'intégration
  3. Si le jeu ne s'affiche pas, le problème vient du token/configuration

Validation du token

Pour débugger un token :

  1. Copiez le token (partie après ?token=)
  2. Allez sur jwt.io
  3. Collez le token pour voir son contenu
  4. Vérifiez les champs exp (expiration) et origin

Obtenir de l'aide

Si vous ne trouvez pas de solution :

  1. Documentation : Relisez les guides d'intégration
  2. Support : Contactez support@gapila.com avec :
    • L'URL de votre page
    • Les erreurs de la console
    • Des captures d'écran
    • L'ID de votre campagne

Prochaines étapes