> For the complete documentation index, see [llms.txt](https://help.felt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.felt.com/developer-platform/custom-popups.md).

# Custom popups

{% embed url="<https://www.youtube.com/watch?v=vXAL8FG2kuM>" %}

Custom popups let you fully customize the contents and layout of layer interactions within Felt. Describe what you want, and Felt AI generates the HTML, CSS, and JavaScript — code you can review and edit directly — all without leaving the Felt interface.

{% hint style="success" %}
This feature is only available to customers on the [Enterprise plan](https://felt.com/pricing). To upgrade, [contact sales](https://felt.com/sales).
{% endhint %}

## Examples

#### Interactive charts

Automatically generate interactive charts directly inside your popup to reveal trends and patterns at a glance.

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

#### Advanced navigation

Quickly create popups with expandable sections or tabbed navigation, so users can explore details without being overwhelmed.

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

#### Branded popups

Create custom popups that reflect your organization's identity, with brand colors, typography, and logos applied automatically.

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

## Create a custom popup with Felt AI

1. Click **Developer Platform** (![](/files/BHpadoUiULoA8m5mCqRJ)) in the [toolbar](/getting-started/tour-the-interface.md#toolbar) and select the option for **Custom popup**, then select the layer from the menu and click **Next**
   1. You can also start from the layer itself: open the style editor and set **Type** to **Custom HTML** in the **Popup** section
2. The popup configuration dialog will open with Felt's default popups in preview

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

   1. **the left side:** code editor (HTML/CSS/JS) and AI prompt area to chat with Felt AI (plus console logging for debugging)
   2. **the center:** previews (desktop & mobile available)
   3. **the right side:** layout controls (see [layout options](https://help.felt.com/layers/popup-interactions#layout-options))
3. Describe what you want your popup to display by typing in the AI prompt area
4. Review the generated HTML/CSS code and preview the popups in both Desktop and Mobile mode
   1. You can modify the code directly in the code editor.
5. Click **Save** (top right) once you are finished editing the popup
6. Test the popup experience by clicking on a feature in your map.

{% hint style="info" %}
All edits and changes are applied immediately to your previews, and once saved the changes are applied immediately to the live map.

You can always return to the configuration settings by clicking on **Edit...** in the **Content** row.
{% endhint %}

### Example prompts

* "Create a popup with tabs showing property details, demographics, and transit data in separate card layouts with the property photo at the top"
* "Show a bar chart comparing this location's sales data to regional averages"
* "Add an expandable section that shows basic info first, with a Show Details button"

## Write your own

You can also utilize pre-written HTML, CSS, and Javascript to control what appears when interacting with features. Felt uses the [Liquid Template Language](https://liquidjs.com/tutorials/intro-to-liquid.html) to make it easy to quickly build your custom HTML popups. Liquid includes features like iteration, conditional branching, and helpful [filters](https://liquidjs.com/filters/overview.html) to easily format text. Note: for security reasons, third-party iframe embeds might not work within custom HTML popups.

## Learn more

See [Popup interactions](/layers/popup-interactions.md) for the other popup types — standard and iframe — plus layout options and interaction behavior.

## Frequently asked questions

<details>

<summary>What are custom popups in Felt?</summary>

Custom popups let you fully customize the contents and layout of layer interactions within Felt using HTML, CSS, and JavaScript. You can have Felt AI generate the code from a description, or write and edit it yourself — all without leaving the platform.

</details>

<details>

<summary>Who can access custom popups?</summary>

This feature is only available to admins and editors on the Enterprise plan. To upgrade, you need to contact sales.

</details>

<details>

<summary>Do I need to write code to use this feature?</summary>

No, you can describe what you want using natural language prompts in the AI prompt area. Felt AI will generate the HTML/CSS/JS code for you, though you can modify the code directly if desired.

</details>

<details>

<summary>Can I preview my popup on different devices?</summary>

Yes, you can preview your popup in both Desktop and Mobile mode before saving.

</details>

<details>

<summary>When are changes applied to my map?</summary>

All edits and changes are applied immediately to your previews. Once saved, changes are applied immediately to the live map.

</details>

<details>

<summary>How do I edit a popup after saving it?</summary>

You can return to the configuration settings by clicking on **Edit...** in the **Content** row.

</details>

<details>

<summary>What languages/technologies can I use in the code editor?</summary>

The code editor supports HTML, CSS, and JavaScript.

</details>

<details>

<summary>Can I modify the generated code?</summary>

Yes, you can modify the code directly in the code editor after Felt AI generates it.

</details>

<details>

<summary>How do I test my popup after creating it?</summary>

Test the popup experience by clicking on a feature in your map.

</details>

<details>

<summary>Where can I find more information about popups?</summary>

See [Popup interactions](/layers/popup-interactions.md) documentation for more detailed information about popups.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.felt.com/developer-platform/custom-popups.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.