> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.superpath.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom Code Tile

# Custom Code Tile
Embedding custom HTML/CSS/JS into courses using the custom code tile

The custom code tile allows you to embed your own HTML, CSS, and JavaScript directly into your courses. This is perfect for adding custom interactive activities, mini-games, or specialized web content that goes beyond standard course elements.

Please note that the custom code tile is a premium feature. You must be on a Business+ plan to access and use this tile.

# Uploading Your Code
You can easily upload your custom web content directly into the custom code tile. The tile currently supports standard `.html` files and `.zip` files containing your web assets.

To upload your files:
1. Add a custom code tile to your course layout.
2. Select the empty tile in the editor to view the upload options.
3. Drag and drop your `.html` or `.zip` file into the dashed upload area.
4. Alternatively, click the upload area to browse your computer and select a file.
Once uploaded, your custom web content will immediately render inside the tile. If you need to replace the content, click the tile to open the floating settings menu and click the **Remove** button next to your file name.

# Adjusting Tile Settings
After uploading your content, you can configure how the custom code tile behaves within your course. Click on the custom code tile to open the floating settings menu.

## Auto Height
By default, the custom code tile uses the **Auto Height** setting. This ensures the tile automatically resizes to fit your embedded content perfectly without creating awkward scrollbars.

If you toggle Auto Height off, the tile will default to taking up a fixed amount of space in your layout row. You can then manually adjust the layout row's height if needed.

## Require Completion
You can require learners to interact with your custom code activity before they are allowed to finish the course. Toggle on **Require Completion** in the settings menu to enable this requirement.

When enabled, your custom code must send a specific completion signal back to AI course builder. In the settings menu, click **Copy Instructions** to get the exact details needed for this signal. You can share these copied instructions directly with your developer or paste them into an AI prompt when generating your custom code.

# Learner Experience
When learners interact with the custom code tile, they will see your content seamlessly embedded into the course flow.

Learners can click the fullscreen icon on the tile to expand your custom activity across their entire screen. This is especially useful for detailed interactive exercises, software simulations, or mini-games.

If you enabled the "Require Completion" setting, learners will see a visual completion status indicator on the tile. This status will automatically update to a completed state once they successfully finish the requirements of your custom activity.