Inscrivez-vous à notre newsletter ! Non, merci
Support Base de connaissance V12 Médias Pages Web intégrées
Comment développer des pages Web intégrées pour les couches easylive.io ?

Voici quelques détails techniques lors de la création d'une page Web à intégrer dans l'éditeur de couche easylive.io :

1. Avoir un fond transparent


La transparence ne doit pas être gérée avec un canal alpha vert (ou une clé chroma) mais plutôt avec la transparence css activée et appliquée au corps de la page HTML.
Soit ajouter la règle css suivante :

body {
background-color:rgba(0,0,0,0);
}

ou le définir en ligne :

<body style="background-color:rgba(0,0,0,0);">

2. Lors de l'intégration de la page Web sur easylive.io, les interactions utilisateur ne sont pas autorisées. (Pensez à la page Web qui s'ouvre sur un navigateur du côté du serveur)

Cela a deux conséquences :

  • La page intégrée à easylive.io ne peut en aucun cas être cliquée ou utilisée de quelque manière que ce soit.
  • Les paramètres ne peuvent pas être sélectionnés ni mémorisés avec une méthode de stockage de données locale (par exemple, pas de paramètres sauvegardés avec les cookies).

Des paramètres spécifiques pour la page intégrée doivent être insérés à l'intérieur de la chaîne de requête URL ou de la structure de chemin, par exemple https://yourpagetoembed?setting1=test&setting2=option 

Concernant l'erreur "X-Frame-Options

Une erreur "X-Frame-Options" sera affichée comme suit :

"Refus d'afficher ''https://your-website'' dans un cadre parce que 'X-Frame-Options' est réglé sur 'XXX'".

Pour corriger cette erreur, modifiez les en-têtes de réponse et/ou les métadonnées de votre site web si vous y avez accès. Si vous ne le faites pas, cela signifie que le mode d'intégration est bloqué par la politique du site web.

- En-tête "X-Frame-Options" : la valeur autorisée est "ALLOWALL" ou "ALLOW-FROM https://www.easylive.io" si vous voulez juste autoriser easylive.io
- En-tête "Access-Control-Allow-Origin" : la valeur autorisée est "*". Vous pouvez également supprimer l'en-tête ou y ajouter https://www.easylive.io.

Plus d'infos:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Fuseau horaire : vous devez avoir un fuseau horaire fixe (l'heure sur votre machine et sur nos serveurs n'est pas identique).

Nous vous recommandons d'utiliser la dernière version du navigateur Chrome, merci de vérifier également dans vos paramètres Chrome que les cookies sont acceptés sur tous les sites (sinon vous aurez des problèmes d'affichage du panneau de contrôle d'easylive.io).

3. Comment savoir si c'est easylive.io qui charge ma page ? 


https://developer.mozilla.org/fr/docs/Web/API/Document/referrer

Pour détecter la page source, vous pouvez utiliser https://www.whatismyreferer.com/ (ajoutez cette page en tant que nouvelle page web dans le studio d'easylive.io).

Si le nom d'hôte est program.easylive.io, cela signifie que cette URL est liée au program easylive.io.

Si le nom d'hôte est *.easylive.io, cela signifie que cette URL est liée à la preview d'easylive.io.

Vous avez d'autres questions ?
Cliquez ici pour accéder à notre moteur de recherche de la base de connaissances.  

Vous ne trouvez pas la bonne réponse ?
Contactez l'équipe d'assistance d'easylive.io via notre Live Chat.