# Embedding an Element

Embedding an [Element](https://app.gitbook.com/@monterosa/s/mic/~/drafts/-MlFp9WhhhYu-1MlSqBv/producer-guide/studio/timeline/elements) into a webpage is also done via iFrame embed codes.

The example below contains a style, width and max-width, height and max-height if needed, border and margin.&#x20;

The 'auto;' tells the the iframe container to show the scrollbar automatically if the content is greater in height than the container. The 'src' is the source file/url, where to fetch the content to display.

Watch out for the '`amp;`' (the character reference for "an ampersand") this is only needed when placed inside html code.&#x20;

In the case where the src url is used directly, as in placed into a url bar, then the '`amp;`' should be removed.

The example below also shows how the iframe code would sit somewhere within the 'body' text of an html web page.

```
<html><head></head>
  <body>
      <iframe style="display: block;width: 100%;max-width: 800px;height: 780px;border: none;margin: 0 auto;" src="https://apps.monterosa.cloud/fankit/24.14.0/index.html?h=d8azqlsqaww2f.cloudfront.net&amp;p=774455a6-cf8e-474f-b72c-f05c76914334&amp;e=98dae039-2ce2-40ce-b5e1-a63271be9bff"></iframe>
  </body>
</html>

```

Where `p` is Project ID and `e` is Event ID

```
p=774455a6-cf8e-474f-b72c-f05c76914334
e=98dae039-2ce2-40ce-b5e1-a63271be9bff
```

Both can be obtained via the embed pop up:&#x20;

<figure><img src="https://content.gitbook.com/content/q9pQqNk9IovpAN9EXqbX/blobs/K011PrxENLmfU3VB1W3o/Screenshot%202023-05-10%20at%2010.18.21.png" alt=""><figcaption></figcaption></figure>
