# Pop-up

Add a pop-up to any step in your Guideflow to engage your audience, collect leads, gather feedback, or prompt the next action at the start, middle, or end of your demo.

{% hint style="info" %}
Gate your demo with a lead form before viewers start, or drop a meeting booking link at the end to convert engaged prospects directly.
{% endhint %}

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/1pz9nw6hvk>" %}

### How to add Pop Up Steps

* Open your Guideflow in the editor and click the ⚡ icon in the right panel to open the **Pop-up** tab.
* Click **+ Add a pop-up** to add a pop-up to that step.
* Select your pop-up **Style**: **Classic** or **Modern** (see below).
* Add a **Title** and **Description** for your pop-up under **Content**.
* Click **Add variables** to personalize the content with viewer-specific data like name or company.
* Customize your pop-up appearance under **Media**: upload a **Logo**, set a **Background**, and add a **Banner** or choose a **Cover** image.
* Select your pop-up **Type**: Button, Form, Survey, or Embed Widget.
* Click **Edit Popup theme** to customize the appearance for all pop-ups across your Guideflow.

***

### Pop Up Style

Choose how your pop-up looks and feels. Guideflow offers two styles, Classic and Modern.

#### **Classic Style**

<figure><img src="https://4163893681-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWblXMyxfkCwkQjxwW6TV%2Fuploads%2F57QEUqxSbq2uVDT5EvYc%2FScreenshot%202026-03-30%20at%208.11.45%E2%80%AFPM.png?alt=media&#x26;token=51ffa360-fd2f-4dbf-9e5d-3072921eb33a" alt=""><figcaption></figcaption></figure>

A focused, centered pop-up overlay. Best for keeping your audience's attention on the message without distraction.

* Upload a **Logo** to display your brand at the top of the pop-up.
* Upload an image or video as a **Banner** to add visual context to your pop-up.
* Set a **Background** color or image to customize the pop-up's backdrop.
* Choose an **Alignment** for your content: left, center, or right.

#### **Modern Style**

<figure><img src="https://4163893681-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWblXMyxfkCwkQjxwW6TV%2Fuploads%2FGmby2UlMefPuQAeRe0zt%2FScreenshot%202026-03-30%20at%208.15.30%E2%80%AFPM.png?alt=media&#x26;token=5f471aae-9342-4fe1-ad90-a34ea2f67027" alt=""><figcaption></figcaption></figure>

A full-screen split layout that keeps the demo visible alongside your pop-up content. Best for a more immersive, branded experience.

* Select a **Cover** image. Choose a step from your current Guideflow or upload a custom image to display alongside your pop-up content.
* Upload a **Logo** to display your brand on the pop-up.
* Set a **Background** color or image.
* Choose an **Alignment** for your content: left, center, or right.

***

### Pop Up Type

Select what kind of interaction your pop-up triggers. There are four types available.

#### **Button**

Display a message with one or two call-to-action buttons. Use buttons to guide viewers to the next step, redirect them to an external link, or send them to another Guideflow.

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/qp7em16fjk>" %}

* Edit the **button name**.
* Set the button action: navigate to a URL, or select **Navigate to a flow** to redirect to another Guideflow.
* Add a **secondary button** if needed and set its name and action.

> 💡 At the end of a product demo, add two buttons. "Book a meeting" linking to your Calendly and "Explore more" linking to another Guideflow so prospects can take the next step without leaving the demo..

#### **Form**

Collect information from your viewers directly within the demo. Use forms to gate your Guideflow, qualify leads, or capture contact details before or after key moments.

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/zpe6w7wt3k>" %}

* Click **+ Add a new field** to add form fields such as First Name, Last Name, Email, and Company.
* Toggle **Mandatory** on any field to require it before the viewer can proceed.
* Drag and drop fields to reorder them.
* Toggle on **I agree to...** to add a Terms and Conditions checkbox. Paste your T\&C URL so viewers can review before submitting.
* Edit the **submit button** label.
* Add a **Webhook URL** to automatically push form submissions to a Google Sheet, your CRM, or an email platform.

> 💡 Gate your demo by placing a form pop-up on the first step. Require Name, Email, and Company before viewers can start. All submissions are captured in your Leads tab and can be pushed to your CRM via Webhook.

#### **Survey**

Collect structured feedback from your viewers. Use surveys to run a quick pulse check, measure demo impact, or gather product insights

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/8kod8jzb5r>" %}

* Click **+ Add a survey** to add a survey to the pop-up.
* Select the survey type: **Single choice or Multiple choice.**
* Add your choices or rating scale.
* Edit the **submit button** label.

> 💡 If you've sent a product launch email with a guideflow, add a survey pop-up at the end asking "How likely are you to use this feature?" A quick way to gauge sentiment right after the demo while it's fresh.

#### **Embed Widget**

Embed external content directly inside your pop-up. No redirects, no friction. Use embed widgets to drop in lead capture forms from your existing marketing stack or let prospects book a meeting without leaving the demo.

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/1pz9nj0avk>" %}

* Click **+ Add an embed widget**.
* Click **Add embed code**.
* Click **Create a new embed code**.
* Select your embed provider: **HubSpot**, **Pardot**, **Eloqua**, **Marketo**, or **Other** for any other provider.
* Name your embed code and paste the embed code.
* Save and confirm.

> 💡 Embed your Calendly or Chili Piper link on the final step so a prospect who just watched your full demo can book a meeting with the sales team in one click. No context switching, no drop-off.