Inscrivez-vous à notre newsletter ! Non, merci
Support Base de connaissance V9 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

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.