> For the complete documentation index, see [llms.txt](https://docs.colormass.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.colormass.com/configurator/integrations/webflow.md).

# Webflow

In this quick guide, we will walk you through how to embed your configurator `iframe` code into your Webflow project.

<figure><img src="/files/xNXqvYaSCysRPgv7y6Kk" alt=""><figcaption></figcaption></figure>

### Step 1: Open your project

Open your project in the Webflow Designer. Select the existing site or page where you want to integrate the 3D viewer directly.

<figure><img src="/files/Yg6tNjjQjbU2na57wBNk" alt="" width="375"><figcaption></figcaption></figure>

### Step 2: Add an Embed element

Next, you need to add a custom embed block to hold the configurator.

1. Click the Add Elements icon (`+`) in the top left panel or press `A` on your keyboard.
2. Scroll down to the Components section.
3. Drag the Embed element onto your page canvas where you want the 3D viewer to appear.

{% embed url="<https://vimeo.com/1217356078/b1031dbc2c>" %}

### Step 3: Paste the iFrame snippet

Start out by putting this basic iframe code snippet into the code editor of your new Embed element:

```html
<iframe
  src=""
  style="width: 100%; height:100%; border:0"
  allowfullscreen=""
></iframe>
```

#### Get your Configurator URL

Next, open your 3D configurator setup in the colormass platform.

1. Navigate to your project.
2. Click Publish 3D.
3. Select Copy Configurator URL.

<figure><img src="/files/5BOcKjC3QeXHmq54M8su" alt=""><figcaption></figcaption></figure>

#### Add the URL to Webflow

Copy the URL and paste it into the `src=""` attribute of the iframe code in Webflow. Your final code should look something like this:

```html
<iframe
    src="YOUR CONFIGURATOR URL HERE"
    style="width: 100%; height:100%; border:0"
    allowfullscreen=""
></iframe>
```

See the parts of this 3rd step recorded in the video below.

{% embed url="<https://vimeo.com/1217356079/d9333b17eb>" %}

### Step 4: Save and Publish

Once your code is pasted and you are happy with the placement of the embed element, click Save & Close on the embed editor. Finally, click Publish in the top right corner of Webflow to push your site live with the new 3D configurator.