Custom popups

Create interactive experiences with just a prompt.

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.

This feature is only available to customers on the Enterprise plan. To upgrade, contact sales.

Examples

Interactive charts

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

Advanced navigation

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

Branded popups

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

Create a custom popup with Felt AI

1. Click Developer Platform () in the 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

   

   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)

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.

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.

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 to make it easy to quickly build your custom HTML popups. Liquid includes features like iteration, conditional branching, and helpful filters to easily format text. Note: for security reasons, third-party iframe embeds might not work within custom HTML popups.

Learn more

See Popup interactions for the other popup types — standard and iframe — plus layout options and interaction behavior.

Frequently asked questions

What are custom popups in Felt?

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.

Who can access custom popups?

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

Do I need to write code to use this feature?

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.

Can I preview my popup on different devices?

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

When are changes applied to my map?

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

How do I edit a popup after saving it?

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

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

The code editor supports HTML, CSS, and JavaScript.

Can I modify the generated code?

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

How do I test my popup after creating it?

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

Where can I find more information about popups?

See Popup interactions documentation for more detailed information about popups.