> This is part 1 of 2 of the full documentation (pages 1–100 of 146). > The content is paginated: fetch every part to see all of it. > Next part: https://docs.guideflow.com/help/llms-full.txt/1 > Page index: https://docs.guideflow.com/help/llms.txt # 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 This site has an agentic ask interface you may use to query the documentation dynamically by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.guideflow.com/help/index.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. --- # What is Guideflow? Guideflow is a plug-and-play SaaS that enables anyone to create interactive demos, product tours, and step-by-step guides in seconds. A guideflow is an interactive demo that you can share with anyone via a link embedded on a website, through an email campaign, inside a help center article, etc. A guideflow helps you show how to do something on an app or website, how a feature works, and its value. You can then use the guideflows you've created to boost your team's productivity, increase conversion rates and sales, or guide users into your platform. **Here is a guideflow example:** {% @guideflow/guideflow-embed requestedUrl="" fullWidth="false" %} Here are some other examples of what you can use Guideflow for:\ \ **Sales**: As an interactive sales material to send inside cold outreach campaigns, follow-ups, or during live demos.\ \ **Marketing**: As an interactive product tour that you can embed in your website to increase conversions and collect leads information.\ \ **Customer Success**: As onboarding content to guide new users into using your solution and reduce the workload for CSM teams.\ \ **Customer Support**: As a guiding material to embed inside help center articles or to share with users to guide them through complex workflows on your solution.\ \ **Employee training/onboarding**: As a training material for internal use that you can insert in your company's knowledge base (to show how to use software like Salesforce with the company processes).
### How does Guidelflow work? Thanks to Guideflow, you can capture a workflow on any app or website, create a customized experience, share it, and get detailed performance analytics.\ \ Guideflow relies on a Chrome extension and the web app.\ \ Thanks to the Chrome extension, you can capture a workflow on an app or a website. All screens and interactions (clicks and scrolls) will be captured to generate an interactive experience.\ \ After you capture the workflow with the Chrome extension, you can customize and manage your guideflows through our web app. There, you'll be able to add call-to-actions, edit the theme of your guideflow to make it match your brand identity, access detailed analytics, and various sharing options. 🚀 Ready to get started and [capture your first guideflow](/help/capture-a-guideflow/how-to-capture-a-guideflow)? # What can I use Guideflow for? Guideflows can be used for various use cases. Here is a quick overview of what you can use Guideflow for: * **Sales:** As an interactive sales material to send inside, cold outreach campaigns, follow-ups, or during live demos. * **Marketing**: As an interactive product tour that you can embed in your website to increase conversions and collect leads information. * **Customer Success**: As onboarding content to guide new users into using your solution, and reduce the workload for CSM teams. * **Customer Support**: As a guiding material to embed inside help center articles or to share with users to guide them through complex workflows on your solution. * **Employee training/onboarding:** As a training material for internal use that you can insert in your company's knowledge base (to show how to use software like Salesforce with the company processes). # Install Chrome extension To capture a demo you need to install the Chrome extension. {% hint style="info" %} **Important:** Guideflow creates your demo using the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc). Simply add it to Chrome and start creating demos in no time {% endhint %} Install the Chrome Extension with the link below : {% embed url="" %} *GUIDEFLOW* * Open your Google Chrome browser. * Go to [this page](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc). * Click on "Add to Chrome". * A pop-up will appear, click on "Add extension". # Install Desktop app Record interactive demos directly from your desktop software - no browser needed. From native applications to terminal commands, capture everything running on your computer. Install the Desktop app with the links below : **For Macbook:** * [**Mac OS M1**](https://storage.googleapis.com/guideflow-desktop-releases/releases/Guideflow_aarch64.dmg) * [**Mac OS X86**](https://storage.googleapis.com/guideflow-desktop-releases/releases/Guideflow_x64.dmg) **For Windows:** * [**Windows installer**](https://storage.googleapis.com/guideflow-desktop-releases/releases/Guideflow_x64-setup.exe) ### **Installation steps** 1. Download the Guideflow Desktop app. 2. Run the installer file: * For Windows: double-click the .exe file. * For macOS: double-click the .dmg file and drag Guideflow to your Applications folder. 3. Launch Guideflow from your computer. ### **First-time setup** 1. Open the Guideflow Desktop app. 2. Sign in with your Guideflow account credentials. 3. Start capturing your flow. # How to capture a guideflow {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} * Open Guideflow's Chrome extension. * Select the capture type. * Click Start capture. ### Available options There are three methods used to capture content for interactive demos: * [**Screen capture**](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture) - enables you to create guideflows using screenshots and videos * [**HTML capture**](/help/capture-a-guideflow/how-to-capture-a-guideflow/html-capture) - enables you to create guideflows using HTML code {% hint style="info" %} You can combine Screen and HTML capture in a single guideflow. {% endhint %} * [**Sandbox capture**](/help/sandbox/how-to-capture-a-sandbox) - enables you to create a self-contained demo environment by stitching multiple HTML captures together {% hint style="info" %} Which capture method to use: * Screen capture - when you prioritize fast demo creation * HTML capture - when you prioritize advanced demo customization * Sandbox capture - when you prioritize self-guided, authentic simulation {% endhint %} # Screen capture {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} There are two types of screen capture: * **Screenshots** (static images) - captured on every click. * **Videos** - captured either automatically or manually, based on the following triggers: * [Automatic video capture](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/automatic-video-capture) - triggered when you drag & drop, scroll, or type (configurable in [Chrome extension settings](/help/capture-settings/chrome-extension-settings)). * [Manual video capture](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/manual-video-capture) - triggered using keyboard shortcuts (configurable in [Keyboard shortcut settings](/help/capture-settings/keyboard-shortcut-settings)). ### How to do screen capture using Guideflow's Chrome extension {% @guideflow/guideflow-embed requestedUrl="" %} * Open the tab you want to capture. * Open Guideflow's Chrome extension. * Select the Screenshot capture. * Click on Start Screenshot capture. * Guideflow will capture screenshots on each click. * If you want to cancel or pause the current capture, click on the "Cancel" / "Pause" button inside the extension. * Once you're done with the capture, click on "Finish recording". {% hint style="info" %} Multi-tab capture enables you to create guideflows across different browser tabs. {% endhint %} {% hint style="info" %} [Desktop app](/help/get-started/install-desktop-app) supports screen capture only. {% endhint %} # Automatic video capture {% hint style="info" %} Automatic video capture can be turned on & off in Guideflow's [Chrome extension settings](/help/capture-settings/chrome-extension-settings) {% endhint %} There are three types of automatic video capture: * [Record video on drag & drop](#record-video-on-drag-and-drop) * [Record video on scroll](#record-video-on-scroll) * [Record video on typing](#record-video-on-typing) ### Record video on drag & drop Capture a video clip when dragging and dropping elements. {% @guideflow/guideflow-embed requestedUrl="" %} ### Record video on scroll Record vertical or horizontal scroll movements. {% @guideflow/guideflow-embed requestedUrl="" %} ### Record video on typing Record a clip of the typing animation in a search or text bar. {% @guideflow/guideflow-embed requestedUrl="" %} *** **Video Transition** When a video is automatically captured during a screen recording flow (e.g. scrolling, typing, or drag and drop), you can choose to display that step as a static screen instead of playing it as a video. {% @guideflow/guideflow-embed requestedUrl="" %} * Select the video step in the editor. * Open **Step information** in the right panel. * Toggle off **Video Transition** to display the step as a static screen. * Toggle it back on at any time to restore the video playback. {% hint style="info" %} You can trim and adjust the speed of automatic video captures in the [Video capture editor](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/video-capture-editor). {% endhint %} # Manual video capture {% hint style="info" %} Manual video capture is triggered by keyboard shortcuts configured in Chrome's [Keyboard shortcut settings](/help/capture-settings/keyboard-shortcut-settings) {% endhint %} There are two types of manual video capture: * [**Recording video**](#recording-video) * [**Recording new video step**](#recording-new-video-step) ### **Recording video** Press your keyboard shortcut to begin video capture. Recording will stop when you click anywhere on the screen or press the shortcut again. #### How to record a video using a keyboard shortcut {% @guideflow/guideflow-embed requestedUrl="" %} * Open Guideflow's Chrome extension. * Select Screenshot capture. * Start the Screenshot capture. * When you want to record a video, press your keyboard shortcut (e.g. ⇧⌘G). See [Keyboard shortcut settings](/help/capture-settings/keyboard-shortcut-settings) for instructions. * To end the recording, click anywhere on the screen or press the shortcut again. * The step will be added to Guideflow's editor as a video, with an icon indicating the type of video capture. {% hint style="info" %} You can edit your video recordings using [Video capture editor](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/video-capture-editor) {% endhint %} ### **Recording new video step** Press your keyboard shortcut to begin video capture. Recording will stop when you press the shortcut again. During the recording, you can click as many times as needed to demonstrate your workflow — the video will continue capturing. {% hint style="info" %} You can also capture video of desktop applications using Guideflow's [Desktop App](/help/get-started/install-desktop-app). Use the **⇧⌥V** (Shift+Option+V) shortcut to start and stop the video capture.\ \ Make sure to record on your main screen if you’re using multiple monitors. {% endhint %} # Video capture editor ### How to edit video capture {% @guideflow/guideflow-embed requestedUrl="" %} * Select a step to edit. * The video icon indicates that the step is a video recording and can be edited. * Open the video play bar. * Drag the handles to trim the video. * Adjust the playback speed by clicking the speed control to the right of the play bar. * Select the speed (the options are 1×, 2×, 3×, and 4×). * The video is now trimmed and has adjusted speed. *** #### Video Transition When a video is automatically captured during a screen recording flow (e.g. scrolling, typing, or drag and drop), you can choose to display that step as a static screen instead of playing it as a video. {% @guideflow/guideflow-embed requestedUrl="" %} * Select the video step in the editor. * Open **Step information** in the right panel. * Toggle off **Video Transition** to display the step as a static screen. * Toggle it back on at any time to restore the video playback. {% hint style="info" %} Video capture editor is not available for video step (manual type of recording). {% endhint %} # Mobile app capture Create interactive demos of mobile apps by first connecting & controlling your phone via a screen mirroring app and then capturing it with Guideflow Desktop app from your computer. {% hint style="info" %} ### Prerequisites * You meet the [requirements to Mirror your iPhone on Mac](https://support.apple.com/en-us/120421) (on both your Mac and iPhone) * You have a US iCloud account (Mirroring feature isn't accessible as [explained by Apple](https://support.apple.com/en-eg/120421) yet for EU accounts) * In case you don't have a US account, please [click on this link](https://www.youtube.com/watch?v=jJZTTOYH3vM) to access a video explaining you the steps. (There is no restriction to have a US account outside the US) * Make sure you are connected to your US iCloud account on both of your Mac and iPhone (Apple pre-requisites) {% endhint %} Install a phone screen mirroring app: **For iPhone:** * [**iPhone Mirroring app**](https://support.apple.com/en-us/120421) (if you have Mac) or [**Apowersoft**](https://www.apowersoft.us/apowermirror) (for Windows) **For Android:** * [**LetsView**](https://letsview.com/screen-mirroring) or [**AirDroid**](https://www.airdroid.com/cast/) (beta) Next, install the Guideflow Desktop app ([here's how](/help/get-started/install-desktop-app)): **For Macbook:** * [**Mac OS M1**](https://storage.googleapis.com/guideflow-desktop-releases/releases/Guideflow_aarch64.dmg) * [**Mac OS X86**](https://storage.googleapis.com/guideflow-desktop-releases/releases/Guideflow_x64.dmg) **For Windows:** * [**Windows installer**](https://storage.googleapis.com/guideflow-desktop-releases/releases/Guideflow_x64-setup.exe) ### How to capture a mobile app demo (on iPhone) {% @guideflow/guideflow-embed requestedUrl="" %} * Open **iPhone Mirroring** app and unlock iPhone * You can log in to your iPhone on your Mac (password or Touch ID) * Allow iPhone Mirroring to connect and control your iPhone * Open Guideflow Desktop app (which enables [Screen Capture](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture)) * Choose folder to save and start capture * Select window or screen, then choose iPhone Mirroring window * Click “Select” to start capturing clicks in iPhone Mirroring * Capture your mobile demo and finish when ready * The capture will open up in Guideflow’s editor for further editing {% hint style="info" %} If you’re using a Mac with a single-monitor setup, turn off Stage Manager in Settings to ensure you can select screens and windows inside the Guideflow Desktop app. {% endhint %} # HTML capture {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} There are two types of HTML capture: * [Guided HTML capture](#guided-html-capture) - call-to-actions guide you through a flow. * [Sandbox capture](/help/sandbox/how-to-capture-a-sandbox) - a self-contained environment where you can explore freely, without guided call-to-actions. ### Guided HTML capture On each click, Guideflow captures the HTML and CSS of your screen—allowing you customize specific UI elements for your audience. (e.g. capture your product's dashboard to tailor the logo and brand colors for each customer) ### How to do HTML capture using Guideflow's Chrome extension {% @guideflow/guideflow-embed requestedUrl="" %} * Open the tab you want to capture. * Open Guideflow's Chrome Extension. * Select "HTML capture". * Guideflow will capture all the page content on each click. * If you want to pause or cancel the current capture, you can: * Use the Chrome extension. * Use our widget on the bottom left by clicking on Guideflow's logo. * Once you finish capturing your flow, click "Complete" in the widget or "Finish recording" in the Chrome extension. * Guideflow will open the editor. Learn [how to edit your HTML capture](/help/edit-your-guideflow/html-editor). {% hint style="info" %} Once you click on "Complete" to finish your HTML capture it may take a few seconds to generate your guideflow depending on the page's size you've just captured. {% endhint %} # Capture settings {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} There are two ways to configure capture settings for Guideflow's Chrome extension: 1. [Chrome extension settings](/help/capture-settings/chrome-extension-settings) 2. [Keyboard shortcut settings](/help/capture-settings/keyboard-shortcut-settings) (used in [Manual video capture](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/manual-video-capture)) # Chrome extension settings {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} ### How to access Guideflow's Chrome extension settings {% @guideflow/guideflow-embed requestedUrl="" %} 1. Click on the Guideflow Chrome extension. 2. On the top right, click on the gear icon to open the settings. ### Available settings * **AI generated call-to-actions** - Toggle on if you want AI to help you generate descriptions for your call-to-actions (you can edit them later). * **Multi-tabs capture** - Toggle on to enable capture across different browser tabs. * [**Record video on drag & drop**](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/automatic-video-capture#record-video-on-drag-and-drop) - Toggle on to automatically capture a video clip when dragging and dropping elements. * [**Record video on scroll**](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/automatic-video-capture#record-video-on-scroll) - Toggle on to automatically record vertical or horizontal scroll movements. * [**Record video on typing**](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/automatic-video-capture#record-video-on-typing) - Toggle on to automatically record a video when you start typing (ie. typing in a search bar). # Keyboard shortcut settings {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} By configuring keyboard shortcuts for Guideflow's Chrome extension, you can control [Manual video capture](/help/capture-a-guideflow/how-to-capture-a-guideflow/screen-capture/manual-video-capture). ### How to configure keyboard shortcuts for Guideflow's Chrome extension {% hint style="info" %} To quickly access the settings, go to **`chrome://extensions/shortcuts`** in your Chrome browser. Alternatively, follow the steps below: {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} * In your Chrome browser, go to the menu in the upper-right corner * Go to Settings * Go to Extensions * Go to Keyboard shortcuts * Find Guideflow * Set your keyboard shortcut for "Start/Stop recording video" * Set your keyboard shortcut for "Start/Stop recording new video step" ### Available settings * **Start/stop recording video** - Press the keyboard shortcut to begin video capture. Recording will stop when you click anywhere on the screen or press the shortcut again. * **Start/stop recording new video step** - Press the keyboard shortcut to begin video capture. Recording will stop when you press the shortcut again. During the recording, you can click as many times as needed to demonstrate your workflow — the video will continue capturing. # How to edit a guideflow Customize your guideflow's appearance to fit your brand, add and edit call-to-actions to guide your audience from step A to step B in your guideflow, display a Pop-up at the beginning to welcome your audience, or as the last step to encourage your users to perform an action or fill out a form, and personalize your guideflow at scale thanks to HTML. * [Edit Design](/help/edit-your-guideflow/design): customize your guideflow's appearance to fit your brand: a main color, your default call-to-actions type between Hotspot (pulsing dots) and Walkthrough (highlighted area), your call-to-actions style, etc. * [Edit Theme](/help/edit-your-guideflow/design/theme): you can save your guideflow's design settings. The Theme allows you to re-use a design across all your different guideflows. * [Edit Browser](/help/edit-your-guideflow/browser): Guideflow's browser replicates a browser header to allow your audience to project themselves into a realistic interface. Edit your browser settings to change the mode (e.g. light or dark), customize the title, add shadow, change the shape, add a background, etc. * [Edit Call-to-Action (CTA)](/help/edit-your-guideflow/call-to-action-cta): call-to-actions guide your audience from step A to step B in your guideflow. Edit your call-to-action type (Hotspot or Walkthrough), text, position, color, etc. * [Add & edit steps](/help/edit-your-guideflow/steps): edit your guideflow's step to update the guideflow. Your guideflow is composed of many steps that you can edit on your left panel. You can add a new step, duplicate a step, delete a step, or re-organize them. * [Pop-up](/help/edit-your-guideflow/pop-up): you can display a start popup at the beginning to welcome your audience, or an end popup at the last step to encourage your users to perform an action or fill out a form. * [HTML editor](broken://pages/vN0iAltMVTLtQ2d4Zv5p): customize your guideflow's appearance and content thanks to HTML to fit your brand and personalize it at scale. * [Preview your guideflow](/help/edit-your-guideflow/preview-your-guideflow): preview your guideflow before sharing it. # Steps Edit your guideflow's step to update the guideflow. Your guideflow is composed of many steps that you can edit on your left panel. (e.g. if you need to add a step because the product changed) {% @guideflow/guideflow-embed requestedUrl="" %} * Your different steps are displayed on the left panel. * Click on a step to select it. * Drag & drop it. * Click on the "..." button to select the "Edit", "Duplicate", or "Delete" options. {% hint style="warning" %} If you change the order of your steps, it may break the logic of your workflow. {% endhint %} ### Add new steps Add a new step between two existing steps. {% @guideflow/guideflow-embed requestedUrl="" %} * To record a new step on your guideflow, click on "Add steps" and select one of your opened tabs to capture another guideflow. Click on "Start capture" to start recording. * To add a picture, click on "Upload" and select a picture from your Desktop to upload. ### Edit steps Edit a step to customize information such as title, description, link, etc. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "..." button next to the step you want to edit. * Edit the title to give a name to your step and easily recognize it in [general analytics](/help/analytics/general-analytics). * To give more context about this step, add a description. * You can add variables in the description field to personalize the text. * To add a URL at this step, click on "Add link" and edit your link URL. ### Duplicate steps Duplicate a step to re-use a similar step. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "..." button next to the step you want to edit. * Select "Duplicate" to make a copy of your current step. * Your duplicated step will be shown below the original step. ### Replace a step with an image Replace a step in your guideflow with a custom image. {% @guideflow/guideflow-embed requestedUrl="" %} * To replace a step with an image click on "...". * Click on "Replace". * Upload the image that will replace the step. ### Delete steps Delete a step to remove it from the guideflow. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "..." button next to the step you want to edit. * Select "Delete" to delete the current step. {% hint style="info" %} Once you click Delete, you will no longer be able to retrieve the deleted step. {% endhint %} # Steps Library Add content first, then orchestrate it across your demos. The Steps Library lets you pull in screens and steps from any of your existing Guideflow's into the demo you're currently building, so you never have to recreate the same content twice. :chevrons-right: e.g. if you've already built a perfect pricing walkthrough in one demo, add those steps directly into any other demo without rebuilding them from scratch. {% @guideflow/guideflow-embed requestedUrl="" %} How to add steps from another guideflow * Open the guideflow you're currently working on in the editor. * Click Add Steps in the top left panel. * Select Add steps from another Guideflow. * Choose the Guideflow you want to pull steps from. * Once the selected Guideflow opens, pick the screens or steps you want to add. * Click Add Steps to confirm. The selected steps are now added to your current Guideflow. {% hint style="info" %} You can pull steps from any Guideflow in your workspace, across folders and subfolders. {% endhint %} ### 🔗 **Linking Steps** By default, steps added from another Guideflow are **unlinked,** they are independent copies. Editing them in your current demo has no impact on the original Guideflow they came from. You can choose to **link** or **unlink** steps depending on how you want to manage your content. #### Linked steps When steps are linked, they stay connected to their source. Any change made to a linked step automatically applies across every Guideflow it's been added to. {% hint style="info" %} :chevrons-right: e.g. You've added a pricing walkthrough from Demo C into five other demos and linked them. Your pricing changes. You update the step once, and all five demos reflect the update instantly. No manual edits, no version drift. {% endhint %} Use linked steps when you're managing shared content across multiple demos, product updates, pricing screens, compliance flows and need everything to stay in sync effortlessly. #### Unlinked steps When steps are unlinked, they behave as standalone copies. Changes made to the step in your current Guideflow stay local, nothing is reflected back to the original Guideflow or any other demo using the same step. {% hint style="info" %} :chevrons-right: e.g. You've added a pricing walkthrough from Demo C into Demo A. You update the step in Demo A to reflect a new price point. Demo C and any other demo using that step remain unchanged. {% endhint %} Use unlinked steps when you need to customize content for a specific demo without affecting anything else. # Design Customize your guideflow's appearance to fit your brand. (e.g. customize a guideflow to match your brand by changing colors and button style) {% @guideflow/guideflow-embed requestedUrl="" %} * Open the "Design" tab on the right panel. * Pick your guideflow's main color (called "Primary Color"). It will become your guideflow's main color (call-to-actions, popup, etc.). * If you want a default call-to-action type, Click on "Default type" to select your call-to-action type (e.g. Hotspot). ### Design options: * [Customize Hotspot style](#customize-hotspot-style): if you want to customize your hotspot design. * [Customize Walkthrough style](#customize-walkthrough-style): if you want to customize your walkthrough design. * [Customize start/end popup style](#customize-start-end-popup-style): if you want to customize your start/end popup design. * [Customize checklist style](#customize-checklist-style): if you want to customize your checklist design. * [Customize theme design](/help/edit-your-guideflow/design/theme): if you want to customize your theme design. ### Customize Hotspot style A Hotspot is a pulsing dot that displays your audience where to click. {% @guideflow/guideflow-embed requestedUrl="" %} * If you want to define another color for Hotspots than the primary one, define a new one. * Select your Hotspots' style. * Select your Hotspots' shape. ### Customize Walkthrough style A Walkthrough highlights a specific area where to click thanks to an overlay. In comparison to Hotspot, it contains two buttons and an overlay. {% @guideflow/guideflow-embed requestedUrl="" %} * If you want to define another color for Walkthroughs than the primary color, define a new color. * Select your Walkthrough's shape. * Toggle on to add an Avatar picture. * Toggle off the step numbers to hide the number of steps of your guideflow. * Toggle on "Border" to customize the border color. * Toggle on "Custom overlay" to customize the overlay color and opacity. ### Customize start/end popup style Start/end popup can be added at the beginning and/or the end of a guideflow. * Pick your "Start" button color, the secondary button color, and the background color of all your popup. Customize the color by using the gradient option for each of them. * Select your popup's shape. * Customize the overlay color, opacity, and blur, or toggle it off to remove the overlay design. * If you want to change the margins, toggle on "Custom margins" and customize new horizontal and vertical margins. ### Customize checklist style A checklist can be added to a guideflow to help users navigate between steps. * If you want to define another color for your checklist, pick a new color. * Select your checklist's shape. * You can toggle off "Task counter" to remove the number of items indicated on the launcher button. * You can toggle off "Progress bar" to remove the bar with the percentage of accomplishment. * You can toggle on "Search" to allow users to search for a specific checklist item. * You can toggle off "Checklist number" to remove item numbering. * Customize the overlay color, opacity, and blur, or toggle it off to remove the overlay design. * If you want to change the margins, toggle on "Custom margins" and customize new horizontal and vertical margins. {% hint style="info" %} A checklist item can also open an URL link instead of navigating to a defined step. {% endhint %} # Theme You can save your guideflow's design settings. The Theme allows you to re-use a design across all your different guideflows. (e.g., apply a specific design to all your guideflows published in your knowledge base) ### Apply an existing Theme Select an existing theme to apply the design settings to all your guideflow's steps. {% @guideflow/guideflow-embed requestedUrl="" %} * To select another theme, click on "Current theme". * Select an existing one. ### Create an existing Theme Create a new theme to save the design settings of your guideflow. {% @guideflow/guideflow-embed requestedUrl="" %} * To save your current design as a new theme, click on the "magic wand". * Edit the new Theme name. * Click on "Save as new theme". {% hint style="info" %} In your Workspace settings, [manage your default themes](/help/branding/custom-theme-1). {% endhint %} # Browser The Guideflow's browser replicates a browser header to allow your audience to project themselves into a realistic interface. (e.g. you can put your own brand name as the browser's title) {% @guideflow/guideflow-embed requestedUrl="" %} * Open the "Browser" tab on the right panel. * Select your browser's theme (light or dark). * Edit your "browser title". * Select your browser's shape: Squared, Rounded, or Slighted Rounded. * If you want, toggle on to activate browser shadow. * If you want, toggle on to customize a background (color, gradient, or upload a picture). * And select "Color" to pick a color and customize a gradient. * Or select "Image" to upload a picture. ### Autoplay Enable autoplay to auto-advance your entire flow. {% @guideflow/guideflow-embed requestedUrl="" %} * Go to Browser * Enable autoplay * Set the duration between steps * Enable Loop so that the flow automatically restarts at the end and continues from the start # Call-to-action (CTA) Call-to-actions guide your audience from step A to step B in your guideflow. * A Hotspot is a pulsing dot that displays your audience where to click * A Walkthrough highlights a specific area where to click thanks to an overlay. * A Spotlight is a card that can be placed anywhere in your demo. All your steps contain a call-to-action except the last one. (e.g. change your Hotspot call-to-action to a Walkthrough call-to-action to highlight a special area) ### Edit Hotspot A Hotspot is a pulsing dot that displays your audience where to click {% @guideflow/guideflow-embed requestedUrl="" %} * To edit your Hotspot open the "Call-to-action" tab on the right panel or click on the Hotspot on the screen. * Select Hotspot as your call-to-action type. * To edit your Hotspot position drag & drop it into the screen. * Edit your call-to-action text in the "Text" field. * If you want, add [variables](/help/variables/where-to-use-variables) to personalize content. * Select another tooltip position if it's hiding an element. * Toggle on "Custom appearance" to customize your Hotspot appearance for this step. * Click on "[Edit Hotspot theme](/help/edit-your-guideflow/design)" to edit your Hotspot's appearance for all the steps. ### Edit Walkthrough A Walkthrough highlights a specific area where to click thanks to an overlay. {% @guideflow/guideflow-embed requestedUrl="" %} * To edit your Walkthrough open the "Call-to-action" tab on the right panel or click on the Walkthrough on the screen. * Select Walkthrough as your call-to-action type. * To edit your Walkthrough position drag & drop it into the screen. * Edit your call-to-action text in the "Text" field. * If you want, add [variables](/help/variables/where-to-use-variables) to personalize content. * Edit buttons' text "Next" and "Back". * Select another tooltip position if it's hiding an element. * Toggle on "Custom appearance" to customize your Walkthrough appearance for this step. * Click on "[Edit Walkthrough theme](/help/edit-your-guideflow/design)" to edit the Walkthrough's appearance for all the steps. ### Edit Spotlight A Spotlight is a card that can be placed anywhere in your demo. It features two arrows to navigate to the next or previous step and a text field to describe the current step. A Spotlight helps guide your audience through your demo without highlighting a specific area or using a pulsing dot. 1. To edit your Spotlight, open the "Call-to-action" tab on the right panel. 2. Select Spotlight as your call-to-action type. 3. To edit your Spotlight position, drag and drop it into the desired location on the screen. 4. Edit your call-to-action text in the "Text" field to describe the current step. 5. If you want, add variables to personalize the content. 6. Toggle on "Custom appearance" to customize your Spotlight's appearance for this step. 7. Click on "Edit Spotlight theme" to edit the Spotlight's appearance for all the steps. # Pan & zoom Pan & Zoom allows you to zoom into a specific area of your demo. This allows you to highlight certain areas of your platform. {% hint style="warning" %} Ensure the call-to-action is placed within the Pan & Zoom window. This prevents any confusion, as the zoom focuses on a specific area. If the call-to-action is outside this area, it may not be visible to your audience. {% endhint %} {% hint style="info" %} Please note, the Pan & Zoom feature is currently only available on screenshot-based captures. {% endhint %} ### How to use Pan & Zoom: {% @guideflow/guideflow-embed requestedUrl="" %} * Navigate to the "Call-To-Action" section within your Guideflow editor. * Toggle the Pan & Zoom option on. * Once activated, a window will appear in the center of your screen over the demo. This window represents the area of your demo that will be highlighted. * You can resize this window to cover the specific area you want to zoom into. Just click and drag the corners to make it larger or smaller. * To move the focus area, simply click and drag the window to the desired location within your demo. * Click on "Preview" to see how the Pan & Zoom effect will appear to your viewers. This is a great way to ensure that you’re highlighting the intended area effectively. * If the zoomed area isn't quite right, you can go back and make adjustments. Resize or reposition the window as needed until you’re satisfied with the focus area. # Blur The Blur feature allows you to obscure specific parts of your screen in the demo, hiding sensitive information or unreleased features from view. **How to use the Blur feature in your guideflow:** {% @guideflow/guideflow-embed requestedUrl="" %} * Open your Screenshot-based demo in the editor. * Locate the "Add blur" button in the bottom right corner of the editor, underneath the screen that showcases the current step. * Click on "Add blur" to activate the feature. * You can drag and drop a window to position it over the area you want to hide. * Resize the blur window as needed by clicking and dragging its corners or edges. * You can add multiple blur windows to a single step if necessary. # Resize Resize screenshot-based captures to crop out unnecessary elements or ensure your content displays properly. ### How to resize Follow these steps to resize your screenshot-based captures: {% @guideflow/guideflow-embed requestedUrl="" %} * In the editor click on **Resize** located below the canvas * A window appears with two options: **Crop** and **Fit** #### Crop mode * Drag the **corner handles** to crop the image to your desired size * To crop symmetrically from all sides use the **center slider** below * **Rotate** the image if needed * **Flip** the image horizontally for mirror effects * Click the **clock icon** to reset and return to the original image * Hit **Apply** to save your changes #### Fit mode * Choose between **Cover** and **Contain** options: * **Cover**: Fills the entire canvas with your image, ensuring no empty space is visible * **Contain**: Fits the entire image within the canvas while maintaining its aspect ratio, which may show background areas (you can customize the background color in this case) * Hit **Apply** to save your changes # Step information The Step Information feature allows you to add additional context like titles, descriptions, and external links to individual steps in your guideflow without cluttering the main Call-to-Action text. ### When to use Step Information Step Information is ideal when you need to: * Provide additional context about a specific step * Add explanatory text that doesn't belong in the Call-to-Action * Include reference links to documentation, Google Drive, or other resources * Give descriptive titles to steps for better navigation and organization {% hint style="info" %} The published Step Information will appear beneath your demo on public Guideflow links. {% endhint %} ### How to add Step Information to your guideflow **In the Editor:** 1. Open your guideflow in the editor 2. Navigate to the step where you want to add information 3. Look for "Step Information" in the right-hand menu 4. Click on "Step Information" to open the panel {% @guideflow/guideflow-embed requestedUrl="" %} **Available options:** * **Step Title**: Give your step a descriptive name for better orientation and navigation * **Description**: Add detailed context, explanations, or instructions that supplement the main demo step * **URL Links**: Include links to external resources like websites, documentation, Google Drive files, or others * **Autoplay**: Auto advance the step forward without clicking on Call-to-Actions (go to [Browser](/help/edit-your-guideflow/browser)if you need to set Autoplay to the entire guideflow at once ### Best practices * Keep step titles concise but descriptive * Use descriptions to provide context that would be too lengthy for the main Call-to-Action * Include relevant URLs that help users understand the step better or provide additional resources * Consider your audience when deciding what information to include in Step Information versus the main content in Call-to-Actions inside the demo ### Example use cases * **Software tutorials**: Link to official documentation or help pages * **Process walkthroughs**: Provide background information about why a step is necessary * **Training materials**: Include reference materials or additional reading * **Complex workflows**: Break down complicated steps with detailed explanations # 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="" %} ### 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**
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**
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="" %} * 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. #### Button Actions: Once you add a button, select what happens when a viewer clicks it. There are five actions available: **Next:** Moves the viewer to the next step in the guideflow. Use this to guide viewers forward after reading the pop-up message. **Back:** Takes the viewer back to the previous step. Use this to give viewers the option to revisit a step they may have skipped past. **Open a URL:** Opens an external link in a new tab. Use this to direct viewers to a pricing page, a booking link, a case study, or any external resource. **Navigate to a step:** Jumps the viewer to a specific step within the current guideflow. Use this to create non-linear demo flows where viewers can skip to the section most relevant to them. **Navigate to a guideflow:** Redirects the viewer to a different Guideflow entirely. Use this to connect multiple demos together or send viewers to a more detailed product walkthrough after completing the current one. > 💡 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="" %} * 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="" %} * 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="" %} * 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. # Checklist Add customized checklists for your audience which interact with a guideflow. Users can complete the tasks on the checklist, making it easier for them to stay on track and follow the process. (e.g. add a checklist to guide your audience on what they have to do to achieve a goal) * [Enabling checklist](/help/edit-your-guideflow/checklist/create-a-checklist): the initial setup of your guideflow's checklist. * [Edit checklist theme](/help/edit-your-guideflow/checklist/edit-checklist-theme): edit and design your checklist according to your theme. {% hint style="info" %} You can drag & drop your checklist's elements to re-order them. {% endhint %} # Create a checklist ### Enable checklist {% @guideflow/guideflow-embed requestedUrl="" %} * To enable checklists, click on the "Checklist" button on the right panel. * Toggle on "Enabled". * Fill in your Launcher title or text. {% hint style="info" %} Description of what is launcher title {% endhint %} * Click on "Position" and choose your desired checklist position. * Fill in your checklist's title. * Fill in your checklist's description (optional). ### Add a new item to your checklist {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "Add a new item". * Enter a title and description of your item. * Click on the dropdown to select whether you want the item to "Open a URL" or "Navigate to a step". * Option 1: Explain what it does and how to do it * Option 2: Explain what it does and how to do it ### Open a URL {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "Add a new item". * Enter your item's title and description. * Choose "Open an URL". * Enter the URL where you want this checklist item to navigate upon clicking. ### Navigate to a step {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "Add a new item". * Enter your item's title and description. * Choose "Navigate to a step". * Click on the dropdown to choose which step you would like to be redirected to. # Edit checklist Theme * Click on "Add a new item". * You can add "Slides" and/or "External Links". * If you want to add a slide, click on "Slide". * Select "Select" to click on the step linked to this slide. * Fill in the slide's title. * Edit the slide description text in the "Text" field. * If you want, add [variables](/help/variables/where-to-use-variables) to personalize content. * If you want to add an external link, click on "External Link". * Fill in the link URL in the "External Link" text field. * Fill in your external link's title. * Edit your external link description text in the "Text" field. * If you want, add [variables](/help/variables/where-to-use-variables) to personalize content. * Enter your item's title and description. * Choose "Open an URL" * Enter the URL where you want this checklist item to navigate upon clicking. # Voiceover There are two types of voiceovers: * [**Synthetic voiceover**](/help/ai/ai-voiceover) - Generate AI narration for your guideflows at scale. * [**Human voiceover**](/help/edit-your-guideflow/voiceover/human-voiceover) - Record your own voice for a personal, authentic touch. {% hint style="info" %} You can add [Voiceover subtitles](/help/ai/ai-voiceover-subtitles) to both types. {% endhint %} {% hint style="info" %} You can **autoplay** both types of voiceovers so that the audio starts playing automatically as you advance through guideflows. {% endhint %} # Human voiceover Record your own voice to deliver personalized guideflows that feel like one-on-one demos—letting users hear a familiar, trusted voice. ### How to add a human voiceover {% @guideflow/guideflow-embed requestedUrl="" %} * Go to Voiceover and click **Add Voiceover**. * Click **Record** and select your recording device. * Start recording, then click the timer to stop. * Reposition the voiceover launcher as needed and preview your audio. * Enable autoplay to start voiceover automatically. * Enable subtitles and generate them with AI. * Review, edit, and save your AI-generated subtitles. * Go to Preview to test your voiceover—it will autoplay or require clicking the launcher. * Your voiceover now enhances the interactive demo with synchronized subtitles. # Video Bubble Add a video bubble to any step in your Guideflow to make your demos more personal and engaging, address prospects by name, walk them through key steps, or let a spokesperson represent your brand. There are three ways to add a video bubble: * [**Record**](/help/edit-your-guideflow/video-bubble/record-video) — Record yourself directly while editing your Guideflow. * [**Upload**](/help/edit-your-guideflow/video-bubble/upload-video) — Upload an existing video to any step in your Guideflow. * [**AI Avatar**](/help/ai/ai-avatar) — Use an AI avatar with a custom script to narrate your demo without recording yourself. {% hint style="info" %} Each video type supports **Position**, **Size**, and **Autoplay** settings, covered in their respective articles. {% endhint %} # Record Video Record yourself directly in the Guideflow editor and attach it as a video bubble to any step in your demo. > 💡 Record a quick intro video addressing your prospect by name before they start exploring the demo. {% @guideflow/guideflow-embed requestedUrl="" %} * Open your Guideflow in the editor and navigate to the step where you want to add a video bubble. * Click the **Video Bubble** icon in the right panel. * Select **Record**. * Click **Record a new video** to start recording via your webcam. * Once done, review your recording and confirm. #### Position Select where the video bubble appears on each step. Choose from four positions: **bottom-left**, **bottom-center**, **bottom-right**, or **top-left**. #### Size Set the size of the video bubble. Choose from **S**, **M**, or **L** depending on how prominent you want it to appear on the step. #### Autoplay Toggle **Autoplay** on to have the video play automatically when a viewer reaches the step. Toggle it off if you prefer the viewer to play it manually. {% hint style="info" %} Your recording is tied to the specific step you added it to. To add a video bubble to multiple steps, repeat the process on each step individually. {% endhint %} {% hint style="info" %} A video bubble and voiceover cannot coexist on the same step. If you've already added a voiceover to this step, delete it first before adding a video bubble. {% endhint %} # Upload Video Upload an existing video to any step in your Guideflow and display it as a video bubble. {% hint style="info" %} Use a pre-recorded spokesperson video on your marketing demo or drop in a product highlight reel for a specific step {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} * Open your Guideflow in the editor and navigate to the step where you want to add a video bubble. * Click the **Video Bubble** icon in the right panel. * Select **Upload**. * Click the upload area and select an MP4, OGG, WEBM video file from your device. * Once uploaded, preview the video to confirm it looks right. #### Position Select where the video bubble appears on the step. Choose from four positions: **bottom-left**, **bottom-center**, **bottom-right**, or **top-left**. #### Size Set the size of the video bubble. Choose from **S**, **M**, or **L** depending on how prominent you want it to appear on the step. #### Autoplay Toggle **Autoplay** on to have the video play automatically when a viewer reaches the step. Toggle it off if you prefer the viewer to play it manually. {% hint style="info" %} Your recording is tied to the specific step you added it to. To add a video bubble to multiple steps, repeat the process on each step individually. {% endhint %} {% hint style="info" %} A video bubble and voiceover cannot coexist on the same step. If you've already added a voiceover to this step, delete it first before adding a video bubble. {% endhint %} # Preview your guideflow Preview your guideflow before sharing it. (e.g. before you share a guideflow on Linkedin) {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Preview" tab at the top of your editor. * Interact with the guideflow to see if everything is smooth. * If you need to make changes, click on the "Edit my guideflow" button at the top of your editor. * Once you consider the guideflow finished, click on the "Share" button and select your favorite sharing option. # Version History Revert changes in the editor by selecting one of the previously auto-saved versions of your guideflow. {% @guideflow/guideflow-embed requestedUrl="" %} * Open up the menu at the top of the editor * Select Version History * See all versions automatically saved in the left panel * Click 'Restore this version' * The editor will now show your previous version # HTML Editor The HTML Editor enables you to modify your [HTML capture](/help/capture-a-guideflow/how-to-capture-a-guideflow/html-capture) and customize how your product appears in your guideflows. Here's a quick overview of what can be achieved with the HTML Editor: {% @guideflow/guideflow-embed requestedUrl="" %} With the HTML Editor, you can: * **Select and modify HTML elements** directly in your capture * **Hide or blur sensitive information** such as customer names, emails, revenue numbers, or internal data * **Change text, numbers, graphs, buttons, or images** to create polished demo environments * **Use variables** to dynamically personalize values across your showcase. Learn how to create and use variables [here](/help/variables/create-and-edit-variables). * **Apply changes to all steps** to duplicate your HTML modifications across multiple steps automatically * **Use AI to randomize values** and quickly generate realistic-looking demo data Whether you're preparing a sales demo, onboarding flow, or product walkthrough, the HTML Editor helps you keep your content clean, consistent, and presentation-ready. ### Example use cases * Blur customer or employee data before sharing demos externally * Replace real company names with placeholder brands * Update pricing, analytics, or dashboard metrics * Personalize demos with dynamic variables * Keep styling and modifications consistent across an entire flow The HTML Editor gives you full control over your captured experience without needing engineering support. # Tags Add tags to your Guideflow's to categorize them and make them easier to find across your workspace. {% hint style="info" %} Tag your Guideflow's by product feature, sales stage, or customer type so your team can quickly filter and find the right demo at the right time. {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} ### **How to add tags to a Guideflow** * Open your Guideflow in the editor. * Click **Settings** in the right panel. * Under **Tags**, type a tag name and select it to apply it to the Guideflow. * Add as many tags as needed. {% hint style="info" %} Tags are applied at the individual Guideflow level. You can add multiple tags to a single Guideflow. {% endhint %} *** ### How to filter by tags in the dashboard? {% @guideflow/guideflow-embed requestedUrl="" %} * Navigate to your Guideflow dashboard. * Use the **Tags** filter to search and filter Guideflow's by any tag you have created. *** ### Tag ideas to get you started You can develop your own tagging strategy based on how your team works. Here are a few examples:
* **Product feature:** "Payments", "Analytics", "Onboarding" * **Customer type:** "Enterprise", "SMB", "Self-serve" * **Sales stage:** "Prospecting", "Qualification", "Proposal" * **Team:** "Sales", "Marketing", "Customer Success" > Tags can also be managed from your workspace settings under **Settings** → **Tags**. # Presenter notes Presenter notes help presenters follow a predefined script for every step of an interactive demo. For example, sales reps can take advantage of this feature so that their entire team follows the same narrative when showcasing new product features. {% @guideflow/guideflow-embed requestedUrl="" %} * Inside the builder, go to the Presenter Notes in the right panel * Type in the text * Launch the presenter mode in the upper menu * Another tab will open in your browser with the presenter notes displayed * You can open it as a new window which is only visible to you while sharing the original guidelow with the prospect # How to capture a sandbox {% hint style="info" %} Make sure that you have the [Chrome extension](https://chrome.google.com/webstore/detail/guideflow/neabdmkliomokekhgnogbeonopbjmajc) downloaded and installed on your browser before you get started. {% endhint %} Guideflow connects multiple HTML captures together to create a self-contained, interactive environment where users can freely explore on their own. ### Sandbox capture {% @guideflow/guideflow-embed requestedUrl="" %} * Go to the website, platform, or app you want to capture. * Open Guideflow's Chrome extension. * Select Sandbox capture and start. * Start clicking on the elements in your application. * This will capture HTML snapshots and automatically stitch them into a sandbox demo. * When finished, the capture will open up in Guideflow's sandbox editor. {% hint style="info" %} Be sure to capture all screens you want to showcase. {% endhint %} ### Sandbox example {% hint style="info" %} Press and hold CTRL / Control on your keyboard to display visual cues for clickable areas in your sandbox {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} {% hint style="info" %} **Sandbox vs. guided demos** * **Sandbox**: A clickable, interactive demo that mimics your actual product and gives audiences the ability to explore on their own. During capture, all elements you click are automatically connected to create a complete demo environment. Ideal for live demos, product tour pages, and sales calls with presenter notes. These demos work best mid-funnel when leads are already knowledgeable about your product. * **Guided demo**: An interactive demo that guides users through a specific flow to showcase the value of features or use cases using [Call-to-Actions](/help/edit-your-guideflow/call-to-action-cta) like hotspots, walkthroughs, and spotlights. Guided demos ensure users see key features and functionalities by leading prospects through a defined path. Perfect for top-of-funnel engagement to highlight your main value proposition and create "aha" moments. {% endhint %} # How to edit a sandbox ### Auto-linking screens During HTML recording, the screens you capture are automatically linked to their respective buttons by default. ### How to edit a Sandbox/Clickable demo {% @guideflow/guideflow-embed requestedUrl="" %} * Choose an element in the captured screen. * Click the 'link' icon and choose the target screen. * Click the "Apply to all steps" button to create links for the selected element across all steps. This is useful if you have the same element repeating on different screens and want to apply the same link to all of them. {% hint style="info" %} Click on an empty space in the demo to instantly highlight all clickable links in blue color. {% endhint %} ### HTML editor The [HTML editor](broken://pages/vN0iAltMVTLtQ2d4Zv5p) allows you to edit the elements of your demo like text, graphs, images, etc. # How-to share your guideflow Once your guideflow is edited, share it and let your audience interact with your guideflow, you have many options to share your guideflow: * [Share your public link](/help/sharing-guideflow/share-your-public-link): copy your public link to share your guideflow inside emails, social posts, messages, etc. * [Create custom links](/help/sharing-guideflow/create-custom-links): create a new custom link using a customized URL slug and pre-filled variables to identify your leads and their statistics. Share your custom link inside emails, social posts, messages, etc. * [Embed your guideflow](/help/sharing-guideflow/embed-your-guideflow): you can embed your guideflow on all the tools that support "iFrame" which is an HTML tag used to embed the content of one page into another page. * [Share on social platforms](/help/sharing-guideflow/share-on-social-platforms): share your guideflow across different social media platforms such as LinkedIn, Twitter, Facebook, etc. * [Share into email platforms](/help/sharing-guideflow/share-into-email-platforms): share your guideflow within your email campaigns through email platforms such as Hubspot, Marketo, Active Campaigns, Pardot, etc. * [Invite someone to Guideflow](/help/sharing-guideflow/invite-someone-to-guideflow): add a recipient that will receive an email with your guideflow's URL. * [Export in PDF](/help/sharing-guideflow/export-in-pdf): export your guideflow in PDF. # Share your public link Copy your public link to share your guideflow inside emails, social posts, messages, etc. (e.g. share a guideflow's public link into your cold email outreach campaign) {% hint style="info" %} Anyone with the link can open it without signing up for an account. {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Share" button at your editor's top right. * Click on the "Public link" button in the "Share Options" section. * Toggle on "Public access" located at the top right of your "Share Options" popup. * Once you finished customizing your "Public link" sharing options, click on the "Copy" button and paste the link where you want to share the guideflow. ### Guideflow preview (GIF, Video, Image) A preview provides a visual representation of a guideflow's content, it can be a GIF, video, or image. (e.g., create a GIF guideflow preview to share it inside your emails) {% @guideflow/guideflow-embed requestedUrl="" %} * If you would like to download a GIF, Video, or Image preview of your guideflow, click on the respective download buttons. {% hint style="info" %} Tips: you can also access "Sharing options" from your dashboard. Select the guideflow you want to share, click on the "..." button, and click on "Share". You'll get the same "Share Options" popup. {% endhint %} # Create custom links A custom link works like your public link but with additional options: you can customize its slug, pre-fill variables values manually to personalize your guideflow for a specific lead, and follow its analytics. You can create as many custom links as you need. Share your custom link inside emails, social posts, messages, etc. (e.g. fill in variables to personalize your guideflow for a lead working in a specific company with its company name, first name, etc. already pre-filled). {% @guideflow/guideflow-embed requestedUrl="" %} ### Create a new custom link Share customized links with variables already set up. * Click on the "Share" button located at the top right of your editor. * Click on the "Custom links" button in the "Share Options" section. * Click on the "New custom link" button. * Edit your new custom link's name * To personalize your link, you can: * Personalize the "Custom URL" field (the "slug"). * Fill in variables such as the first name to personalize your guideflow for your leads and identify them. * Toggle on "Password protection" to make the guideflow accessible via password only. * Toggle on "Link expiration" to set your link's expiration date. * Toggle on "Public access" located at the top right of your "Share Options" popup to make all your custom links public. * Click on "Create new link". * Toggle on/off each custom link to make them public or not. * Click on "copy" to share your new custom link's URL. {% hint style="info" %} If you already have custom links, use the search bar in the "Custom links" popup to find them. {% endhint %} ### Password Protection {% @guideflow/guideflow-embed requestedUrl="" %} * Toggle on "Password protection" to make the guideflow accessible via password only. * Input a password for your guideflow's link ### Edit, duplicate, and delete custom links Manage your custom links to edit, duplicate or delete them. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Share" button located at the top right of your editor. * Click on the "Custom links" button in the "Share Options" section. * Click on the "..." button of the custom link you want to: edit, duplicate or delete. * Click on "Edit" to go back to the setting options. * Click on "Duplicate" to create a custom link with the same settings. * Click on 'Delete" to erase your custom link. {% hint style="info" %} Tips: you can also access "Sharing options" from your dashboard. Select the guideflow you want to share, click on the "..." button, and click on "Share". You'll get the same "Share Options" pop-up. {% endhint %} # Embed your guideflow Guideflow can be embedded everywhere that supports iFrame. An iFrame allows you to display your guideflow on external websites, help centers, etc Copy your embed widget code to share your guideflow everywhere. (e.g. embed your guideflow on your landing page, help center, or directly into your blog) {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Share" button located at the top right of your editor. * Click on the "Embed widget" button in the "Share Options" section. * Toggle on "Public access" located at the top right of your "Share Options" popup. * Copy the embed code by clicking on the "Copy" button {% hint style="info" %} Make sure that you enabled public access on your guideflow before sharing it. {% endhint %} You can embed your guideflow in tools of different categories: * [Landing page builders](/help/sharing-guideflow/embed-your-guideflow/landing-page-builders) * [Website builders & CMS](/help/sharing-guideflow/embed-your-guideflow/website-builders-and-cms) * [Blogging Platforms](/help/sharing-guideflow/embed-your-guideflow/blogging-platforms) * [Project/Task management](/help/sharing-guideflow/embed-your-guideflow/project-task-management) * [Help desk / Knowledge base](/help/sharing-guideflow/embed-your-guideflow/help-desk-knowledge-base) * [Customer Support](/help/sharing-guideflow/embed-your-guideflow/customer-support) * [Product Adoption ](/help/sharing-guideflow/embed-your-guideflow/product-adoption) * [Changelog](/help/sharing-guideflow/embed-your-guideflow/changelog) * [Productivity tools](/help/sharing-guideflow/embed-your-guideflow/productivity-tools) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} ### Embed your guideflow in Webflow Embed your guideflow in Webflow to showcase your demo to your website visitors. {% @guideflow/guideflow-embed requestedUrl="" %} * Click here to open the "Add" tab * Click on the "Code Embed" element to add it to your page * Paste the embed code of your demo here * Click on "Save & Close" * Click on "Publish" * Click on "Publish to selected domains" * Click on the URL to open the website # Framer - Embed Your Guideflow Embed your Guideflow directly into your Framer site to showcase interactive demos to your website visitors. Framer's built-in Embed block supports both a URL and HTML option, and Guideflow works with both. > 💡 Replace static screenshots on your Framer landing page with an interactive Guideflow so visitors can experience your product firsthand. {% @guideflow/guideflow-embed requestedUrl="" %} #### Get your embed code from Guideflow * Open your Guideflow in the editor and click **Share** in the top right. * Click **Embed widget** under Share Options. * Make sure **Public access** is toggled on. * Copy either the **public link** (for the URL option) or the **embed code** (for the HTML option). *** #### Option 1: Embed via HTML
* In your Framer project, add an **Embed** block to your page. * Select **HTML** as the embed type. * Paste the Guideflow embed code into the HTML field. * Resize and position the block as needed. * Publish your Framer site. *** #### Option 2: Embed via URL
* In your Framer project, add an **Embed** block to your page. * Select **URL** as the embed type. * Copy the Guideflow public link, change `/player` to `/embed` in the URL, and paste it into the URL field. * Resize and position the block as needed. * Publish your Framer site. Before: `https://app.guideflow.com/player/er5j6zla6k` After: `https://app.guideflow.com/embed/er5j6zla6k` *** # Landing page builders Embed your guideflow into your landing page builder to create interaction on your Landing Page and increase your amount of leads. * [Unbounce](https://documentation.unbounce.com/hc/en-us/articles/360034877112-Embedding-Custom-HTML-or-Widgets-into-Classic-Builder) * [Instapage](https://help.instapage.com/hc/en-us/articles/205221768-Embedding-custom-HTML-or-widgets-into-an-Instapage-landing-page) * [Leadpages](https://support.leadpages.com/hc/en-us/articles/216964338-The-HTML-widget) * [ClickFunnels](https://help.clickfunnels.com/hc/en-us/articles/360006054693-Adding-A-Custom-JS-HTML-Element-To-Your-Funnel-Page) * [GetResponse](https://www.getresponse.com/help/how-do-i-embed-an-inline-content-s-snippet-code-on-my-website.html) * [Landingi](https://landingi.com/help/custom-html-css-javascript-codes/) * [Carrd](https://carrd.co/docs/building/embedding-iframes) * [Tilda](https://help.tilda.cc/html) * [ThriveTheme](https://help.thrivethemes.com/en/articles/4425799-how-to-use-the-custom-html-and-google-map-elements) * [Launchrock](https://help.launchrock.com/support/solutions/articles/1000289502-embed-a-video) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Website builders & CMS Embed your guideflow into your website builder to create interaction on your website and increase your amount of leads. * [WordPress](https://www.wpbeginner.com/wp-tutorials/how-to-easily-embed-iframe-code-in-wordpress/) * [Wix](https://support.wix.com/en/article/velo-working-with-the-html-iframe-element) * [Weebly](https://www.websitebuilderinsider.com/how-do-you-embed-a-website-into-weebly/) * [Joomla](https://ltheme.com/embed-an-iframe-into-joomla-4/) * [Drupal](https://www.drupal.org/project/iframe) * [Webflow](https://discourse.webflow.com/t/how-to-embed-a-webpage-into-webflow-page/33864/2) * [Magento](https://magento.stackexchange.com/questions/272451/how-to-add-iframe-tag-in-cms-page-in-magento-2-2) * [Umbraco](https://smartlydone.com/blog/posts/how-to-embed-code-on-umbraco-8/) * [Jimdo](https://www.manula.com/manuals/availabilitycalendar/manual/1/en/topic/embedding-on-jimdo) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Blogging Platforms Embed your guideflow into your blogging platform to illustrate your blog posts with interactive demos/guides. * [Ghost](https://forum.ghost.org/t/custom-cards-html-code/20241) * [Medium](https://medium.com/@codytowstik/embedding-code-into-medium-e18fd1759fff) * [SquareSpace](https://www.websitebuilderinsider.com/how-do-i-embed-an-iframe-in-squarespace/) * [Site 123](https://support.site123.com/en/articles/5219607-add-the-custom-code-page) * [Blogger](https://support.google.com/blogger/thread/110512589?hl=en\&authuser=0) * [Write.As](https://discuss.write.as/t/rich-media-embeds/2425) * [Tumblr](https://word-association.tumblr.com/post/90361184916/embedding-iframes-in-tumblr-posts) * [Postach.io](https://postach.io/blog/post/using-native-embeds-on-postach-io) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Project/Task management Improve your project management by embedding your guideflow to provide visual representations of project progress and status in your project/task management tool. * [ClickUp](https://help.clickup.com/hc/en-us/articles/6305793042455-Embed-content-in-ClickUp) * [Basecamp](https://3.basecamp-help.com/article/63-embedding-outside-content) * [Linear](https://linear.app/docs/automatic-embeds) * [Monday.com](https://support.monday.com/hc/en-us/articles/360002383219-The-Embed-Everything-Widget) * [Stormboard](https://stormboard.com/blog/new-feature-embed-sticky-notes) * [InVision](https://support.invisionapp.com/hc/en-us/articles/360027579812-Embedding-screens-prototypes) * [Lumapps](https://docs.lumapps.com/docs/design-l12492179239859735) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Help desk / Knowledge base Embed your Guideflow in your knowledge base to provide interactive content to your users/customers/employees. * [Gitbook](https://docs.gitbook.com/tour/editor/blocks/embed-a-url) * [Archbee](https://changelog.archbee.com/iframe-embeds-4poJRC#:~:text=Just%20add%20an%20Iframe%20block,much%20anything%20that%20supports%20embedding.) * [Circle.io](https://help.circle.so/c/posts/how-do-i-embed-content-within-posts) * [Bloomfire](https://help.bloomfire.com/series/3553557/posts/3463911-how-to-iframe-content-from-another-webpage) * [GrooveHQ](https://help.groovehq.com/help/embedding-videos-in-kb-articles) * [Kayako](https://help.kayako.com/hc/en-us/articles/360006550620-Embedding-Documents-or-Files-Within-the-Help-Center-Article) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Customer Support Embed your guideflow into your customer support tool, you can provide a personalized support experience for all support tickets, enabling fast resolution of customer issues. * [Zendesk](/help/sharing-guideflow/embed-your-guideflow/customer-support/zendesk-integration) * [ServiceNow](https://docs.servicenow.com/fr-FR/bundle/quebec-servicenow-platform/page/administer/content-management/task/t_IFrame.html) * [Gleap](https://help.gleap.io/en/articles/40-creating-customizing-news-articles) * Intercom {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Zendesk integration To embed guideflows in your Zendesk Help Center articles you will need to activate the "Display unsafe content" setting first. ### **How to activate "Display unsafe content" settings:** * Go to the "Guide admin" tab on your Zendesk workspace. * Click on the settings icon in the left sidebar. * Select the “Display unsafe content” check box. * Click "Update". ### **How to embed a guideflow into your Zendesk article:** {% @guideflow/guideflow-embed requestedUrl="" %} * Go to the guideflow you want to embed. * Click on the "Share" button, and go to "Embed Widget". * Copy the code. * Go to the "Add" tab on your Zendesk workspace. * A blank article will appear. * Click on "Source code" \ and paste the code. # Intercom integration Thanks to our Intercom integration, you can create & embed a Guideflow directly into your Help Center documentation in a few clicks! Here is the process to follow: * Create a first guideflow () and copy the public link * Follow the process below 👇 {% @guideflow/guideflow-embed requestedUrl="" %} # Product Adoption Embed your guideflow into your production adoption tool to showcase features in an interactive way and create personalized guides for your users. * [Appcues](https://docs.appcues.com/en_US/dev-troubleshooting/using-appcues-with-iframes) * [Userflow](https://userflow.com/docs/guides/iframes) * [Pendo](https://support.pendo.io/hc/en-us/articles/4407025440795-Embed-IFrame-Code-Widget-) * [Chameleon](https://help.chameleon.io/en/articles/6622666-can-i-embed-html-content-in-tour-steps) * [Whatfix](https://support.whatfix.com/studio/docs/embedding-a-video-in-a-pop-up-using-the-url) * [Spekit](https://help.spekit.com/hc/en-us/articles/9922638546459-How-do-I-upload-and-embed-content-into-Speks-) * [Walkme](https://support.walkme.com/knowledge-base/switch-to-frame-flow-step/) * [Userlane](https://docs.userlane.com/docs/adding-media-to-your-content) * [Gainsight](https://support.gainsight.com/Gainsight_NXT/07360/New_360_Experience/Admin_Guides/Configure_Embed_Section_in_360) * [Product Fruits](https://help.productfruits.com/en/article/targeting-elements-in-iframes) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Changelog Embed your guideflow into your changelog solution to explain new features and allow users to interact with it. * [Readme](https://docs.readme.com/main/docs/guides) * [UserVoice](https://help.uservoice.com/hc/en-us/articles/360034996234-Embedded-inline-Widget) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Productivity tools Embed your guideflow in your productivity tools to create a new way to share knowledge. * [Notion](https://www.notion.so/help/embed-and-connect-other-apps) * [Airtable](https://support.airtable.com/docs/embed-extension) * [Slite](https://slite.slite.page/p/iVWCDj2yGbPYJp/Embeds) * [Miro](https://help.miro.com/hc/en-us/articles/360017730993-Embedding-media-to-boards) * [Tettra](https://support.tettra.com/article/105-can-i-embed-an-iframe-in-tettra) {% hint style="info" %} Some websites or apps require a specific format to embed the guideflow. If you need any additional assistance, reach us at or via our live chat. {% endhint %} # Review platforms Embed a guideflow in your Reviews platform to engage with your leads, showcase your product with your leads, generate the “aha” moment & capture qualified leads. * [G2](/help/sharing-guideflow/embed-your-guideflow/review-platforms/g2-integration) * TrustRadius # G2 Integration Thanks to our G2 integration, you can embed your Guideflows into your G2 page to engage with your leads, showcase your product with your leads, generate the “aha” moment & capture qualified leads. To embed your first demos into your G2 Product page, open My G2 () and follow the steps below: {% @guideflow/guideflow-embed requestedUrl="" %} # Share on social platforms Share your guideflow across different social media platforms such as LinkedIn, Twitter, Facebook, etc. (e.g. share your last product updates on a LinkedIn post). {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Share" button located at the top right of your editor. * Click on the "Social platforms" button in the "Share Options" section. * Toggle on "Public access" located at the top right of your "Share Options" popup. * Click on the "Share" button corresponding to the social platform where you want to share the guideflow. * Post the guideflow's link. {% hint style="info" %} Make sure that you enabled public access on your guideflow before sharing it. {% endhint %} # Share via Gmail Plugin With the Guideflow Gmail Plugin, you can send demo GIFs or links without leaving your Gmail inbox. {% hint style="info" %} ⚠️ **Note:** The Guideflow plugin will only appear in Gmail after you've installed the Guideflow extension in your Chrome browser. {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} ### How It Works: * Open your Gmail and start composing your email as you normally would. * Navigate & click on the **Guideflow plugin** in the compose email toolbar. * Choose the demo you’d like to send from your library of interactive demos. * Select your sharing format, either a GIF with link or link only. * The demo is automatically added to your email and ready to be sent! It’s a perfect fit for Sales and Customer Success teams, giving them a faster, easier way to share leave-behind sales demos or product training demos as a follow-up immediately after meeting. # Share into email platforms Share your guideflow within your email campaigns through email platforms such as Hubspot, Marketo, Active Campaigns, Pardot, etc. (e.g. use Guideflow in cold email outreach campaigns) You can embed your guideflow on various email tools: * [Email marketing platforms](/help/sharing-guideflow/share-into-email-platforms/email-marketing-platforms) * [Sales outreach platforms](/help/sharing-guideflow/share-into-email-platforms/sales-outreach-platforms)
{% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Share" button located at the top right of your editor. * Click on the "Email platforms" button in the "Share Options" section. * Toggle on "Public access" located at the top right of your "Share Options" popup. * Click on the "Share" button corresponding to the email platform where you want to share the guideflow. * Paste the guideflow's link. {% hint style="info" %} Make sure that you enabled public access on your guideflow before sharing it. {% endhint %} # Email marketing platforms Share your guideflow in your favorite marketing tool to launch personalized campaigns. A token is a variable that can be used to customize a campaign. (e.g. smart campaigns, flow steps, emails, landing pages, snippets, web campaigns, etc.) * [Hubspot](#hubspot) * [Active Campaigns](#active-campaigns) * [Klaviyo](#klaviyo) * [Mailchimp](#mailchimp) * [Marketo](#marketo) * [Oracle Eloqua](#oracle-eloqua) * [Pardot](#pardot) * [Sendgrid](#sendgrid) ### Hubspot Helps businesses grow by attracting, engaging, and delighting customers. How to personalize your guideflow using HubSpot emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name={{contact.firstname}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{contact.firstname}} ``` Find all [the tokens available for Hubspot](https://knowledge.hubspot.com/website-pages/personalize-your-content). ### Active Campaigns Offers feature such as email segmentation, automation workflows, A/B testing, and CRM integration. It helps businesses of all sizes automate their marketing processes, improve customer engagement, and drive more sales. How to personalize your guideflow using Active Campaigns emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name=%FIRSTNAME%". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name=%FIRSTNAME% ``` Find all [the tokens available for Active Campaigns](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5). ### Klaviyo Offers feature such as email segmentation, automation workflows, A/B testing, and integration with popular e-commerce platforms like Shopify and Magento to help businesses drive more sales through email marketing. How to personalize your guideflow using Klaviyo emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name={{first\_name}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{first_name}} ``` Find all the tokens available for Klaviyo by [checking this article](https://help.klaviyo.com/hc/en-us/articles/115005084927-Template-tags-and-variable-syntax-reference-classic-editor-). ### Mailchimp Allows businesses to create and send email campaigns, newsletters, and automated emails. How to personalize your guideflow using Mailchimp emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name=\*|FNAME|\*" * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name=*|FNAME|* ``` Find all [the tokens available for Mailchimp](https://mailchimp.com/help/all-the-merge-tags-cheat-sheet/?locale=fr:unavailable#Personnalisation). ### Marketo Offers feature such as lead management, email marketing, analytics, and integration with popular CRM platforms like Salesforce to help businesses drive more revenue through lead nurturing and conversion. How to personalize your guideflow using Marketo emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name={{lead.First Name}}" * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{lead.First Name}} ``` Find all [the tokens available for Marketo](https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/demand-generation/landing-pages/personalizing-landing-pages/tokens-overview). ### Oracle Eloqua Offers feature such as lead scoring, lead nurturing, and integration with various CRM platforms to help businesses optimize their marketing efforts and drive more revenue. See how [Oracle Eloqua data can be used as token values with Guideflow](https://docs.oracle.com/en/cloud/saas/marketing/eloqua-user/Help/FieldMerges/FieldMerges.htm). ### Pardot Offers feature such as email marketing, lead scoring, and lead nurturing, as well as integration with Salesforce CRM to help businesses better understand their prospects and close more deals. How to personalize your guideflow using Pardot emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name=%%first\_name%%" * Send your email campaign. 
e.g. https://app.guideflow.com/player/296/?first_name=%%first_name%%
Find all [the tokens available for Pardot](https://help.salesforce.com/s/articleView?id=sf.pardot_variable_tags.htm\&type=5). ### Sendgrid Offers feature such as email templates, list management, and email tracking to help businesses improve their email deliverability and engagement. How to personalize your guideflow using Sendgrid emailing campaign: * Get your guideflow link. * Add your emailing token such as "?first\_name={{first\_name}}" * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{first_name}} ``` Find all [the tokens available for Sendgrid](https://docs.sendgrid.com/ui/sending-email/editor#reserved-substitution-tags). # ActiveCampaign ### What is ActiveCampaign? ActiveCampaign is a platform that provides tools for email marketing, automation, and customer relationship management (CRM). It is designed to help businesses automate their marketing processes, manage customer contacts, and execute campaigns. The platform includes features like email campaign creation, lead scoring, and web analytics, enabling users to track customer interactions and behavior to improve marketing efforts. ### Passing ActiveCampaign custom fields into your Guideflows Guideflow allows you to pass through parameters, also known as "query strings" or "URL query parameters," to personalize your guideflows & identify your leads in your analytics tab. Without URL parameters, a guideflow URL looks like this: ``` https://app.guideflow.com/player/CV9zMHWGMHY%3D ``` With URL parameters such as {{first\_name}} with John as his first name, the guideflow URL looks like this: ``` https://app.guideflow.com/player/CV9zMHWGMHY%3D?first_name=John ``` {% @guideflow/guideflow-embed requestedUrl="" %} To personalize a Guideflow with data from ActiveCampaign and identify your leads' behavior on demos coming from analytics, you need to pass the ActiveCampaigns params in your Guideflow's public links. In ActiveCampaign, the params email is identified with %EMAIL%. ``` https://app.guideflow.com/player/XXXXX?email=%EMAIL% ``` You can pass any other field with the symbol &. ``` https://app.guideflow.com/player/XXXXX?email=%EMAIL%&firstname=%FIRSTNAME% ``` Here's the table of standard ActiveCampaign personalization tags:
NameAmplitude variablesExample Value
Email%EMAIL%mailto:john@activecampaign.com
First Name%FIRSTNAME%John
Last Name%LASTNAME%Smith
Full Name%FULLNAME%John Smith
Phone%PHONE%555-666-7777
Organization%ORGANIZATION%ActiveCampaign
You can create custom tags in Guideflow and ActiveCampaigns to deliver your prospects the best experience possible. # Sales outreach platforms Share your guideflow in your favorite sales tool to launch personalized email campaigns. A token is a variable that can be used to customize your email campaign. (e.g. email outreach campaigns) * [Amplemarket](#amplemarket) * [Apollo](#apollo) * [Gong](#gong) * [Klenty](#klenty) * [Lemlist](#lemlist) * [MailShake](#mailshake) * [MixMax](#mixmax) * [Outreach](#outreach) * [Reply.io](#reply.io) * [SalesHandy](#saleshandy) * [SalesLoft](#salesloft) * [Woodpecker](#woodpecker) ### Amplemarket It uses artificial intelligence to automate the outreach process and provides analytics to help businesses track their success. How to personalize your guideflow using Amplemarket emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{first\_name}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{first_name}} ``` Find all [the tokens available for Amplemarket](https://amplemarket.zendesk.com/hc/en-us/articles/360052483411-How-to-hyper-personalize-your-email-templates). ### Apollo Offers feature such as email templates, email tracking, and lead scoring to help businesses improve their outreach efficiency and effectiveness. How to personalize your guideflow using Apollo emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{first\_name}}". * Send your email campaigns ``` e.g. https://app.guideflow.com/player/296/?first_name={{first_name}} ``` Find all [the tokens available for Apollo](https://knowledge.apollo.io/hc/en-us/articles/4409415084813-Use-Basic-Dynamic-Variables). ### Gong Provides insights and recommendations to sales teams to help them improve their communication and close more deals. How to personalize your guideflow [using Gong emailing outreach campaigns](https://help.gong.io/hc/en-us/articles/7385069808269-Create-and-use-email-templates). ### Klenty Provides features such as email tracking, follow-up reminders, and integration with CRM platforms to help businesses streamline their outreach efforts. How to personalize your guideflow using Klenty emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{FirstName}}". * Send your email campaigns ``` e.g. https://app.guideflow.com/player/296/?first_name={{FirstName}} ``` Find all [the tokens available for Klenty](https://support.klenty.com/en/articles/3275352-what-is-placeholder-validation). ### Lemlist Offers feature such as email personalization, automated follow-ups, and A/B testing to help businesses improve their email conversion rates. How to personalize your guideflow using Lemlist emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{firstName}}". * Send your email campaigns ``` e.g. https://app.guideflow.com/player/296/?first_name={{firstName}} ``` Find all [the tokens available for Lemlist](https://help.lemlist.com/en/articles/4452688-custom-variable-format). ### Mailshake Provides features such as email personalization, A/B testing, and analytics to help sales teams improve their email outreach efforts and close more deals. How to personalize your guideflow using Mailshake emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{first}}". * Send your email campaigns ``` e.g. https://app.guideflow.com/player/296/?first_name={{first}} ``` Find all [the tokens available for Mailshake](https://docs.mailshake.com/article/77-how-do-i-use-text-replacements). ### MixMax Offers various features to improve email communication, including email tracking, scheduling, templates, and integrations with other tools such as Salesforce and Slack. It aims to help sales teams save time and close more deals by streamlining their email outreach efforts. How to personalize your guideflow using MixMax emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={first name}". * Send your email campaigns ``` e.g. https://app.guideflow.com/player/296/?first_name={first name} ``` Find all [the tokens available for MixMax](https://success.mixmax.com/article/147-template-variables). ### Outreach Provides features such as email sequencing, call tracking, and analytics to improve the effectiveness of sales outreach efforts. How to personalize your guideflow using Outreach emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name=%FIRSTNAME%". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name=%FIRSTNAME% ``` Find all [the tokens available for Outreach](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5). ### Reply.io Provides features such as email personalization, automated follow-ups, and analytics to help sales teams improve their email outreach efforts and close more deals. How to personalize your guideflow using Reply.io emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{FirstName}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{FirstName}} ``` Find all [the tokens available for Reply.io](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5). ### SalesHandy Offers email tracking, automation, and scheduling features, enabling businesses to streamline their email outreach efforts. It also provides analytics to help sales teams measure the effectiveness of their campaigns and make data-driven decisions. How to personalize your guideflow using SalesHandy emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{First Name}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{First Name}} ``` Find all [the tokens available for SalesHandy](https://support.saleshandy.com/article/331-personalise-your-email-content). ### SalesLoft Offers a highly rated email tracking tool with detailed analytics and the ability to send emails from multiple locations within the platform. How to personalize your guideflow using SalesLoft emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{first\_name}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{first_name}} ``` Find all [the tokens available for SalesL](https://help.salesloft.com/s/article/Available-Dynamic-Fields#Person_Tags)[oft](https://help.salesloft.com/s/article/Available-Dynamic-Fields#Person_Tags). ### Woodpecker Offers features like personalization, A/B testing, and follow-up automation to help businesses increase their response rates and ultimately, their sales. How to personalize your guideflow using Woodpecker emailing outreach campaigns: * Get your guideflow link. * Add your emailing token such as "?first\_name={{FIRST\_NAME}}". * Send your email campaign. ``` e.g. https://app.guideflow.com/player/296/?first_name={{FIRST_NAME}} ``` Find all [the tokens available for Woodpecker](https://woodpecker.co/help/snippet-labels/). # Invite someone to Guideflow Add a recipient that will receive an email with your guideflow's URL. (e.g. invite someone to discover your last guideflow). {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Share" button located at the top right of your editor. * Click on the "Invite people" button in the "Share Options" section. * Toggle on "Public access" located at the top right of your "Share Options" popup. * Type the email address in the text field. * Click on "Invite" to send the email invitation {% hint style="info" %} The person will only be invited to discover this specific guideflow. {% endhint %} # Export in GIF or video You can export your guideflow in GIF or video in order to share your demo in social medias, emails or some presentations or to give a preview of your demo. {% @guideflow/guideflow-embed requestedUrl="" %} * To export your Guideflow in GIF or video click on "Share" * Click on "GIF & video" in the "Share Options" section * Select the use-case to use pre-defined settings * Select the type of export * Select the resolution of your export * Select your "Frame rate" * Select the number of seconds between steps * Click on "Export" to download your guideflow in GIF or video {% hint style="warning" %} Share links or embed widgets instead of video or GIF to keep: * live edits * interactivity * viewers engaged with actions to perform * live analytics {% endhint %} # Export in PDF Export your guideflow in PDF. (e.g. if you need to print your guideflow) {% hint style="warning" %} Interactive content (call-to-actions, videos) won't be rendered in PDF format. Share links instead of PDF to keep: * live edits * interactivity * viewers engaged with actions to perform * live analytics {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "..." button of the guideflow you want to share (from the dashboard), or * Click on "Share" from the editor. * Click on "PDF" in the "Share Options" section * Click on the "Export to PDF" button to download the Guideflow as a PDF file. # Security settings Guideflow offers the following security options to control access to your shared demos. Choose the appropriate settings based on your specific security needs: * [Password protection](/help/sharing-guideflow/security-settings/password-protection) * [Domain protection](/help/sharing-guideflow/security-settings/domain-protection) * [Link expiration](/help/sharing-guideflow/security-settings/link-expiration) # Password protection Enable password protection to ensure that your Guideflow can only be accessed with a password. (e.g., guideflow created is only available for the CSM team) {% @guideflow/guideflow-embed requestedUrl="" fullWidth="false" %} * Go to your guideflow * Click on the "Share" button in the upper right corner inside the editor * In Share Options, make sure to toggle on "Public access" * Go to "Security" * Toggle on "Password protection" to make the guideflow accessible via password only * Input a password # Domain protection Domain protection helps ensure your Guideflow is only accessible to users from specific organizations by validating their email domains before granting access. (e.g., limit your product training to only a specific customer) {% @guideflow/guideflow-embed requestedUrl="" %} * Go to your guideflow * Click on the "Share" button in the upper right corner inside the editor * In Share Options, make sure to toggle on "Public access" * Go to "Security" * Toggle on "Domain protection" to limit access only to users with specified email domains * Enter the domains you want to allow access to (e.g., airtable.com, partner.org) * You can add multiple domains by separating them with commas * You can enable "Domain Auth" to require users to verify their email address * When enabled, users will receive a verification code to their email address that they must enter before viewing your guideflow * This two-step verification ensures that only authenticated users with approved domain emails can access your guideflows * Users with email addresses from non-approved domains will see a message indicating they don't have permission to view the guideflow # Link expiration Link expiration ensures the security of shared guideflows by automatically disabling access after a designated period of time. (e.g., guideflow is only available for a specific event) {% @guideflow/guideflow-embed requestedUrl="" %} * Go to your guideflow * Click on the "Share" button in the upper right corner inside the editor * In Share Options, make sure to toggle on "Public access" * Go to "Security" * Toggle on "Link expiration" to make the guideflow accessible only for a specific period * Select the date and time * Select the timezone * After the expiration, visitors will see a page with a message indicating that the link has expired and is no longer accessible # Offline demo Offline demos enable you to save and use interactive demos without an internet connection. This feature is particularly useful at trade shows, during travel, and in locations with limited connectivity. Many customers utilize this capability at large conferences where wifi can be unreliable, or during client visits when they need dependable demo performance. This feature is available in our Growth plan and above. ### How to make demos available offline * In your demo editor, click on "Save for offline" button in the upper right corner. * A new tab will open with a loading screen informing you that the demo is being prepared for offline use. Don't close this tab until it's done. * Once complete, you can click through the interactive demo without needing an internet connection. {% @guideflow/guideflow-embed requestedUrl="" %} ### **Where to access offline demos** * Navigate to your main Guideflow workspace. * In the left menu bar click on the button "Offline guideflows" near the bottom. * Here you can access all offline demos that have been previously saved. {% @guideflow/guideflow-embed requestedUrl="" %} {% hint style="info" %} Guideflows saved for offline use are stored locally on the device, meaning they are only available to the user who saved them. Other users in the same workspace cannot see or access the same offline library. {% endhint %} # General analytics Get general analytics about your guideflow published such as the number of views, completion rate, unique users, average completion rate, number of leads, average time spent, etc. General analytics will help you to gain insight into user engagement. (e.g. analyze if your users are finishing your guideflow) {% hint style="info" %} All the data in "General Analytics" are anonymous. {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Analytics" tab at the top of your editor. * If you want the analytics for a specific period, click on "All", and change the time frame by selecting one of the following options: All, Today, This Week, This Month, This Year, or Custom. * Analyze various statistics related to the performance of the guideflow: * **Total views**: Number of times your guideflow has been viewed. * **Unique users**: Number of people who have seen your guideflow. * **Completion rate**: Average percentage of completion of your guideflow by viewers. * **Leads**: Number of leads generated by your guideflow's form. * **Guideflow views graph**: Evolution of the number of times your guideflow has been viewed (day/hour). * **Location map**: Location of people who have viewed your guideflow. * **Browser table**: Browsers used by people who viewed your guideflow. * **Device chart**: Devices used by people who viewed your guideflow. * **OS chart**: Operating Systems used by people who viewed your guideflow. * **Steps graph**: Number of times the different steps in your guideflow were viewed. * **Average time spent graph**: Average time spent viewing the different steps in your guideflow. * If you want to download a report of your analytics, click on the "Download button". We will send you an email with your report. {% hint style="info" %} General analytics is a global overview of all the user engagement with this guideflow. {% endhint %} # Session analytics Get detailed analytics about your users' sessions such as time spent, completion rate, steps viewed, etc. to increase the guideflow's performance. Get to know how a specific lead interacts with your guideflow. Discover all your user sessions in one place and deep dive into a specific user session to better understand viewer behavior and engagement. (e.g. check if a specific lead opened your guideflow and if he completed it or not) {% hint style="info" %} Captured data from Forms will be displayed in session analytics. {% endhint %} ### Global "Sessions" analytics Scroll down to get a quick overview of high-level session analytics such as completion rate for example. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Analytics" tab at the top of your editor. * Click on the "Sessions" tab. * Analyse various statistics related to specific sessions: * **Activity**: Name of the user (if available) and its IP. * **Last view**: Last time this user viewed your guideflow. * **Time spent**: The time the user spent watching your guideflow. * **Conversion**: Inform you if the user filled a lead generation form in your guideflow. * **Completion rate**: Percentage of completion of your guideflow by the viewer. ### Detailed "Sessions" analytics Deep dive into detailed analytics to understand the behavior of a specific user. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Analytics" tab located in the header of your editor. * Click on the "Sessions" tab. * If you want the analytics for a specific period, click on "All", and change the time frame by selecting one of the following options: All, Today, This Week, This Month, This Year, or Custom. * Click on "Details" for a given session and get information about: * **Session** City, browser, country, OS, device type, and source. * **User Attributes**: based on variables you created ([learn how to create variables](/help/variables/create-and-edit-variables)). * **Completion**: the average completion rate by guideflow step. * If you want to download a report of your analytics, click on the "Download button". We will send you an email with your report. {% hint style="info" %} Sessions analytics can be displayed on several pages if there are many. {% endhint %} # Export analytics The export analytics feature allows you to download your analytics data as a CSV file. You can export two different files: * General analytics can be downloaded as a CSV file. * Session analytics can be sent as a CSV file to your email. {% @guideflow/guideflow-embed requestedUrl="" %} # Filter analytics ### **Users can filter their guideflow analytics by:** **Source (**based on where the Guideflow was accessed): * Public Link * Embed Widget * Custom Link * Demo Center * Preview **Viewer Type**: * Internal Viewers (Team members in your workspace) * External Viewers **Date Range:** Users have the option to filter analytics within a specific timeframe to analyze trends over periods. # AI Account Reveal Identify anonymous visitors on your interactive demos! Guideflow's integration with Clearbit AI B2B data empowers you to gather detailed personal and company data about your demo viewers, offering essential insights to enhance your demo presentations. Say goodbye to unidentified leads, and get ready to elevate your demos! {% hint style="info" %} You don't need a Clearbit account to reveal your viewer's data and identify your lead with our account reveal feature. {% endhint %} Here’s how to seamlessly integrate with Guideflow’s Account Reveal feature, which enriches viewers' data with Clearbit's company information automatically: {% @guideflow/guideflow-embed requestedUrl="" %} * Activate account reveal with the Clearbit integration: enable this feature in your integration tab with just one click. * Open your analytics tab: explore enriched company data about your demo viewers directly through the Analytics Dashboard. # Get leads data When you are using forms in your guideflow, the data collected will be displayed on your Leads tab. (e.g. request an email to let your user start interacting with your guideflow) {% @guideflow/guideflow-embed requestedUrl="" %} * Click on the "Leads" tab at the top of your editor. * Select either "Start Leads" or "End Leads" depending on if you have set a start/end popup. * Analyze the list of leads collected and their information. * Click on "Download" to download a CSV file with the information collected. {% hint style="info" %} Check out [the article about start/end popup](broken://pages/lsnSER2VhbLXgMdLl4fk) if you want to learn how to add a lead generation form to your guideflow. {% endhint %} # What are variables Variables are custom fields that are automatically filled with corresponding data, such as custom words, phrases, or image URLs. A variable is data that associates a key (e.g. first name) with a value (e.g. Pierre). Use variables in a guideflow to hyper-personalize the content for your audience. They allow personalization at scale based on factors like persona, job title, and location, making messages feel relevant and appealing to each recipient. Personalization variables can range from simple fields like {{First Name}} or {{Company}} to more complex ones that use if-else syntax and contextual data. (e.g. use a variable "Hello {{first\_name}}" to display a customized welcome message such as "Hello John") You can use 3 kinds of variables to personalize your guideflow : * Text (first name, last name, company name, etc.) * Number (company size, company revenue, etc.) * Image URL (logo URL, avatar URL, profile picture URL) ### Default variables Below you can find your list of default variables. | Name | User Attribute | Example | Type | | --------------- | -------------- | ------------------------------------- | --------- | | {{first\_name}} | First name | Steve | Text | | {{last\_name}} | Last name | Jobs | Text | | {{email}} | Email | | Text | | {{company}} | Company | Apple | Text | | {{website}} | Website | [www.apple.com](http://www.apple.com) | Text | | {{phone}} | Phone | +1(234)567-8910 | Text | | {{logo\_url}} | Logo URL | | Image URL | | {{avatar\_url}} | Avatar URL | | Image URL | {% hint style="info" %} Definition: user attribute is your variable description. {% endhint %} ### Custom variables You can create a custom variable by following the article about how to [create variables](/help/variables/create-and-edit-variables). # How-to pass variables This section discusses explicitly the process of passing variables thanks to URL pass-through parameters, custom links, and forms. (e.g. in this URL you have 2 URL query parameters: {{first\_name}} and {{last\_name}}) ``` https://app.guideflow.com/player/CV9zMHCMHY%3D?first_name=John&last_name=Doe ``` Variables are used to personalize your guideflow at scale. You can pass variables through 3 different methods. * [Forms](#forms): use forms to dynamically personalize your guideflow * [Custom links](#custom-links): create a custom link to personalize your guideflow's content before sharing it with each prospect * [URL query parameters](#url-pass-through-parameters): personalize your guideflow's content by using URL query parameters ### Forms You can also use a start popup with Form to pass variables. {% @guideflow/guideflow-embed requestedUrl="" %} ### Custom links All custom links (or branded links) created with Guideflow include a feature called "forward parameters". It means that any parameters attached to the custom link are included in the destination URL (First name, Email, Phone, etc.). It gives the possibility to determine in advance the data that will be used for the variables. (e.g. create a custom link for your prospect "Elon", add the variable {{first\_name}} with the pre-filled data "Elon" in your custom link, and your variable will be updated by "Elon" in your guideflow) {% @guideflow/guideflow-embed requestedUrl="" %} ``` https://app.guideflow.com/player/296/tesla ``` Once you create your custom link, you can share it with your prospect. (e.g. if your prospect's first name is Elon, pre-filled the first name variable with "Elon") {% @guideflow/guideflow-embed requestedUrl="" %} ### URL pass-through parameters Pass-through parameters are custom fields that you can add to the end of a guideflow's URL. Guideflow allows pass-through parameters, also known as "query strings" or "URL query parameters," which allow you to pass variables so you can personalize your guideflows' content. Pass-through parameters allow you to pass information from your outreach campaign to your guideflow for example. In simple terms, pass-through parameters are custom fields that you can add to the end of a URL. To identify a URL parameter, you need to look at the part of the URL that follows a question mark (?). A URL parameter consists of a Key and a Value, separated by an equal sign (=). If there are multiple parameters, each one is separated by an ampersand (&). (e.g. we want to pass the first name and last name as URL query parameters) With no URL parameters, the guideflow URL looks like this: ``` https://app.guideflow.com/player/CV9zMHWGMHY%3D ``` With URL parameters such as {{first\_name}} with John as his first name, the guideflow URL looks like this: ``` https://app.guideflow.com/player/CV9zMHWGMHY%3D?first_name=John ``` {% @guideflow/guideflow-embed requestedUrl="" %} To add URL parameters, write down "?" after the URL then the Key, here "first\_name" then = followed by the Value, here "John". {% hint style="info" %} You can pass data as URL parameters from many providers like CRM, marketing platforms, emailing tools, etc. {% endhint %} # Where to use variables Use variables to hyper-personalize your guideflows' content. You can use variables in different features such as call-to-actions, popup, and HTML. (e.g. include "Click here {{first\_name}}" to personalize your hotspot content) {% hint style="info" %} A variable must have the following format: `{{first_name}}` {% endhint %} ### In call-to-actions Use variables in your call-to-actions to make them dynamic and personalized through the call-to-action contents. (e.g. include your client's first name in your call-to-action content) {% @guideflow/guideflow-embed requestedUrl="" %} * Edit your call-to-action (learn [how to edit call-to-actions](/help/edit-your-guideflow/call-to-action-cta)). * Click on "Add variables" below the text field. * Select the variable you want to use (or [create a new one](/help/variables/create-and-edit-variables)). * Add as many variables as needed. ### In Pop-ups Use variables in Pop-ups to make them dynamic and personalized through the Pop-up content. (e.g. customize the company's product name in your Pop-up content) {% @guideflow/guideflow-embed requestedUrl="" %} * Edit your Pop-up (learn [how to edit call-to-actions](/help/edit-your-guideflow/call-to-action-cta)). * Click on "Add variables" below the text field. * Select the variable you want to use (or create a new one by following [this article](/help/variables/create-and-edit-variables)). * Add as many variables as needed. {% hint style="info" %} Can be used either in the start/end popup with Button or the start/end popup with Form. {% endhint %} ### In HTML Use HTML with variables to customize the step appearance and content to create personalized guideflows. (e.g. customize the company's logo in your HTML content) {% @guideflow/guideflow-embed requestedUrl="" %} * Open the "HTML editor" tab on the right panel (learn [how to edit your HTML page](/help/edit-your-guideflow/html-editor)). * Select the HTML element you want to customize with variables. * Click on "Add variables" below the text field. * Select the variable you want to use (or [create a new one](/help/variables/create-and-edit-variables)). * Add as many variables as needed. {% hint style="warning" %} When you add variables, don't forget to include a space before the {{variable}}. {% endhint %} # Create & edit variables Use variables to personalize guideflows. Custom variables can be created from two places in your workspace. (e.g. create a new variable as Product\_Type to display a customized welcome such as "A customized guide for CRM products" ### Within your settings tab Create new variables within your setting tabs. {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "Settings" in the dashboard's left bar menu. * Select "Variables". * If you're looking for a specific variable, use the search bar. * Click on "Add variable". * Select your new variable type: text, number, or image. * Type your new variable name. * Edit an example to guide your future users. * Toggle on "Default Value" to fill with a default value if empty. * Type the default value. * Click on "Create new variable" to save your new variable. ### Within your editor Create new variables within your guideflow's editor. 1. Call-to-actions (Hotspot and Walkthrough) {% @guideflow/guideflow-embed requestedUrl="" %} * Edit your call-to-action (learn [how to edit call-to-actions](/help/edit-your-guideflow/call-to-action-cta)). * Click on "Add variables". * Click on "Create new variables". * Select your variable type between text, number, and image. * Type the variable name * Toggle on "Default Value" to fill with a default value if empty. * Type the default value. * Click on "Create new variable" to save your new variable. 2. Start/end popup {% @guideflow/guideflow-embed requestedUrl="" %} * Edit your popup (learn [more about start/end popup](broken://pages/lsnSER2VhbLXgMdLl4fk)). * Click on "Add variables". * Click on "Create new variables". * Select your variable type between text, number, and image * Type the variable name * Toggle on "Default Value" to fill with a default value if empty. * Type the default value * Click on "Create new variable" to save your new variable. 3. HTML {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "HTML editor" on the left panel. * Click on "Add variables". * Click on "Create new variables". * Select your variable type between text, number, and image. * Type the variable name. * Toggle on "Default Value" to fill with a default value if empty. * Type the default value * Click on "Create new variable" to save your new variable. ### Edit & delete variables Custom variables can be edited and deleted from your workspace. (e.g. remove Company\_Job because you stopped targeting this persona). {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "Settings" in the left bar menu of your dashboard. * Select "Variables". * If you're looking for a specific variable among all your variables, use the search bar. * Edit your variable by clicking on the corresponding "..." button. * If you want to edit, click on "Edit", update the information wanted, and click on "Save". * If you want to delete, click on "Delete" and confirm your choice. {% hint style="info" %} Manage all your variables created from your [workspace](broken://pages/Lb6VbFiCfrtdcDGhIl22). {% endhint %} # Passing variables into emailing platforms # Dynamic date variable The dynamic date variable allows you to display custom dates in your HTML-based demos. Whether you need to show today's date, a past date, or a future date, this variable automatically updates it. By displaying real, dynamic dates, you create a more authentic and engaging demo experience. ### How to add a dynamic date variable {% @guideflow/guideflow-embed requestedUrl="" %} Follow these steps to add a dynamic date variable to your demo: * Go to the **HTML editor** and select an element * Click on **Add variables** and select the **Date variable** * Choose the **Date format** (or type it in manually) and preview it * **Add** the variable and see it in preview ### Date offset Need to show dates in the past or future? You can offset the date by days, weeks, months, and years. Simply toggle on the **offset** and specify the number (use negative numbers to show past dates). For example, offsetting by 1 year will display the date one year from today. # Examples Few scenarios to make content dynamic inside guideflows. ### Scenario 1 - Insert first names (call-to-action | walkthrough) Goal: add dynamic personalization into your guideflow by inserting the first name of your viewers. (e.g. "Welcome John") {% @guideflow/guideflow-embed requestedUrl="" %} * Edit your call-to-action (learn [how to edit call-to-actions](/help/edit-your-guideflow/call-to-action-cta)). * Select "Walkthrough". * Edit the text field with "Welcome ". * Click "Add variables". * Select {{first\_name}}. ### Scenario 2 - Insert company names (call-to-action | walkthrough) Goal: add dynamic personalization into your guideflow by inserting the company of your viewers. (e.g. "A guideflow made for Tesla"). {% @guideflow/guideflow-embed requestedUrl="" %} * Edit your call-to-action (learn [how to edit call-to-actions](/help/edit-your-guideflow/call-to-action-cta)). * Select "Walkthrough". * Edit the text field with "A guideflow made for". * Click "Add variables". * Select {{company}}. ### Scenario 3 - Insert company logos (HTML) Goal: add dynamic personalization into your guideflow by inserting the company logo of your viewers. (e.g. change the logo of your interactive guide with the one from your viewer's company). {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "[HTML editor](broken://pages/vN0iAltMVTLtQ2d4Zv5p)" on the left panel. * Select the HTML element (image) you want to personalize. * Select "Background". * Click on "add variables". * Select "Logo URL". # Search & filter guideflows Search or filter guideflows to quickly access them. (e.g. filter guideflows by "Creation date") {% @guideflow/guideflow-embed requestedUrl="" %} * To search for a specific guideflow, type its name in the search bar located at the top of your dashboard. * To find the most recent guideflow, select "Creation date" located at the top of your dashboard and click on "Creation date". * To find guideflows classified by alphabetic order starting at A, select "Creation date" located at the top of your dashboard and select "Name (A-Z)". # Move a guideflow into folders Move your guideflows into different folders to keep your workspace organized. (e.g. a folder for customer support guideflows only) {% @guideflow/guideflow-embed requestedUrl="" %} * To move a guideflow into another folder, select the guideflow you want to move. * Drag & drop the guideflow to the desired folder. * Click on this same folder to see the guideflow's new location. # Create, edit, and move folders Create, edit, and move folders to keep your workspace organized. (e.g. create a folder for each of your customers) ### Create and edit your folders Create and edit your folders to keep your workspace organized. {% @guideflow/guideflow-embed requestedUrl="" %} * To add a new folder, from your dashboard click on "+" beside "Workspace". * Edit your folder's name. * If you want, edit your new folder's emoji. * If you want to rename or delete a folder, click on the "..." button next to one of your folders and select "Rename" or "Delete". ### Re-order your folders Re-order folders to keep your workspace organized. {% @guideflow/guideflow-embed requestedUrl="" %} * To move a folder to another place, select the folder you want to move. * Drag & drop this folder to the desired place. {% hint style="info" %} A folder can be moved move between public, shared, and private folders. {% endhint %} # Manage folders rights To collaborate with your teammates, manage folder rights. (e.g. invite your sales team to the "Sales" folder) {% @guideflow/guideflow-embed requestedUrl="" %} * Select the folder you want to manage. * Click the "+" button located on the top right of the dashboard. * Toggle off/on access for each existing user to manage their rights. * If you want to invite new team members, learn [how to invite & manage team members. ](/help/workspace/invite-and-manage-team-members) {% hint style="info" %} Each folder is working independently for rights management. {% endhint %} # Create, edit, and manage subfolders Create, edit, and manage subfolders to further organize your workspace. (e.g. create subfolders for different projects within a department) #### **Create and edit your subfolders** {% @guideflow/guideflow-embed requestedUrl="" %} * To add a new section, click the "+" button above your folders and select "Add section". * To add a subfolder within a section, click the "+" button within the section. * Edit your subfolder's name. * If you want, edit your new subfolder's emoji. * To rename or delete a subfolder, click on the "..." button next to the subfolder and select "Rename" or "Delete". #### **Organize your subfolders** Organize subfolders to maintain a clear structure in your workspace. To move a folder into a section: * Select the folder you want to move. * Drag & drop this folder into the desired section. * The folder will now be a subfolder within that section. {% hint style="info" %} Remember, a folder can exist either within a section (as a subfolder) or on its own outside of any section. {% endhint %} # Restore an archived guideflow Restore a guideflow after archiving it if you need to keep using edit, to make edits and share it again. {% @guideflow/guideflow-embed requestedUrl="" %} * Click the "Home" button to go back to the main view * Click on "Archived" * Click on the "..." button of the guideflow to restore * Click on "Restore" * Select the folder where you want to restore your guideflow * Click here to restore your guideflow * Your guideflow is now restored # Manage your integrations To start sending data to other tools, share a first guideflow and begin to observe events. Configure your integrations to enable the transmission of data. You can send two distinct types of data. (e.g. send guideflow's events to your CRM) ### User Data This encompasses information provided in start/end popup with Form such as name, email, phone number, company, and other customized text fields ### Event Data This encompasses actions a user performs during a guideflow, such as viewed steps, completed guideflows, started checklists, and various click actions (e.g., navigating to URL). ### Supported Integrations Check our integrations and how to connect here. # Request a new integration Request a new integration if you don't find yet the perfect one for your needs. (e.g. a new CRM) {% @guideflow/guideflow-embed requestedUrl="" %} * Click on "Integrations" in the dashboard's left bar menu. * Select "Make a request". * It will automatically open your email provider to contact us at . # Resthook integration Guideflow allows Guideflow users to create hooks to be notified about events. Each flow can have multiple hooks, each for a specific event. You can create, list, and delete hooks. **Hooks management API** To use Hooks API, you must generate an API key in your Guideflow account. You can do it in `Settings` -> `API Keys` Section of your workspace. Pass your API key in `Api-Authorization` header. ```js { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Api-Authorization': api_key } ``` **Create hook** `POST https://app.guideflow.com/v1/user/hooks` Body ```js { flowId: number, event: "first-interaction" | "lead-created" | "slide-viewed" | "external-link-clicked" | "completed" | "end-session", targetUrl: string } ``` Response ```js { "id": 53, "workspaceId": 2, "createdAt": "2024-01-15T10:01:19.729Z", "flowId": 10, "event": "end-session", "targetUrl": "https://google.com", "status": "Enable", "lastHttpStatus": null, "lastHttpError": null, "lastHttpCallDate": null } ``` Where `targetUrl` is the url where you want to receive events, `event` is the name of the event you want to subscribe to and `flowId` is the id of the flow you want to subscribe to. **List hooks** `GET https://app.guideflow.com/v1/hooks` Response ```js [ { "id": 53, "workspaceId": 2, "createdAt": "2024-01-15T10:01:19.729Z", "flowId": 10, "event": "end-session", "targetUrl": "https://google.com", "status": "Enable", "lastHttpStatus": null, "lastHttpError": null, "lastHttpCallDate": null }, ... ] ``` **Delete hook** `DELETE https://app.guideflow.com/v1/hooks/:id` Response ```js { "count": 1 } ``` **Getting list of Guideflows** `GET https://app.guideflow.com/v1/flow/byWorkspace` Pass your API key in `Api-Authorization` header. ```js { 'Accept': 'application/json', 'Api-Authorization': api_key } ``` Response ```js [ { "workspaceId": 2, "id": 10, "name": "New guideflow" }, ... ] ``` *** **List of supported events** **`first-interaction`** Triggers when a user opens a guideflow in the player.
Schema ```js { "guideflow_session_id": string, "guideflow_cta_clicked": string, "guideflow_steps_total_number": string, "guideflow_percent_of_completion": string, "guideflow_time_spend": string, "guideflow_is_completed": string, "guideflow_workspace_id": string, "guideflow_folder_id": string, "guideflow_id": string, "guideflow_name": string, "guideflow_step_id": string, "guideflow_step_index": string, "guideflow_source": "embed" | "player" | "customLink" | "publicPage" | "preview", "variables": Object } ```
Example ```js { "guideflow_session_id": "f3f35989-8f9c-4f55-8c7e-a4cd481da53d", "guideflow_cta_clicked": "false", "guideflow_steps_total_number": "6", "guideflow_percent_of_completion": "0", "guideflow_time_spend": "0s", "guideflow_is_completed": "false", "guideflow_workspace_id": "2", "guideflow_folder_id": "7", "guideflow_id": "10", "guideflow_name": "New guideflow", "guideflow_step_id": "0", "guideflow_step_index": "0", "variables": { "customVariableFromQueryString": "value" } } ```
**`lead-created`** Triggers when a user fills in the form or uses a custom link with pre-defined variables.
Schema ```js { "guideflow_session_id": string, "guideflow_cta_clicked": string, "guideflow_steps_total_number": string, "guideflow_percent_of_completion": string, "guideflow_time_spend": string, "guideflow_is_completed": string, "guideflow_url": string, "guideflow_workspace_id": string, "guideflow_folder_id": string, "guideflow_folder_name": string, "guideflow_id": string, "guideflow_name": string, "guideflow_step_id": string, "guideflow_step_index": string, "guideflow_step_name": string, "variables": Object } ```
Example ```js { "guideflow_session_id": "afa3b61f-e78b-4259-819d-7c1da7eab90e", "guideflow_cta_clicked": "false", "guideflow_steps_total_number": "6", "guideflow_percent_of_completion": "0", "guideflow_time_spend": "1 m, 41.9 s", "guideflow_is_completed": "false", "guideflow_url": "http://app.guideflow.com/player/oyv1dulvd0?customVar=value&first_name=John", "guideflow_workspace_id": "2", "guideflow_folder_id": "7", "guideflow_folder_name": "Folder", "guideflow_id": "10", "guideflow_name": "New guideflow", "guideflow_step_id": "131", "guideflow_step_index": "1", "guideflow_step_name": "Step", "variables": { "first_name": "John", "last_name": "Smith", "email": "jsmith@google.com", "company": "Google", "phone": "+1453545645", "website": "https://google.com", "text": "short", "textarea": "long", "date": "2024-01-12" } } ```
**`slide-viewed`** Triggers when the user has viewed a step inside a guideflow.
Schema ```js { "guideflow_session_id": string, "guideflow_time_spend": string, "guideflow_id": string, "guideflow_step_id": string, "guideflow_step_index": string, "guideflow_step_name": string } ```
Example ```js { "guideflow_session_id": "220e6b6a-5f86-4460-ae89-abd01d1834c7", "guideflow_time_spend": "2 m, 27.1 s", "guideflow_id": "10", "guideflow_step_id": "150", "guideflow_step_index": "3", "guideflow_step_name": "Popup" } ```

**`external-link-clicked`** Triggers when a user clicks an external link, usually at the final popup.
Schema ```js { "guideflow_id": string, "guideflow_session_id": string, "guideflow_cta_clicked": string, "guideflow_cta_clicked_location": "end_popup" | "start_popup" | "slide_popup" } ```
Example ```js { "guideflow_id": "10", "guideflow_session_id": "220e6b6a-5f86-4460-ae89-abd01d1834c7", "guideflow_cta_clicked": "https://google.com", "guideflow_cta_clicked_location": "end_popup" } ```

**`completed`** Triggers when the user has reached the end of a guideflow.
Schema ```js { "guideflow_id": string, "guideflow_session_id": string, "guideflow_is_completed": string, "guideflow_percent_of_completion": string } ```
Example ```js { "guideflow_id": "10", "guideflow_session_id": "220e6b6a-5f86-4460-ae89-abd01d1834c7", "guideflow_is_completed": "true", "guideflow_percent_of_completion": "100" } ```

**`end-session`** Triggers when the user closes or leaves a guideflow (i.e., closes page).
Schema ```js { "guideflow_session_id": string, "guideflow_user_hash": string, "guideflow_user_id": string | null, "guideflow_id": string, "data": { "variables": Object, "externalLinksClicked": Array< { "url": string, "location": "end_popup" | "start_popup" | "slide_popup" } >, "totalSpentTime": string, "percentOfCompletion": string, "os": { "name": string, "version": string } } } ```
Example ```js { "guideflow_session_id": "220e6b6a-5f86-4460-ae89-abd01d1834c7", "guideflow_user_hash": "9449cb75-08a9-4191-8acc-dfa0bb4272e5", "guideflow_user_id": '', "guideflow_id": "10", "data": { "variables": { "first_name": "Alex", "customQueryStringVariable": "value" }, "externalLinksClicked": [ { "url": "https://google.com", "location": "end_popup" } ], "totalSpentTime": "14.6 s", "percentOfCompletion": "100", "os": { "name": "Mac OS", "version": "10.15.7" } } } ```
# Cross-frame events **Summary** Event propagation enables Guideflow to transmit events to the website hosting the Guideflow. By configuring event propagation, interactions within your Guideflow can be communicated to your site or web application, allowing you to respond accordingly. This feature has numerous applications, but one example is enhancing your website's analytics with information from Guideflow events. Setting up event propagation requires a bit of coding, specifically adding an event listener so that you will need assistance from someone with coding expertise. Events within a Guideflow are monitored and transmitted to Guideflow's analytics service. These events are then processed and made accessible via Guideflow Analytics. For many clients, this might suffice to evaluate the performance of their Guideflows. Nevertheless, there could be instances where a client wishes to integrate Guideflow event tracking with their analytics system. To listen to Guideflow events, you need add the following code: ``` window.addEventListener('message', (event) => { if (event.origin === 'https://app.guideflow.com') { // Event data. console.log(event.data); } }); ``` *** **These are events that are propagated to the website and their corresponding parameters.** \ **Start Session - event parameters:** ``` { eventName: string; totalSteps: number; flowTitle: string; customLinkId: number | null; data?: object; source: string; sessionHash: string; publicPageId: number | null; flowId: number; parentSessionHash: string | null; screenWidth: number; screenHeight: number; visitorInstanceHash: string; userHash: string; authorizedUserId: number | null; createdAt: Date; } ``` **Start Step - View:** ``` { eventName: string; slideId: number; slideTitle: string; slideOrderId: number; sessionHash: string; flowId: number; publicPageItemId: number; userHash: string; authorizedUserId: number | null; createdAt: Date; } ``` **End Step - View**: ``` { eventName: string; slideId: number; timeSpent: number; slideOrderId: number; slideTitle: string; sessionHash: string; flowId: number; totalSpentTime: number; publicPageItemId: number; completionRate: number; childSessionHash: string; userHash: string; authorizedUserId: number | null; createdAt: Date; }; ``` **Guideflow Completed** ``` { eventName: string; userHash: string; authorizedUserId: number | null; createdAt: Date; sessionHash: string; flowId: number; parentSessionHash: string | null; } ``` **End Session** ``` { eventName: string; visitedSteps: number; totalSteps: number; sessionHash: string; flowId: number; parentSessionHash: string | null; userHash: string; authorizedUserId: number | null; createdAt: Date; data?: { flowTitle: string; variables: Record; os: { name: string | undefined; version: string | undefined; }; percentOfCompletion: number; totalSpentTime: number; }; } ``` **External Link Clicked** ``` { eventName: string; url: string; location: string; flowId: number; sessionHash: string; userHash: string; authorizedUserId: number | null; createdAt: Date; } ``` **Checklist item clicked** ``` { eventName: string; itemTitle: string; itemId: number; itemUUID: string; itemType: string; itemOrderId: number; itemExternalLink: string | null; itemTargetSlideId: number | null; itemTargetFlowId: number | null; itemTargetSlideTitle: string | null; itemTargetSlideOrderId: number | null; sessionHash: string; flowId: number; userHash: string; authorizedUserId: number | null; createdAt: Date; } ``` \ **Example of sending events to Google Analytics** {% embed url="" %} # CRM integrations Here is an overview of the different integrations available with CRM platforms: * [Hubspot](/help/integrations/crm-integrations/hubspot-integration) * [Pipedrive](/help/integrations/crm-integrations/pipedrive-integration) * [Salesforce](/help/integrations/crm-integrations/salesforce-integration) * [Zoho](/help/integrations/crm-integrations/zoho-integration) # Hubspot integration Guideflow's integration with HubSpot enhances how you manage and nurture your contacts and deals directly from interactive demos. This powerful integration enables HubSpot to automatically create or update Contacts, using data from Guideflow user interactions. By integrating these insights into HubSpot, you can build custom views, dashboards, and reports, answering critical questions about your prospect's engagement and the effectiveness of your demos. ### Integration features: #### Contacts management Automatically sync Guideflow demo interactions as new Contacts or update existing ones in HubSpot. This ensures your marketing and sales teams have the most current data, enabling timely and relevant follow-ups. #### Deal influence Gain insights into how Guideflow demos contribute to moving deals through the sales funnel. By linking demo interactions with specific deal stages, you can pinpoint which content drives the most value and act accordingly. #### Advanced analytics Leverage Guideflow's detailed analytics within HubSpot to create comprehensive reports and dashboards. This allows you to analyze demo engagement patterns, providing valuable insights into how your demos influence the buyer's journey. ### **How to activate the Hubspot integration** {% @guideflow/guideflow-embed requestedUrl="" %} 1. In the Guideflow dashboard, navigate to Integrations. 2. Choose Hubspot under CRM, enable the integration, and authorize via Hubspot. 3. Select specific or all Guideflow demos in your workspace for Hubspot data synchronization. ### Important notice for Guideflow users integrating with HubSpot Please be aware that when integrating Guideflow with HubSpot, the identification and synchronization of contact data rely significantly on specific methods and key identifiers: ### Contact identification To successfully populate HubSpot with contact data, it is essential to identify your contacts through one of two methods: 1. A [Form Popup](broken://pages/lsnSER2VhbLXgMdLl4fk) within Guideflow, designed to collect contact information directly. 2. A [Custom Link](/help/sharing-guideflow/create-custom-links) that includes the contact's information, such as their email, as a variable within the link itself. ### Events sent to HubSpot Guideflow analytics are configured to send event data to HubSpot. It is crucial that the contact data contains the contact's email address, whether obtained from a form or a variable within a custom link. The email serves as the key identifier, linking the contact data between Guideflow and HubSpot. ### Existing contacts If a contact with the same email already exists in your HubSpot CRM, then HubSpot will automatically merge the incoming information with the existing contact record, using the email as the key identifier. This process ensures that the contact's interactions and data are kept unified and up-to-date within HubSpot. In situations where HubSpot detects a duplicate, it may prompt you to review and confirm the merge to maintain data integrity. If there is no existing contact matching the email, HubSpot will automatically create a new contact record, capturing all relevant interactions from Guideflow. ### How to manage Guideflow properties in Hubspot {% @guideflow/guideflow-embed requestedUrl="" %} # HubSpot Integration Connect Guideflow to HubSpot to automatically create and update contacts based on how prospects engage with your flows. As viewers interact with your flows, their engagement data is pushed directly into HubSpot so your sales and marketing teams always have the most current picture of prospect activity. {% hint style="info" %} You must have **Admin** level permissions to connect any integrations within Guideflow. {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} ### **How to connect** * Navigate to **Integrations** in your Guideflow dashboard. * Find **HubSpot** under CRM and click **Install**. * A HubSpot authorization window will open. Sign in and grant the requested permissions. * Once authorized, the integration is active. Guideflow will automatically create a custom property group and contact properties in HubSpot. * Toggle on the **events** you want to track. All events are disabled by default. * Choose whether to enable the integration for **all flows** or select specific ones. {% hint style="info" %} HubSpot integration uses OAuth authorization. No API keys or manual configuration are needed on the HubSpot side. {% endhint %} *** ### **How it works** Guideflow pushes data to HubSpot only when a viewer's contact information is collected. This happens in one of two ways: * A viewer submits a **lead capture form** inside the flow. * A viewer arrives via a **custom link** that includes their contact information as a variable. Once contact information is captured, Guideflow searches HubSpot for an existing contact matching the email, phone, or name provided. If a match is found, the existing contact is updated. If no match is found, a new contact is created. All subsequent engagement data from that session is then pushed to that contact record in real time as the viewer progresses through the Guideflow. *** ### Events Tracked Guideflow supports 5 event types for HubSpot. Each event can be individually enabled or disabled from the integration settings.
EventWhat it does
First InteractionTriggered when a viewer starts a flow session. Creates or updates the contact in HubSpot if lead data is available.
Lead CreatedCreates or updates a HubSpot contact with the viewer's information submitted via a form or custom link.
Step ViewedUpdates the contact with the current step details and completion percentage each time a viewer moves through a step.
CompletedUpdates the contact with a completion status and 100% completion percentage when the viewer reaches the final step.
External Link ClickedUpdates the contact with a CTA clicked flag when the viewer clicks an external link in the flow.
### **Contact fields mapped to HubSpot** When a viewer submits a lead form, Guideflow maps the following fields directly to the HubSpot contact record:
Guideflow form fieldHubSpot contact field
First Namefirstname
Last Namelastname
Emailemail
Companycompany
Phonephone
Websitewebsite
### **Guideflow properties created in HubSpot** When the integration is first connected, Guideflow automatically creates a **Guideflow** property group on HubSpot contacts with the following custom properties. These are populated as the viewer interacts with the flow and can be used to build contact views, lists, segments, workflows, and reports in HubSpot.
PropertyDescription
guideflow_session_idUnique identifier for the viewer's session
guideflow_urlURL where the guideflow was embedded or shared
guideflow_workspace_idIdentifier of the Guideflow workspace
guideflow_folder_idIdentifier of the folder containing the guideflow
guideflow_folder_nameName of the folder containing the guideflow
guideflow_idUnique identifier of the guideflow
guideflow_nameName of the guideflow
guideflow_step_idIdentifier of the last step viewed
guideflow_step_indexPosition of the last step viewed
guideflow_step_nameName of the last step viewed
guideflow_steps_total_numberTotal number of steps in the guideflow
guideflow_percent_of_completionHow far the viewer progressed (0 to 100%)
guideflow_time_spendTime spent on the last step viewed
guideflow_is_completedWhether the viewer completed the guideflow
guideflow_cta_clickedWhether the viewer clicked an external link
guideflow_cta_clicked_locationWhere in the guideflow the external link was clicked
### How to manage Guideflow properties in Hubspot {% @guideflow/guideflow-embed requestedUrl="" %} ### **How to use Guideflow data in HubSpot** Once the integration is live and contacts are being created, you can use Guideflow properties in HubSpot to: * **Contact views:** see Guideflow engagement data directly on any contact record. * **Lists and segments:** filter contacts by completion status, CTA clicks, specific guideflows, or folders. * **Workflows:** trigger follow-up actions based on demo engagement, such as sending an email when a viewer completes a guideflow. * **Reports:** build custom reports on how prospects are engaging with your demos across the buyer journey. # Marketo integration Enhance your Guideflows with powerful lead management by integrating Marketo. This integration ensures that your lead capture and tracking align seamlessly with your marketing automation efforts, improving your ability to nurture and convert leads effectively. **Key Benefits:** * Sync demo data with existing leads * Automatically create new leads * Create timeline activity of demo sessions for leads * Capture leads using Marketo lead forms {% hint style="info" %} You must have **admin** level permissions to connect any integrations within Guideflow {% endhint %} ### **How to configure Marketo integration** {% @guideflow/guideflow-embed requestedUrl="" %} **Step 1: Configure Marketo integration** * Navigate to 'Integrations' within your Guideflow dashboard. * Find Marketo and click on "Configure" to initiate the setup process. **Step 2: Provide Marketo API credentials** * You'll need to provide the following Marketo API credentials: * Client ID * Client Secret * Endpoint URL * Identity URL **Important:** Ensure you have at least one free Custom Activity in your Marketo account for this integration to work properly. **Marketo user permissions** The Marketo user associated with the API credentials must have the following permissions: * Read-Write Activity * Read-Write Activity Metadata * Read-Write Person * Read-Write Schema Custom Field * Read-Write Schema Standard Field ### **Demo Data Sent to Marketo** Once the integration is set up, Guideflow will automatically create the following custom fields in Marketo: 1. **Guideflow Session ID** (unique identifier for each demo session) * Type: String * Field Name: guideflow\_session\_id 2. **Guideflow Name** (name of the demo viewed) * Type: String * Field Name: guideflow\_name 3. **Guideflow ID** (unique identifier of the demo) * Type: String * Field Name: guideflow\_id 4. **Guideflow URL** (link to the demo) * Type: String * Field Name: guideflow\_url 5. **Time Spent** (duration in seconds) * Type: Number * Field Name: guideflow\_time\_spend 6. **Percent of Completion** (percentage of steps completed) * Type: Number * Field Name: guideflow\_percent\_of\_completion 7. **Is Completed** (whether the demo was fully completed) * Type: Boolean * Field Name: guideflow\_is\_completed 8. **Steps Total Number** (total number of steps in the demo) * Type: Integer * Field Name: guideflow\_steps\_total\_number 9. **Last Step ID** (identifier of the last viewed step) * Type: String * Field Name: guideflow\_step\_id 10. **Last Step Index** (position of the last viewed step) * Type: Integer * Field Name: guideflow\_step\_index 11. **Last Step Name** (name of the last viewed step) * Type: String * Field Name: guideflow\_step\_name 12. **CTA Clicked** (name of the call-to-action button clicked) * Type: String * Field Name: guideflow\_cta\_clicked 13. **CTA Clicked Location** (where in the demo the CTA was clicked) * Type: String * Field Name: guideflow\_cta\_clicked\_location 14. **Workspace ID** (identifier of the Guideflow workspace) * Type: String * Field Name: guideflow\_workspace\_id 15. **Folder ID** (identifier of the folder containing the demo) * Type: String * Field Name: guideflow\_folder\_id 16. **Folder Name** (name of the folder containing the demo) * Type: String * Field Name: guideflow\_folder\_name #### **Why leverage Marketo:** * **Efficient lead tracking**: Automatically sync demo interaction data with your Marketo leads. * **Improved lead nurturing**: Use demo engagement data to create more targeted and effective nurture campaigns. * **Enhanced analytics**: Gain deeper insights into how leads interact with your product demos. By following these configuration steps, you can ensure a seamless integration process, enhancing your lead capture and management capabilities while leveraging the power of interactive demos. If you need any assistance with the Marketo integration, please don't hesitate to reach out to our support team. --- [Next Page](https://docs.guideflow.com/help/llms-full.txt/1)