Using OKO Web in an iframe

OKO Web Client 2.52.0 / CSP 5.12.0

This guide will outline instructions on how you can use OKO Web in an iframe on your own website.

The guide expects a basic understanding of HTML and web server configuration.

Instructions

HTML

To get started, you will need to be able to add the iframe HTML code to the page you wish to embed OKO Web in.

The HTML you will need to add to your page is shown below.

CODE

<iframe 
    id="" 
    src="" 
    sandbox="allow-same-origin allow-scripts allow-modals allow-forms allow-pointer-lock allow-top-navigation" 
    allow="cross-origin-isolated" 
    title="">
</iframe>

In this sample code, you will notice that there are some empty fields; we will update those in the next steps.

The key takeaway from this code is that you must include the sandbox and allow properties as listed.

The next step is to populate the empty fields.

For id, this is at your discretion but should be a unique and meaningful identifier.
The src must be set to https://app.oko.live, or any other OKO page you wish to embed. For example, directly to a space.
Setting title is also at your discretion and will be what appears if the iframe does not load, it is best to set this to something that will describe the intent.

Server

You will need to configure your web server that is hosting the page with the iframe using specific headers configuration.

The two response headers you will need to set are: Cross-Origin-Embedder-Policy (COEP) and Cross-Origin-Opener-Policy (COOP).

The values need to be set as below:

CODE

Cross-Origin-Embedder-Policy: 'require-corp'

Cross-Origin-Opener-Policy: 'same-origin'

These need to be set in the web server configuration for your website that includes the iframe.

Output

If all works as expected, you should see something similar to the below (depending on your chosen link) where you placed the iframe.

If you do not, please check your HTML and server configuration again to ensure it has all the required properties. If you are still having problems, you can contact us at info@oko.live.