โš›๏ธInteractive Tokens

An Interactive Token is basically a web page. You can use any technology you would use on the web and package it into a ZIP file. When packaging the files, make sure that the top level contains a file named index.html. A token zip might look like this for example:

.
โ”œโ”€โ”€ index.html (mandatory)
โ”œโ”€โ”€ style.css
โ”œโ”€โ”€ index.js
โ”œโ”€โ”€ js/
|   โ”œโ”€โ”€ lib1.js
|   โ””โ”€โ”€ lib2.js
โ””โ”€โ”€ styles/
    โ”œโ”€โ”€ style1.css
    โ””โ”€โ”€ style2.css

Make sure that all files are referenced relatively: (js/lib1.js and not /js/lib1.js). Also make sure you don't reference any external files or make external requests. These will all be blocked. If you're relying on third-party resources such as p5.js, please make sure you bundle them into your project and that it doesn't rely on any third-party references.

Presentation

Once the token is minted, it will run in a sandboxed iframe environment directly on objkt.com.

Allow features

The following permissions are enabled in the iFrame allow attribute:

accelerometer; camera; gyroscope; microphone; xr-spatial-tracking; midi;

Sandbox

By default, the iframe running your token is sandboxed with the following properties using the sandbox attribute:

allow-scripts allow-downloads

If the user enables Advanced Mode the allow-same-origin property will be added to the sandbox attribute:

allow-scripts allow-downloads allow-same-origin

Advanced Mode

Users have the option to enable Advanced Mode which adds the allow-same-origin property to the iFrame sandbox attribute (see above). The setting can be enabled and disabled globally in the user settings:

Or on a per-token basis directly in the token Properties tab:

Last updated