Skip to main content

Search

Hi. How can we help?

Embedded Webpages

  • Updated

How to develop embedded webpages for LiveU Studio layers

Here are some technical details when creating a web page to be embedded in the LiveU Studio 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 LiveU Studio, 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 LiveU Studio 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

You should not have any "X-Frame options" header parameters in your webpage.

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

Time zone: you must have a fixed time zone (the time on your machine and on our servers is not identical).

We recommend using the latest version of the Chrome browser, thank you to check also in your Chrome settings that cookies are accepted on all sites (otherwise you will have problems displaying the LiveU Studio control panel).

 

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