# Embedding

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FSo7PHEJvg3cxpFrkuQxJ%2FBranded%20Embeds.mp4?alt=media&token=cf61d6ea-ebdd-4ea8-a153-923be50802db>" %}

{% hint style="info" %}
Embedded maps are available on Professional and Enterprise plans. Authentication-gated embeds (login required to view) are Enterprise only — [contact sales](https://felt.com/sales) for details.
{% endhint %}

Embed an interactive Felt map within your organization’s website, blog, or Notion page. Viewers will be able to pan, scroll and toggle Data Layers.

* To embed your map on a website, navigate to **`File > Embed`** in the **`Felt`** menu (upper-left corner) or the **`Share`** menu (upper-right corner).
* Add your company logo/name, customize the color bar, and choose which parts of the UI to show/hide, like the Legend.
* If components like **Measure** and **Search** are added to your map, they will also appear in the embed for viewers to interact with.
* Adjust the size using preset sizes or set a custom size.
* Move the map to the right spot, then copy the HTML iframe block to embed that view on your site.

{% hint style="info" %}

### Embedding in Notion or WordPress?

Instead of following these steps, simply copy the map link as seen in [Sharing a map](/sharing-and-collaboration/sharing-a-map.md). This is possible thanks to Felt's oEmbed API. See [Integrations](/sharing-and-collaboration/integrations.md) to learn more.
{% endhint %}

## Configuring embeds

<figure><img src="/files/3QPSSH30OusXl0pfshwi" alt="" width="563"><figcaption></figcaption></figure>

There are two ways to share an embed:

* **`Embed`**: add an `<iframe>` snippet on your website to include the map with other items on the page. This section will provide you with a code snippet to copy and paste onto your website.
* **`Web page`**: share your branded embed map as a full web page. This section will provide you with a Felt URL to share.

Toggle between **`Embed`** and **`Web page`** sections to share your embed as desired.

<div><figure><img src="/files/rimDjUbhIPlZNgwWP9Ro" alt="" width="257"><figcaption></figcaption></figure> <figure><img src="/files/se3nhWe65u0rYt4Ny78P" alt="" width="255"><figcaption></figcaption></figure></div>

#### Adding a top bar

Toggling **`Top bar`** on allows you to configure a custom color, logo, and text to the top of the Felt embed map. You can configure:

<figure><img src="/files/jEZDlHMSSG2O04Dlj3oC" alt="" width="563"><figcaption></figcaption></figure>

* **`Bar color`**: set a color to match your brand (pro tip: use our color picker tool)
* **`Bar logo`**: upload a logo icon to place in the top-left corner of the bar
* **`Bar text`**: set a top-level title for the embed

{% hint style="info" %}
The map title will remain on the map at the top of the legend, and the legend will be a collapsable list.
{% endhint %}

#### Controls & settings

For `<iframe>` **`Embed`** types, you can include or exclude the following map items:

{% columns %}
{% column width="41.66666666666667%" %}

* Interactive map legend
* Full screen map link
* Viewer location tool
* Zoom (- / +) buttons
* Scale bar
  {% endcolumn %}

{% column width="58.33333333333333%" %}

<div align="right"><figure><img src="/files/0XZ5s1Hn9jgwSYvoF2Q4" alt="" width="255"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column width="50%" %}
Default **`Zoom`** behavior to hook into **`On scroll`** behaviors on the website or requiring a modifier key ("Hold `cmd` while scrolling to zoom the map").

Default requires a modifier key.
{% endcolumn %}

{% column width="50%" %}

<div align="right"><figure><img src="/files/oprMtktw03TcDsia2lbB" alt="" width="258"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}
**`View`** represents the default viewport. These are the center coordinates and the zoom level at load or refresh.

Panning and zooming in the embed preview will change these parameters.
{% endcolumn %}

{% column %}

<div align="right"><figure><img src="/files/njKyMR658vFERwICGhDw" alt="" width="249"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

## Authenticated embeds

Although Felt's default embeds require public link access we support authenticated embeds for map links that cannot be public. We offer two options to provide secure access to your private embedded maps in your organization’s website, blog, or Notion page.

Access to embedded Felt maps can be gated in two ways:

1. **Token-based authentication**
2. **User-based authentication**

## Token-based authentication

Map access is limited by a single-use authentication token generated by [Felt’s REST API](https://developers.felt.com/rest-api/getting-started). Authenticate the embed view by including the token as a query parameter in the map URL.

Token-authenticated users can view the embedded map without signing in. If the token is generated with an associated user email address, those users can also export data from the map.

See the [developer documentation](https://developers.felt.com/rest-api/api-reference/embed-tokens) for implementation details.

## User-based authentication

Map access is limited to signed-in Felt users who have been explicitly invited to the map. Embedded views honor the same sharing permissions as the main map.

To configure user-based authentication:

1. Click the **Share** button in the upper-right corner of your map
2. Set **Public access** to **None**
3. Invite specific users by email (must match their Felt account email)

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

## Frequently asked questions

<details>

<summary>What is map embedding?</summary>

Map embedding allows you to display a live, interactive Felt map within your organization's website, blog, or Notion page. Viewers can pan, scroll, and interact with the map without leaving your site.

</details>

<details>

<summary>What plan do I need to embed a Felt map on my website?</summary>

Embedded maps are available on Professional and Enterprise plans. Authentication-gated embeds (login required to view) are Enterprise only — [contact sales](https://felt.com/sales) for details.

</details>

<details>

<summary>What can I customize in my embedded map?</summary>

You can:

* Add your company logo/name
* Customize the color bar
* Show/hide UI components, such as the Legend
* Adjust size using preset or custom dimensions
* Position the map view before embedding

</details>

<details>

<summary>What interactive features are available in embeds?</summary>

If dashboards and extensions like Bar charts, Measure, and Search are added to your map, they will also appear in the embed for viewers to interact with.

</details>

<details>

<summary>How can I share my embed?</summary>

There are two available options:

* **Embed**: Add an `<iframe>` snippet to include the map alongside other content on your page
* **Web page**: Share your branded embed as a standalone full web page using a Felt U

</details>

<details>

<summary>How can I control who can access my embedded map?</summary>

You can secure embedded maps using two authentication methods:

**1. Token-based authentication**

* Access is limited by single-use authentication tokens generated via Felt's REST API
* Users can view without signing in
* If the token includes a user email, those users can also export data
* See developer documentation for implementation details

**2. User-based authentication**

* Access is limited to signed-in Felt users explicitly invited to the map
* Embedded views honor the same sharing permissions as the main map
* To configure: Set Public access to "None" in the Share menu and invite specific users by email (must match their Felt account email)

</details>

<details>

<summary>What view settings can I configure?</summary>

The View setting represents the default viewport - the center coordinates and zoom level when the map loads or refreshes. Pan and zoom in the embed preview to adjust these parameters.

</details>

<details>

<summary>What is the default zoom behavior?</summary>

By default, zooming requires a modifier key (like holding cmd while scrolling). You can change this to hook into standard `On Scroll` behaviors on your website.

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.felt.com/sharing-and-collaboration/embedding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.