Savvy Docs
  • Welcome
  • Guides
    • Intro to the builder
    • Designer Card
    • Options Card
    • Working with Logic
  • How-To's
    • General How-To's
      • βœ”οΈHow to select a container when I can’t click over it on the screen
      • πŸ‘οΈHow to hide a global component on a specific page
      • πŸ“ŠHow to calculate statistical significance from split test
      • πŸ…°οΈHow to install a Google font.
      • πŸ—’οΈHow to use "Logs" for debugging
      • ↩️How to change pages order
      • πŸŒ’How to select components that are behind the Embeddables card
      • πŸ“„How to clone a page
      • βž•How to add new components to a page
      • πŸ“„How to select the whole page
      • πŸ’»How to view your flow on different screen sizes
      • β›΅How to move between pages while editing your flow
    • Design How-To's
      • πŸ–‹οΈHow to style a specific component element (E.g. buttons image)
      • β­•How to style individual buttons (by button key) in Options Selectors
      • 🧿How to style a rounded bullet-like checkbox for options buttons
      • πŸ”²How to get rid of the default input outline
      • πŸ–ΌοΈHow to style a background image
      • 🦚How to style components (basics)
      • β†ͺ️How to change a component's location
      • ⬆️How to upload and apply images to your design
      • πŸ”˜How to style hover, selected, disabled button states
      • πŸͺΆHow to style CSS properties that are not there in the designer card (custom properties)
      • πŸ“±How to make my flow responsive
    • Logic How-To's
      • πŸ‘οΈHow to set show/hide conditions
      • πŸ“ΊHow to display a value previously entered by the user
      • βœ–οΈHow to add a β€œDeselect All” button in a Multi-Select
      • πŸ”¨How to use a computed field in a condition
      • πŸ‘οΈHow to hide a global component on a specific page
  • Other useful docs
    • Useful Docs
      • 🚦Conditions
      • πŸ‘©β€πŸ’»Computed Fields
      • πŸ”–Tags
    • WORK IN PROGRESS
      • ◻️Pending
        • Work in Progress: How the New Rendering Engine Works
        • Work in Progress: How to create a new Split test
        • Work in Progress: Preloading images
        • Work in Progress: How to show β€œloading…” while fetching or processing data
        • Work in Progress: How to send data to Tiktok
        • Work in Progress: How to send data to Postcript
        • Work in Progress: How to send data to Klaviyo
        • Work in Progress: How to send data to Google Tag
        • Work in Progress: How to send data to Google Analytics
        • Work in Progress: How to Fetch User Location Data to use in your Flow
        • Work in Progress: How to fetch job offers from Lever’s API
        • Work in Progress: How to fetch data and display the results as options in a dropdown
        • Work in Progress: How to create a new split test with 3 variants
        • Work in Progress: How to Duplicate a Container with All its Content
        • Work in Progress: How to add Chart.js to your flow
        • Work in Progress: How to Create Repeatable Button Components, Fetching from a Database
        • Work in Progress: How to Create a Global Column
        • Work in Progress: How to Clone a Flow
        • Work in Progress: How to Create and Style a Carousel
        • Work in Progress: How to Add Default User Data
        • Work in Progress: How to Show Validation Messages on Required Fields
        • Work in Progress: How to create an Option Selector Results Page
        • Work in Progress: How to create a combined Option Selector + Input component
        • Work in Progress: How to Add an Info Box Popup
        • Work in Progress: How to set up a Micro-Product as a Popup on your Site
        • Work in Progress: How to make a Full-Page Flow
        • Work in Progress: How to Use Custom Selectors
        • Work in Progress: How to Add a Video/GIF Placeholder to a Video Component
        • Work in Progress: How to Style Buttons
        • Work in Progress: How to Center Components
        • Work in Progress: How to Bring Data from Airtable
        • Work in Progress: How to add a custom font from a website:
        • Work in Progress: How to Create Computed Fields
        • Work in Progress: How to Ping an API
        • Work in Progress: How to Store a Password
        • Work in Progress: How to Bring Data from Google Sheet
        • Work in Progress: How to Fetch Safely from Savvy
        • Work in Progress: How To Fetch Data from a specific row in Airtable in a Computed Field
Powered by GitBook
On this page
  • Embeddables sidebar:
  • All Builder Options:
  • Version Control:
  • β€œAdd” button:
  • "Edit" menu button:
  • Split Testing:
  • Comments:
  • Analytics:
  • Debug:
  • Pages:
  • Apps:
  • Logic:
  • Breakpoints:
  • How-tos sections:
  1. Guides

Intro to the builder

In this section, you'll find a short description of the sidebar from top to bottom!

PreviousWelcomeNextDesigner Card

Last updated 1 year ago

Embeddables sidebar:

All Builder Options:

Icon
Name
Description

Save, push live or to staging, view, and switch versions.

Add components, layouts, or entire pages.

Edit the design and settings of components and pages, and control images and videos.

View, add, and modify split tests running on the page.

Collaborate with your team with commenting and more.

View insights on how your flow is doing, including breakdowns, funnels, and split tests.

View and edit live debugging info with our user data and event log explorers.

Easily move between pages, as well as clone them, rearrange them, and edit their keys.

Access our growing collection of useful apps, like our handy Google Lighthouse integration.

Easily create, view, or modify computed fields and actions.

Easily view your flow on mobile, tablet, and desktop devices with a single click.

Version Control:

The same button would change depending on what you can do at any given point.

Icon
Button State
Description

Live version

The gray background with the tick icon means that you're seeing the live version.

Unsaved changes

If you have unsaved changes the button would show the diskette icon.

Push to staging

If you don't have any unsaved changes the button would first have an arrow icon, which on click would send the current version to staging.

Push live

If you don't have any unsaved changes and you are on the version that is actually on staging, the button would show the web icon, which when clicked sets the current version live on the page where the flow is embedded.

Check out our tutorial on "How to set your flow live"

Check out our tutorial "Switching between versions"

This button would open a card from where you would be able to add different kinds of elements.

Card sub-sections:

Name
Description

Default Components

From this section, you can add all the most common types of components you normally use on pages. (E.g. buttons, text, containers, images, etc)

Layouts

Here you'll find a variety of pre-built layouts. These are structures that are common to use and by adding a layout you could save valuable time.

Pages

From here you can add new blank pages

Check out our tutorial on "Adding new components", "Using layouts", or "Adding blank pages"

Edition sub-menu:

Icon
Name
Description

Designer

The designer button would open the Designer card where you would be able to set values to CSS properties for any selected component.

Assets

The assets button would open the Assets card where you would be able to upload or select an image to use in your flow.

Options

The options button would open the Options card where you would be able to set different kinds of configuration options depending on the type of component you have selected.

Split testing (also referred to as A/B testing or multivariate testing) is a method of conducting controlled, randomized experiments with the goal of improving a website metric, such as clicks, form completions, or purchases.

Icon
Name
Description

Create New Test

Create a new split test by cloning the selected page and assigning a percentage of flow for each page version.

View Current Tests

View all flow's split tests and turn them on or off, see the resulting analytics, and go to the variant's pages.

Stat Sig Calculator

Calculate your statistical significance.

This is a powerful tool that allows you and your co-workers to leave each other comments on the actual pages, placed over the component the comment is referring to. This makes it as easy as possible, to get the context for what the comment is about.

Card sub-sections:

Name
Description

Overview

Check out how many visits your flow had.

By page

Check how many users got to each page.

By source

See where your traffic is coming from.

Over time

See a diagram showing the variation on the number of visitors your flow had over time.

All the previous options can be set to display the data from different periods of time.

Icon
Name
Description

User Data

Powerful tool which allows you to easily check and edit all the user data in real-time to facilitate finding bugs or just knowing what's going on with all your variables.

Logs

This card gives you logs about what happened since you opened the page. You can easily track your variable changes for each user interaction.

This card shows you a preview of each page you have in your flow arranged vertically.

From here you can:

  1. Switch from editing one page to another.

  2. Change page order.

  3. Delete any page you want.

  4. Clone pages.

  5. Change page name (key).

Icon
Name
Description

Convert from Figma

Convert a Figma file to Webflow: Share a link to your Figma file and we’ll convert it to a Webflow page in as little as 48 hours. Want a price estimate? Click β€˜Request Price Estimate’ in the flow and you’ll get one within 24 hours.

Page Speed Insights

Run a Google Page Speed Test: View the speed of the current page and any notes for improvement.

Image Compressor

Reduce your image file size: Decrease your page load speed, rank higher on Google and offer a more delightful experience.

Just upload your image, we’ll compress it and give it back to you to download - with no loss of fidelity.

By clicking the "logic" button you'll open the "Logic" card, where you'll see all your Computed Fields(CF) and Actions. From here you can View or edit the existing ones or create new ones. Some CFs or actions would need some custom code to be written. If so, an editor window will open with some options and a big writing area.

Sometimes you want to check how your page looks on a different device. This is the button you click to switch views from desktop to tablet and mobile.

Icon
Name
Description

Desktop

Full-Screen mode, this view would adjust to the size of the browser window.

Tablet

The tablet mode would show you how your flow looks on a 600px wide screen.

Mobile

The mobile mode would show you how your flow looks on a 400px wide screen.

The same button would be showing a different icon, based on the view you are currently on.

How-tos sections:

Navigating between versions:

By clicking on the bottom part of the "Version Control" button you can see a versions list and switch between them.

β€œAdd” button:

"Edit" menu button:

Split Testing:

Comments:

Analytics:

Debug:

Pages:

Apps:

Logic:

Breakpoints:

Design How-To's
General How-To's
Logic How-To's
Version Control
Add
Edit
Split Testing
Comments
Analytics
Debug
Pages
Apps
Logic
Breakpoints