Guideflow - Help Center
  • 🐣GET STARTED
    • What is Guideflow?
    • What can I use Guideflow for?
    • Install Chrome extension
    • Install Desktop app
  • 🔴CAPTURE A GUIDEFLOW
    • How-to capture a guideflow
    • Screen capture
    • HTML capture
    • Additional capture options
  • ✏️EDIT YOUR GUIDEFLOW
    • How-to edit your guideflow
    • Edit Design
    • Edit Theme
    • Edit Browser
    • Edit Call-to-Action (CTA)
    • Pan & Zoom
    • Add & edit steps
    • Add Popup
      • Add start popup
      • Add a popup
      • Add end popup
      • Add embed form popup
    • Checklist
      • Create a checklist
      • Edit checklist Theme
    • HTML editor
      • Edit your HTML capture
      • Advanced features
    • HTML Style editor
    • Guideflow settings
    • Preview your guideflow
    • Add blur
    • Custom resolution
    • Sandbox/Clickable demos
      • How to edit a Sandbox/Clickable demo
      • Presenter notes
    • Presenter notes
  • 💻SHARING GUIDEFLOW
    • How-to share your guideflow
    • Share your public link
    • Create custom links
    • Embed your guideflow
      • Landing page builders
      • Website builders & CMS
      • Blogging Platforms
      • Project/Task management
      • Help desk / Knowledge base
      • Customer Support
        • Zendesk integration
        • Intercom integration
      • Product Adoption
      • Changelog
      • Productivity tools
      • Review platforms
        • G2 Integration
    • Share on social platforms
    • Share into email platforms
      • Email marketing platforms
        • ActiveCampaign
      • Sales outreach platforms
    • Invite someone to Guideflow
    • Export in GIF or video
    • Export in PDF
    • Security settings
      • Password protection
      • Domain protection
      • Link expiration
    • Offline demo
  • 📊ANALYTICS
    • General analytics
    • Session analytics
    • Export analytics
    • Filter analytics
    • AI Account Reveal
  • 👨‍🏫COLLECT LEADS
    • Get leads data
  • 🧲Variables
    • What are variables
    • How-to pass variables
    • Where to use variables
    • Create & edit variables
    • Passing variables into emailing platforms
    • Examples
  • 📋DASHBOARD
    • Search & filter guideflows
    • Move a guideflow into folders
    • Create, edit, and move folders
    • Manage folders rights
    • Create, edit, and manage subfolders
  • 🔌INTEGRATIONS
    • Manage your integrations
    • Request a new integration
    • Resthook integration
    • Cross-frame events
    • CRM integrations
      • Salesforce integration
      • Hubspot integration
      • Pipedrive integration
    • Analytics integrations
      • Google Analytics integration
      • Mixpanel integration
      • Segment integration
      • OneTrust integration
    • Slack integration
    • Zapier integration
    • Remote Navigator
    • Highspot integration
    • Marketo integration
    • Figma integration
  • 🎨Branding
    • Custom theme
    • Remove watermark
    • Customize your public page
    • Custom domain
  • 🔑Workspace
    • Edit workspace information
    • Invite & manage team members
    • Manage billing
    • Access invoices
    • Manage API keys
    • Create & change workspace
  • 🌐ACCOUNT
    • Edit account information
    • Manage notification preferences
  • ☁️SSO
    • Enable SSO
  • 🤖AI
    • AI Voiceover
    • AI Translate
Powered by GitBook
On this page
  • Design options:
  • Customize Hotspot style
  • Customize Walkthrough style
  • Customize start/end popup style
  • Customize checklist style
  1. EDIT YOUR GUIDEFLOW

Edit Design

PreviousHow-to edit your guideflowNextEdit Theme

Last updated 5 months ago

Customize your guideflow's appearance to fit your brand.

(e.g. customize a guideflow to match your brand by changing colors and button style)

  • 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:

  • : if you want to customize your hotspot design.

  • : if you want to customize your walkthrough design.

  • : if you want to customize your start/end popup design.

  • : if you want to customize your checklist design.

  • : if you want to customize your theme design.

Customize Hotspot style

A Hotspot is a pulsing dot that displays your audience where to click.

  • 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.

  • 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.

A checklist item can also open an URL link instead of navigating to a defined step.

✏️
Customize theme design
Customize Hotspot style
Customize Walkthrough style
Customize start/end popup style
Customize checklist style