> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.komo.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# iFrame Card

> Embed specific content from your webpage.

## What is it

The iFrame card is used to seamlessly embed and load content from your webpage such as forms, documents and videos.

## Watch it come to life

<iframe src="https://www.loom.com/embed/dcd9c51491be4d9895d10a51202ae6dc" title="Loom video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

## How do I build one?

* [Step 1: Add an iFrame card to your Hub](#step-1-add-an-iframe-card-to-your-hub)
* [Step 2: Add a link to your card](#step-2-add-a-link-to-your-card)
* [Step 3: Publish your card](#step-3-publish-your-card)

### Step 1: Add an iFrame card to your Hub

<img src="https://mintcdn.com/komotechnologies/lDpX8fzjw-uBAUV9/images/iframe-card-step-1-add-an-step-2.gif?s=e4a400b4559e6027edf9e2d692a17dce" alt="iFrame Card: step 2 — Step 1: Add an iFrame card to your Hub" width="2000" height="1098" data-path="images/iframe-card-step-1-add-an-step-2.gif" />

* Navigate to your **Engagement Hub**.
* Once there, click **Add content,** from here select **Embeds** and then **iFrame.**
* You will then see your new card has been added to your Hub.

### Step 2: Add a link to your card

<img src="https://mintcdn.com/komotechnologies/lDpX8fzjw-uBAUV9/images/iframe-card-step-2-add-a-step-2.webp?fit=max&auto=format&n=lDpX8fzjw-uBAUV9&q=85&s=93827d4c86a895525959df2283de4c8b" alt="iFrame Card: step 2 — Step 2: Add a link to your card" width="2862" height="1482" data-path="images/iframe-card-step-2-add-a-step-2.webp" />

* Clicking on the **iFrame** will open the editing module.
* **(1)** Paste the **embed code** here and a preview will appear below.
* **(2)** Enter the **iFrame height** of how you want to display it on the card
* **(3)** You can add an **author** tag by displaying the brand or person who's responsible for the card content.
* **(4)** Add a **description** to the card.

### Step 3: Publish your card

<img src="https://mintcdn.com/komotechnologies/lDpX8fzjw-uBAUV9/images/iframe-card-step-3-publish-your-step-3.webp?fit=max&auto=format&n=lDpX8fzjw-uBAUV9&q=85&s=38803377eac0b906cb9d9d87ebd6e92a" alt="iFrame Card: step 3 — Step 3: Publish your card" width="2876" height="1590" data-path="images/iframe-card-step-3-publish-your-step-3.webp" />

**Once you've completed all of these steps and are happy with all the aspects, it's time to get your card live!**

* **(1)** **Publish** your card manually and instantly for the world to see.
* **(2)** **Schedule** your card to be published and unpublished at set dates and times.
* **(3)** Click on **...** to **Preview** and interact with the card on the front end from a user's perspective before publishing it.

<Note>
  All competition entries will be recorded and will impact the card analytics.
</Note>

## **FAQ**

**Where can I find the URL?**

You can copy the link that is located in the search bar at the top of the page and paste that link into the **Paste link** setting in the card.

**Why does my URL link look funny in the iFrame card?**

Some websites aren't mobile phone supported. This means that the website will keep its format and dimensions when in the iFrame and you will need to scroll left and right to view the full URL.