# AI popups

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

Custom AI-coded popups allow you to fully customize the contents and layout of layer interactions within Felt. With this feature you can build a custom interface and layout all within 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="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F3PvdamgLTfrLR3s9LwmL%2F2.webp?alt=media&#x26;token=d702c5ba-b76f-46b2-a49f-710f93e141cd" 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="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FxsrqeiyldGgHTIqX17X4%2F3.webp?alt=media&#x26;token=d2f415a9-591f-4c44-b1a2-3c203782a52d" 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="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FmIhmnjkCwAU3fm21Yfqw%2F4.webp?alt=media&#x26;token=ba314032-508e-4e02-96b1-e48f73c68470" alt="" width="563"><figcaption></figcaption></figure>

## Create a custom popup with Felt AI

1. Click Extensions (![](https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FOhxtHyEnA0PP0KmPsMk8%2Fbolt.svg?alt=media\&token=c0e3eaf0-444f-4616-b6c5-adc62595cf51)) in the [toolbar](https://help.felt.com/getting-started/tour-the-interface#toolbar) and select the option for **Custom popup**
2. Select the layer from the menu and click **Next**
3. The **popup interface** will open with Felt's default popups in preview

   <figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FYtd2eCu6uxKBhNeDhCCa%2Fai-popup.webp?alt=media&#x26;token=5ae35d0a-d5f1-4dba-a8d0-81470ff28d1d" 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)&#x20;
   3. **the right side:** layout controls (see [layout options](https://help.felt.com/layers/popup-interactions#layout-options))
4. Describe what you want your popup to display by typing in the AI prompt area
5. Review the generated HTML/CSS code and preview the pop ups in both Desktop and Mobile mode
   1. You can modify the code directly in the code editor.&#x20;
6. Click **Save** (top right) once you are finished editing the popup
7. Test the popup experience by clicking on a feature in your map.&#x20;

{% 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.&#x20;

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"&#x20;

## Learn more

See [popup-interactions](https://help.felt.com/layers/popup-interactions "mention") to learn about tips and tricks, advanced features, and debugging.

## Frequently Asked Questions

<details>

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

Custom AI-coded popups allow you to fully customize the contents and layout of layer interactions within Felt, all using HTML, CSS and JavaScript. You can build a custom interface and layout all within the Felt interface without leaving the platform.

</details>

<details>

<summary>Who can access AI-powered 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](https://help.felt.com/layers/popup-interactions "mention") documentation for more detailed information about popups.

</details>