Docs

Embedding guide

Any project on misconception.ai can be put on your own website: a frame of HTML, which shows the project there as it is on its own page, with its walkthrough, for as long as it is public.

Getting the code

  1. Open the project, and press Share at the top.
  2. Make it public: anyone with the link can then view it, and so can anyone who comes to your page.
  3. Under Embed on a website, choose how the project is to show: dark or light, with its steps and its controls or without, playing by itself, slowly turning, and the step it opens on. The code changes as you choose.
  4. Press Copy code.
  5. Paste it into your page, wherever HTML goes: a custom HTML block, which most site builders have, or the page itself. Where a site asks for an address rather than HTML, as Notion’s embed block does, give it the frame’s src alone.

The code

For the project this site shows as its demo, as by default, the code is this:

<iframe src="https://www.misconception.ai/embed/X8GLVmM0LxTVSJNofRZ5qDLG2sh1/6e8949a0-5d4b-417b-9840-2561a8c9f69e" title="Why we have seasons · misconception.ai" width="100%" height="480" style="border: 0; border-radius: 12px" allow="autoplay" allowfullscreen loading="lazy"></iframe>
<p style="margin: 6px 0 0; font: 13px/1.4 system-ui, sans-serif"><a href="https://www.misconception.ai/s/X8GLVmM0LxTVSJNofRZ5qDLG2sh1/6e8949a0-5d4b-417b-9840-2561a8c9f69e">Why we have seasons</a>, made with <a href="https://www.misconception.ai/">misconception.ai</a></p>

Line by line:

  • The iframe is the frame. Its src is the embed’s address: the project’s, under /embed, with the options after a question mark. Its title says what it is to screen readers.
  • width="100%" makes it as wide as the place it is put; height="480" is room for the scene and its steps. Both are yours to change: see Size.
  • allow="autoplay" lets the narration play once a reader presses Play; allowfullscreen lets them take the scene full screen; loading="lazy" has the browser load the frame only as the reader comes to it.
  • The line under the frame names the project and the site, each a link: to the project’s own page, and to misconception.ai.

And this is what it puts on the page:

Options

The Share menu writes the options into the frame’s address for you. To add one by hand, or change it later, put it after a question mark at the end of the address; more than one go with & between them, as in ?theme=light&autoplay=1. What the address does not say is as by default.

Theme?theme=light
Dark or light. The frame is dark unless its address says otherwise; it does not follow the theme of the page it is on.
Show steps?steps=0
The steps under the scene: their words, and the way from one to the next. Without them, the frame is the scene alone, with its first step on.
Show controls?controls=0
Play, turning, captions and full screen, on the scene. Hidden, the frame still links to the project.
Autoplay steps?autoplay=1
The frame goes through the steps by itself, in silence, until its reader takes over. See Autoplay.
Auto spin?spin=0
The view slowly turns round the scene while nobody steers it. On unless switched off here; a reader can switch it on or off with the controls.
Open on?step=3
The step the frame opens on, counted from 1.

Autoplay

A frame that plays by itself goes from step to step, showing each for as long as it takes to read, or to see its motion through once, and starts over at the end. It is silent: the narration plays only when a reader presses Play. It waits while the frame is mostly out of view, and stops for good once the reader takes over, by pressing Play, going to a step, or taking hold of the scene. It does not run for a reader whose device asks for less motion.

Scrolling past it

The frame takes care not to catch a reader scrolling past it. On a touch screen, a finger scrolls the page over the frame as over anything else, until a tap on it: then the frame says Tap to explore, and from the tap on, fingers turn and zoom the scene, until Done gives them back to the page. With a mouse, dragging turns the scene at once, while the wheel scrolls the page until a click on the frame; after it, the wheel zooms, until the mouse leaves the frame.

Size

The frame is as wide as its place and 480 pixels high, which fits the scene with its steps under it. Change the height as suits your page: a frame without steps can be lower, and a wide page can take a higher one. The scene fills whatever the frame is, and a reader can take it full screen with the controls.

As the project changes

The frame shows the project as it is now. A change by its maker shows on every page it is on, with nothing to update. Made private, or deleted, the frame says This project is not shared, and shows nothing else until it is public again.

What the frame does

The frame runs misconception.ai as the site’s own pages do: it loads the project from our servers, and we count its views by the name of the website it is on, as the Privacy policy says. Nothing is asked of your page, and nothing of your readers.