# Embedding Katacoda

This is only available as part of a paid subscription. More details at https://katacoda.com/embed/

Once you have a paid subscription, to embed Katacoda into your website requires two lines of code to be added to a web page, similar to adding Google Analytics or a HubSpot form.

Based on the web page you want to have the scenario displayed on, add the two following lines.

# Line 1 - Include Script Tag

Add the following line to enable the Katacoda capabilities on the page.

<script src="//katacoda.com/embed.js"></script>

# Line 2 - Display Scenario

To display a scenario, you need two pieces of information.

The first piece of information is the username of your Katacoda profile which is included in the URL. For the URL https://katacoda.com/scenario-examples has the username scenario-examples.

The second piece of information is the scenario you wish to embed. This is also included in the URL. For example, for https://katacoda.com/scenario-examples/scenarios/demo-scenario the scenario name is demo-scenario.

Once you have this, use the username and scenario name as the ID. The template of the line to add is:

<div data-katacoda-id="<username>/<scenario-name>" id="katacoda-scenario-1"></div>

For the above example, the complete HTML would be:

<div data-katacoda-id="<username>/<scenario-name>" id="katacoda-scenario-1"></div>

# Optional - Branding Customizations

Once you have embedded Katacoda you can configure various options to create a seamless experience with your website. The parameters can be found on the page Customizing Katacoda Embed.

# Optional - Usage Metrics

Katacoda raises events to the parent website when users engage with a scenario. This allows you to send additional metrics into your own systems such as Google Analytics, HubSpot or an LMS for completion data. Learn on how configure the event listener on our tracking page.