> ## 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.

# Matterport Card

> Instructions on how to embed Matterport 3D walkthroughs in your Hub.

## Watch it come to life

<iframe src="https://www.loom.com/embed/bfca785399bf4b47be52028967d0f3ab" 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 />

## What is it?

Matterport allows you to share 3D virtual tours on your Hub.

## **Things to note**

* Only **Public** Matterport models can be embedded.
* You'll need to copy the embed code following clicking the play button
* The Matterport experience is different between desktop and mobile devices.
  * On desktop browsers, visitors to your Hub will be able to interact with Matterport without leaving the Hub. They can interact with the 3D space directly in the Matterport embed card.
  * On mobile browsers, visitors to your hub will be taken to the dedicated Matterport viewer page for the embedded space.
  * This limitation is applied by Matterport and cannot currently be changed.
* [Don't have a Matterport account? Click here to check it out. ](https://matterport.com/)

## How do I build one?

* [Step 1: Add a Matterport Embed card to your Hub](#step-1-add-a-matterport-embed-card-to-your-hub)
* [Step 2: Paste the link to the card](#step-2-paste-the-link-to-the-card)
* [Step 3: Publish your card](#what-is-it)

### Step 1: Add a Matterport Embed card to your Hub

<img src="https://mintcdn.com/komotechnologies/gslKLBOHswpMZg4u/images/matterport-card-step-1-add-a-step-2.gif?s=34cdafdf07702ea7b10a966482fea9e4" alt="Matterport Card: step 2 — Step 1: Add a Matterport Embed card to your Hub" width="2000" height="1094" data-path="images/matterport-card-step-1-add-a-step-2.gif" />

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

### Step 2: Paste the link to the card

<img src="https://mintcdn.com/komotechnologies/gslKLBOHswpMZg4u/images/matterport-card-step-2-paste-the-step-2.webp?fit=max&auto=format&n=gslKLBOHswpMZg4u&q=85&s=4da1747e2d3a4a0fbecb9a88e0791357" alt="Matterport Card: step 2 — Step 2: Paste the link to the card" width="2862" height="1476" data-path="images/matterport-card-step-2-paste-the-step-2.webp" />

* Clicking on **Matterport** will open the editing module.
* **(1)** Get the **embed code** and paste it here and a preview will appear below.

  <Accordion title="Getting the Matterport Embed Code">
    <Steps>
      <Step title="Visit the Matterport space you want to embed.">
        Once you start the 3D experience, by clicking the large play button icon, you can then click on the **"Share this Space"** button at the bottom right.

        <img src="https://mintcdn.com/komotechnologies/gslKLBOHswpMZg4u/images/matterport-card-step-2-paste-the-step-1.webp?fit=max&auto=format&n=gslKLBOHswpMZg4u&q=85&s=b8ea3fb8c6d2367775ef748a59dc7a3d" alt="Matterport Card: step 1 — Step 2: Paste the link to the card" width="1536" height="1152" data-path="images/matterport-card-step-2-paste-the-step-1.webp" />
      </Step>

      <Step title="Copy the URL">
        The link should be in the format [**https://my.matterport.com/show/?m=xxxxxxxxxxx**](https://my.matterport.com/show/?m=xxxxxxxxxxx)

        <img src="https://mintcdn.com/komotechnologies/gslKLBOHswpMZg4u/images/matterport-card-step-2-paste-the-step-1-2.webp?fit=max&auto=format&n=gslKLBOHswpMZg4u&q=85&s=5140e819680aceb0d0b0a5730bdfc09a" alt="Matterport Card: step 1 — Step 2: Paste the link to the card" width="1536" height="1152" data-path="images/matterport-card-step-2-paste-the-step-1-2.webp" />
      </Step>

      <Step title="Paste the URL in the Matterport embed card settings on your Hub.">
        <img src="https://mintcdn.com/komotechnologies/gslKLBOHswpMZg4u/images/matterport-card-step-2-paste-the-screenshot.webp?fit=max&auto=format&n=gslKLBOHswpMZg4u&q=85&s=de2561631511ed501fa3b14c4711c17a" alt="Matterport Card: step 2: Paste the link to the card" width="1536" height="1152" data-path="images/matterport-card-step-2-paste-the-screenshot.webp" />
      </Step>
    </Steps>

    <Tip>
      You may get a different sharing screen, depending on how you are viewing the Matterport space. In either case, you should be able to choose a "copy link to clipboard" option that will give you a link with the required format.
    </Tip>
  </Accordion>
* **(2)** You can also adjust the **height** of the embedded card here. Keep in mind the different experiences between desktop and mobile as called out at the start of this article.
* **(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/gslKLBOHswpMZg4u/images/matterport-card-step-3-publish-your-step-3.webp?fit=max&auto=format&n=gslKLBOHswpMZg4u&q=85&s=16a1adedde75216f515ab45a957ebce2" alt="Matterport Card: step 3 — Step 3: Publish your card" width="2880" height="1588" data-path="images/matterport-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>