A code node lets you add your own interactive content to a Story by uploading a single HTML file. Use it for activities the other nodes don't cover, like a sorting game, a calculator or a mini simulation. The content plays inside the Story, and learners move on with the Continue button when they're done. You don't need to know how to code: an AI assistant can build the HTML file for you.
Let me show you how to set this up.
Before you start
You need one HTML file (.html or .htm) of up to 1 MB. Everything your content needs (text, styling, images and interactivity) has to be inside that one file.
The easiest way to make one is with an AI assistant such as ChatGPT, Claude or Copilot. Download our instructions for AI assistants below and give them to your assistant before you describe what you want. They explain exactly what works inside a code node, so the file works the first time.
Creating your HTML file with an AI assistant
Open your AI assistant and upload or paste the instructions file.
Describe what you want learners to do. Include who the learners are, the language, and your brand colors if the content should match them. For example: "Using the instructions I've shared, create an activity where learners sort eight AI systems into the four risk levels of the EU AI Act. Learners are compliance managers. Write it in English and use #4F46E5 as the main color."
Ask for one HTML file, then download it.
Open the file in your browser to check that it works. Make the browser window smaller to see how it looks on a phone or in a small window.
đŚ¸đ˝ââď¸ Pro tip: Before you download, ask your assistant to check the file against the checklist at the end of the instructions. It catches most problems before you upload.
Adding a code node to your Story
1) In your node map, open the node menu and select Code (shortcut: C).
2) Select the new code node, then select Edit to open it.
3) Drag your HTML file onto the upload area, or click the area to browse your computer. Your content appears as a preview straight away.
4) Adjust the settings in the right-hand panel (see below), then select Done to go back to your node map.
Customizing the code node
You can change how the code node looks in the right-hand panel:
Continue button: Change the button text (up to 50 characters) and set its
Background color and Text color.
Theme: Apply one of your themes to the node.
Background: Choose the color or gradient shown behind your content. If your HTML file sets its own background color, We Are uses it as the node background when you first upload the file, so the edges match.
Previewing on desktop and mobile
Use the desktop and mobile icons at the top right of the editor to see how your content looks on each screen size, and the play button to preview it. Learners may open your Story on a phone, or inside an LMS where the Story gets a small window, so check both views.
Replacing the HTML file
To upload a new version, select Replace file under HTML file, or drop the new file onto the preview. The node keeps its current background. If the new file uses a different background color, update Background to match.
What works inside a code node
To keep learners safe, your HTML file runs in a protected area of the Story. That means some things work differently from a normal website:
Images and scripts from other websites don't load. Images from your We Are media library and Google Fonts do.
Pop-up messages, new tabs, downloads and forms don't work. Ordinary links replace your content with no way back, so avoid links.
Nothing is saved. Progress resets every time a learner opens the node.
Scores and completion aren't sent to your LMS. Learners finish the node with the Continue button.
The bottom of the screen is reserved. The Continue button and player controls sit on top of it, so buttons placed there can't be clicked.
The instructions for AI assistants cover all of this, so you don't need to explain it yourself.
Troubleshooting
The upload is rejected
Check that the file ends in .html or .htm and is under 1 MB. Large images inside the file are the usual cause. Ask your assistant to compress them or use simpler graphics.
Images or styling are missing
The file is loading something from another website. Ask your assistant to put everything inside the file.
Buttons don't respond or the content is blank
The file most likely uses a library from another website. Ask your assistant to rebuild it with plain JavaScript and no external libraries.
A button is hidden behind the Continue button
Ask your assistant to keep the bottom 96 px of the screen free of buttons.
The content looks cramped inside an LMS
Ask your assistant to make the layout work in a window as small as 700 Ă 450 px, and on phones down to 320 px wide.