Join our mailing list! No, thanks
How to develop embedded webpages for easylive.io layers

Here are some technical details when creating a web page to be embedded in the easylive.io layer editor:

1. Have a transparent background

Transparency should not be handled with a green alpha channel (or chroma key) but rather have the CSS transparency enabled and applied to the body of the HTML page.
Either add the following CSS rule:

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

or define it inline:

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

2. When embedding the web page on easylive.io, user interactions are not allowed. (Think of it as the web page being opened on a browser on the server-side)

This has two consequences:

  • The page embedded on easylive.io can't be clicked or interacted with in any way
  • Settings can't be chosen nor memorized with any local data storing method (e.g. no settings saved with cookies)

Specific settings for the embedded page have to be inserted inside the URL query string or path structure, e.g. https://yourpagetoembed?setting1=test&setting2=option 

 

Regarding the "X-Frame-Options" error

An "X-Frame-Options" error will be displayed as follow:


"Refused to display ''https://your-website' in a frame because it set 'X-Frame-Options' to 'XXX'"

To correct this error, change the response headers and/or the metadata of your website if you have access to it. *If you don't, it means that embed mode is blocked by the website policy*

• "X-Frame-Options" header: allowed value is "ALLOWALL" or "ALLOW-FROM https://www.goeasy.live" if you just want to authorize easylive.io
• "Access-Control-Allow-Origin" header: allowed value is "*". You can also remove the header or add https://www.goeasy.live to it.

More info:
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

Have more questions?
Click here to head to our Knowledge base search engine.  

Can't find the right answer?
Contact the easylive.io Support team via our Live Chat.