--- title: "Create Pop-ups with AI" slug: "create-ai-pop-ups" updated: 2026-02-10T14:00:33Z published: 2026-02-10T14:00:33Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Create Pop-ups with AI > [!WARNING] > Note: > > Pop-up creation using AI is currently a Beta feature. To enable the feature, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20Pop-up%20creation%20using%20AI&body=Hi%0A%0ACould%20you%20please%20enable%20Pop-up%20creation%20with%20AI%20feature%3F). Consider you are just notified about a webinar happening tomorrow, and you need to roll out a Pop-up to your end users. Whatfix helps you create brand-compliant Pop-ups within minutes with the help of AI. Choose from different Pop-up templates instantly generated by AI and customize it based on your needs. > [!NOTE] > Info: > > Expand the respective accordions for more details. **Create the AI Pop-up on Whatfix Studio** Use the following steps to create AI Pop-ups: 1. Log in to the application where you want to create content, and then launch **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. On the Whatfix Studio, click **Popup**. ![clm_studio_pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_studio_pop-up.png) 3. Choose the color theme using the **Theme** dropdown. ![2024-10-18_16-49-43.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_16-49-43%281%29.png) Note: Use custom color by entering the hex color code in the text box. ![Add hex color code for Pop-ups before you select a template](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Pop-ups_hexcolor_code.png) 1. Next to **Create popup with AI**, click **Create**.![Create AI Pop-ups on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Create_AI_Pop-ups_new.png) 2. Under **W****rite a prompt**,****explain your use case using a prompt. For more information, see [What's the character limit for prompts in AI Pop-ups?](/studio/docs/whats-the-character-limit-for-prompts-in-ai-pop-ups)![Create an AI Pop-up on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Create_AI_Pop-ups_Create_new.png) 3. Click **Create**. ![Click Create to create AI Pop-ups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Create_AI_Pop-ups_ClickCreate_new.png) 4. Click **Select** on the Pop-up template that you need. ![Select the AI Pop-up templates on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_AI_Pop-ups_SelectTemplates.png) > [!NOTE] > Info: > > - Sometimes, you can get up to three different Pop-up templates to choose from depending on your use case. The AI understands and suggests the Pop-up templates, intuitively, based on the prompts that you add. > - You have the option to add AI generated images on your Pop-ups. Write your prompts and enable the **Include AI generated image** toggle to start creating AI Pop-ups with images. [Can I add images to an AI generated Pop-up?](/studio/docs/can-i-add-images-to-an-ai-generated-pop-up) > > ![Create AI generated images for your pop-ups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_AI_Pop-ups_CreateAI_Image.png) > - You also have the option to **Edit** your prompts further.![Edit the Pop-up created using AI to re-create the templates](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_AI_Pop-up_Edit.png) > - If you are not happy with the output, use the **Re-Create** button to generate a different Pop-up template. > > ![Re-create the AI pop-ups on studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_AI_Pop-up_Edit_Re-create.png) > - Once you save the Pop-up, you cannot edit it further using Studio, and you have to create another Pop-up from scratch. Any changes you make are lost if you do not save the Pop-up during the creation step. > - Once you select a template, it appears on your screen. You can tweak the appearance of the Pop-up further by using several customization options on the Whatfix Dashboard. **Customize the AI Pop-up on Whatfix Dashboard** Whatfix enables you to make further modifications to the AI generated Pop-up to ensure it’s brand compliant. Here are the ways to customize the Pop-up further on Whatfix Dashboard. 1. On your Whatfix Dashboard, click **Widgets**. ![Click Widgets on the Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Click_Widgets.png) 2. Click **Pop-ups**. ![Click Pop-ups under Widgets on the Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Click_Popup(1).png) 3. Click the **Edit**icon of the Pop-up that you have created. ![Click the edit icon of the Pop-up on the dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_edit_Pop-up.png) 4. Using the Drag and Drop feature, move or re-position different rows on the Pop-up, both vertically (row-wise) and horizontally (column-wise). ![Use Drag Handlers to re-position the Pop-up content](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_AI_pop-up_Drag_Handlers.gif) 5. On the Pop-up template, edit the **Button** **Name** of your Pop-up. ![Edit the Button text of the AI pop-up on Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Ai_Pop-up_click_Button.png) 6. To customize the **Button** text, hover your cursor over the text and then double-click to open the Rich Text Editor. ![Open the rich text editor on the button of the pop-up created using AI](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Create_AI_pop-ups_RichTextEditor.png) **Following are the possible modifications within the button configuration menu:** a. To change the button configurations, hover your cursor over the button, and then click to open the button configuration menu. ![Open the button configuration menu of the AI pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_AI_Pop-up_Button_Configuration.png) b. Click the dropdown next to **Action**, and then select the button action. ![Click the Action dropdown in the AI pop-up next to Action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_AI_Pop-up_Button_Configuration_Click_Action.png) Understand the different types of **Button Action**, as well as their behavior and descriptions, in the following table: | Button Action | **Behavior** | | --- | --- | | Start Flow | When the user clicks this button, they are taken to a Whatfix Flow that is attached to the button. | | Attach URL | When the user clicks this button, they are taken to the URL that is attached to the button. | | Skip | When the user clicks this button, the Pop-up is omitted and they continue to see the Pop-up until they click the **Close** or **Don't show me again** button. | | Close | When the user clicks this button, they close the Pop-up. | c. Change the button Type to **Primary** or **Secondary**. - Primary Button represents the single, most important action a user should take on a screen. - Secondary Button represents any supporting actions that complement the primary goal. ![Gif showing the button types for the Pop-up created using AI](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_AI_pop-up_Button%20Type_GIF.gif) d. Click the **Button Style**icon to change the **Color**, **Hover color**, and **Corner radius** of the button. ![Click Button Style on the Pop-up created using AI](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_AI_pop-up_Button%20Style.GIF.gif) e. On the Rich Text Editor, click the + icon to open the **Add Component** dialog box. Add **Text,** **Button**, **Image**, **Video**, and/or **Audio** to the Pop-up. ![Click icon on the button of the Pop-up created using AI](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_AI_pop-up_Button_Click%20Plus%20icon.gif) f. Make additional modifications such as **Button Resize**, **Horizontal Align**, and **Vertical Align** on the AI generated Pop-up. ![Make further modifications on the Button of an AI Pop-up such as Button Resize, Horizontal Align, and vertical Align.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Ai_Pop-up_Button_modifications.GIF.gif) > [!WARNING] > Note: > > When you make changes to the Pop-up using the Drag Handlers, you may unfortunately not be able to undo certain changes. In that case, you may need to re-create the Pop-up. For more information, see [Can I undo the changes made with the Drag Handlers?](/studio/docs/can-i-undo-changes-made-with-the-drag-handlers) **Configure the AI Pop-up on Whatfix Dashboard** 1. On the Whatfix Guidance dashboard, click **Widgets**. ![ia_left_nav_widgets](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_widgets.png) 2. Click **Pop-ups**. ![ia_widget_popups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_popups.png) 3. Hover your cursor over the Pop-up segment you want to configure, and then click the **Edit** icon. ![CLM_DB_Click_edit_icon.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_Click_edit_icon.png) 1. Click **Set Visibility Rules**. ![Set visibility rules for pop-ups created using AI](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Ai_Pop-up_click-Visibility%20Rules.png) > [!WARNING] > Note: > > - Set the **Where** Visibility Rules for the Pop-up to appear on a specific page in the application. For more information, see [Visibility and Display Rule Conditions.](/studio/docs/visibility-and-display-rule-conditions-1) > - Set the **When**Visibility Rules for the Pop-up to appear at the desired time and date. For more information, see [Schedule Pop-ups](/studio/docs/scheduling-pop-ups). 2. Click **Save**. ![Add new visibility rules to widgets and click Save](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Widgets_New%20Visibility%20Rules_Save.png) 3. Once you are done creating the Pop-up, select the widget, and then click **Send to ready**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_send_to_ready_button.jpg) 4. Go to the **Ready**Stage, select the segment, and then click **Publish**. ![Publish content on Whatfix Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/db_clm_publishcontent.png) > [!WARNING] > Note: > > - End-users who skip the Pop-up repeatedly see it until they perform an action that counts as an interaction, or else the Pop-up reaches its maximum occurrence limit and stops appearing further. > - Pop-up creation using AI currently support English language content only. [Create a Pop-up using AI on Whatfix](https://player.vimeo.com/video/1089953740?badge=0&autopause=0&player_id=0&app_id=58479) The Whatfix Rich Text Editor enables you to format content using multiple options. It also enables you to link and include multimedia content. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/image-1720150380939.png) The primary button is associated with a positive user action based on the Pop-up's contents. For example, trigger a flow or open a URL. The Secondary Button is used to close or dismiss the Pop-up without triggering any specific action. Drag Handlers are used to move or reposition the component within the Pop-up.