# Welcome

{% hint style="success" %}
**Welcome to the Savvy Builder documentation!**

*Here you'll find a growing library of guides, references, tutorials, concept explainers and FAQs.*

Check out the top 3 getting started pages below, or go straight to [Intro to the Builder](https://trysavvy.gitbook.io/savvy/key-concepts/intro-to-the-builder).
{% endhint %}

### 🙋 Can I build Savvy Micro-Products myself?

Yes! But the builder is still a little confusing in places (we're working on this!) so 🤖 **Savvy Experts** are on-hand to help you out.

We'll also often build you a starter template with a few pages in your brand style, to get you started.

## New and in a hurry?

### Get started quickly with these three key pages:

{% content-ref url="key-concepts/intro-to-the-builder" %}
[intro-to-the-builder](https://trysavvy.gitbook.io/savvy/key-concepts/intro-to-the-builder)
{% endcontent-ref %}

{% content-ref url="key-concepts/designing-in-savvy" %}
[designing-in-savvy](https://trysavvy.gitbook.io/savvy/key-concepts/designing-in-savvy)
{% endcontent-ref %}

{% content-ref url="tips/rules-and-tips-for-a-proper-build" %}
[rules-and-tips-for-a-proper-build](https://trysavvy.gitbook.io/savvy/tips/rules-and-tips-for-a-proper-build)
{% endcontent-ref %}

## Ready to learn the builder properly?

### Take 15 minutes to read our Key Concepts pages:

{% content-ref url="key-concepts/intro-to-the-builder" %}
[intro-to-the-builder](https://trysavvy.gitbook.io/savvy/key-concepts/intro-to-the-builder)
{% endcontent-ref %}

{% content-ref url="key-concepts/designing-in-savvy" %}
[designing-in-savvy](https://trysavvy.gitbook.io/savvy/key-concepts/designing-in-savvy)
{% endcontent-ref %}

{% content-ref url="key-concepts/conditions" %}
[conditions](https://trysavvy.gitbook.io/savvy/key-concepts/conditions)
{% endcontent-ref %}

{% content-ref url="reference/components" %}
[components](https://trysavvy.gitbook.io/savvy/reference/components)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/setting-up-data-outputs" %}
[setting-up-data-outputs](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/setting-up-data-outputs)
{% endcontent-ref %}

{% content-ref url="key-concepts/going-live" %}
[going-live](https://trysavvy.gitbook.io/savvy/key-concepts/going-live)
{% endcontent-ref %}

## All Docs

### How-tos

{% tabs %}
{% tab title="Content" %}
{% content-ref url="how-tos/content-how-tos/how-to-add-an-info-box-popup" %}
[how-to-add-an-info-box-popup](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-add-an-info-box-popup)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/logic-deselect-all-button-in-multi-select" %}
[logic-deselect-all-button-in-multi-select](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/logic-deselect-all-button-in-multi-select)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-create-a-combined-option-selector-+-input-component" %}
[how-to-create-a-combined-option-selector-+-input-component](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-create-a-combined-option-selector-+-input-component)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-create-an-option-selector-results-page" %}
[how-to-create-an-option-selector-results-page](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-create-an-option-selector-results-page)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-show-validation-messages-on-required-fields" %}
[how-to-show-validation-messages-on-required-fields](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-show-validation-messages-on-required-fields)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-add-default-user-data" %}
[how-to-add-default-user-data](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-add-default-user-data)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-create-and-style-a-carousel" %}
[how-to-create-and-style-a-carousel](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-create-and-style-a-carousel)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-clone-a-flow" %}
[how-to-clone-a-flow](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-clone-a-flow)
{% endcontent-ref %}

{% content-ref url="how-tos/content-how-tos/how-to-create-a-global-column" %}
[how-to-create-a-global-column](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-create-a-global-column)
{% endcontent-ref %}
{% endtab %}

{% tab title="Design" %}
{% content-ref url="how-tos/design-how-tos/how-to-center-components" %}
[how-to-center-components](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-center-components)
{% endcontent-ref %}

{% content-ref url="how-tos/design-how-tos/how-to-style-buttons" %}
[how-to-style-buttons](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-style-buttons)
{% endcontent-ref %}

{% content-ref url="how-tos/design-how-tos/how-to-add-a-video-gif-placeholder-to-a-video-component" %}
[how-to-add-a-video-gif-placeholder-to-a-video-component](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-add-a-video-gif-placeholder-to-a-video-component)
{% endcontent-ref %}

{% content-ref url="how-tos/design-how-tos/how-to-use-custom-selectors" %}
[how-to-use-custom-selectors](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-use-custom-selectors)
{% endcontent-ref %}

{% content-ref url="how-tos/design-how-tos/making-a-full-page-flow" %}
[making-a-full-page-flow](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/making-a-full-page-flow)
{% endcontent-ref %}

{% content-ref url="how-tos/design-how-tos/setting-up-popup-flows" %}
[setting-up-popup-flows](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/setting-up-popup-flows)
{% endcontent-ref %}
{% endtab %}

{% tab title="Logic" %}
{% content-ref url="how-tos/logic-how-tos/how-to-set-up-stripe" %}
[how-to-set-up-stripe](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-set-up-stripe)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/how-to-create-a-custom-validation-formula-for-inputs" %}
[how-to-create-a-custom-validation-formula-for-inputs](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-create-a-custom-validation-formula-for-inputs)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/how-to-ping-an-api" %}
[how-to-ping-an-api](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-ping-an-api)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/computed-fields/how-to-store-a-password" %}
[how-to-store-a-password](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/computed-fields/how-to-store-a-password)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/setting-up-data-outputs/how-to-add-airtable-as-data-output" %}
[how-to-add-airtable-as-data-output](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/setting-up-data-outputs/how-to-add-airtable-as-data-output)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/setting-up-data-outputs/how-to-add-zapier-webhooks-to-your-flow" %}
[how-to-add-zapier-webhooks-to-your-flow](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/setting-up-data-outputs/how-to-add-zapier-webhooks-to-your-flow)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/how-to-fetch-dropdown-options-from-an-api" %}
[how-to-fetch-dropdown-options-from-an-api](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/how-to-fetch-dropdown-options-from-an-api)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/computed-fields/how-to-bring-data-from-google-sheet" %}
[how-to-bring-data-from-google-sheet](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/computed-fields/how-to-bring-data-from-google-sheet)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/computed-fields/how-to-fetch-safely-from-savvy" %}
[how-to-fetch-safely-from-savvy](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/computed-fields/how-to-fetch-safely-from-savvy)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/computed-fields/fetching-data-from-a-specific-row-in-airtable-in-a-computed-field" %}
[fetching-data-from-a-specific-row-in-airtable-in-a-computed-field](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/computed-fields/fetching-data-from-a-specific-row-in-airtable-in-a-computed-field)
{% endcontent-ref %}

{% content-ref url="how-tos/logic-how-tos/prefilling-answers-into-your-flow" %}
[prefilling-answers-into-your-flow](https://trysavvy.gitbook.io/savvy/how-tos/logic-how-tos/prefilling-answers-into-your-flow)
{% endcontent-ref %}

{% endtab %}
{% endtabs %}

### Reference

{% tabs %}
{% tab title="All Components" %}
{% content-ref url="reference/components/user-input-components" %}
[user-input-components](https://trysavvy.gitbook.io/savvy/reference/components/user-input-components)
{% endcontent-ref %}

{% content-ref url="reference/components/global-components" %}
[global-components](https://trysavvy.gitbook.io/savvy/reference/components/global-components)
{% endcontent-ref %}

{% content-ref url="reference/components/container-components" %}
[container-components](https://trysavvy.gitbook.io/savvy/reference/components/container-components)
{% endcontent-ref %}

{% content-ref url="reference/components/repeatable-components" %}
[repeatable-components](https://trysavvy.gitbook.io/savvy/reference/components/repeatable-components)
{% endcontent-ref %}

{% content-ref url="reference/components/transitions" %}
[transitions](https://trysavvy.gitbook.io/savvy/reference/components/transitions)
{% endcontent-ref %}

{% content-ref url="reference/components/display-information-back-to-users" %}
[display-information-back-to-users](https://trysavvy.gitbook.io/savvy/reference/components/display-information-back-to-users)
{% endcontent-ref %}

{% content-ref url="reference/components/preset-buttons-for-dropdowns" %}
[preset-buttons-for-dropdowns](https://trysavvy.gitbook.io/savvy/reference/components/preset-buttons-for-dropdowns)
{% endcontent-ref %}

{% content-ref url="reference/components/upload-components" %}
[upload-components](https://trysavvy.gitbook.io/savvy/reference/components/upload-components)
{% endcontent-ref %}

{% content-ref url="reference/components/lottie-player-component" %}
[lottie-player-component](https://trysavvy.gitbook.io/savvy/reference/components/lottie-player-component)
{% endcontent-ref %}

{% content-ref url="reference/components/book-meeting-component" %}
[book-meeting-component](https://trysavvy.gitbook.io/savvy/reference/components/book-meeting-component)
{% endcontent-ref %}

{% content-ref url="reference/components/book-meeting-component-1" %}
[book-meeting-component-1](https://trysavvy.gitbook.io/savvy/reference/components/book-meeting-component-1)
{% endcontent-ref %}

{% content-ref url="reference/components/input-components" %}
[input-components](https://trysavvy.gitbook.io/savvy/reference/components/input-components)
{% endcontent-ref %}

{% content-ref url="reference/components/option-selectors" %}
[option-selectors](https://trysavvy.gitbook.io/savvy/reference/components/option-selectors)
{% endcontent-ref %}
{% endtab %}

{% tab title="Design" %}
{% content-ref url="reference/design/default-styles" %}
[default-styles](https://trysavvy.gitbook.io/savvy/reference/design/default-styles)
{% endcontent-ref %}

{% content-ref url="reference/design/common-button-states-and-styles" %}
[common-button-states-and-styles](https://trysavvy.gitbook.io/savvy/reference/design/common-button-states-and-styles)
{% endcontent-ref %}
{% endtab %}

{% tab title="Logic" %}
{% content-ref url="reference/logic/avoid-storing-data" %}
[avoid-storing-data](https://trysavvy.gitbook.io/savvy/reference/logic/avoid-storing-data)
{% endcontent-ref %}
{% endtab %}

{% tab title="The Builder UI" %}
{% content-ref url="reference/the-builder-ui/top-bar" %}
[top-bar](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/top-bar)
{% endcontent-ref %}

{% content-ref url="reference/the-builder-ui/left-sidebar" %}
[left-sidebar](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/left-sidebar)
{% endcontent-ref %}

{% content-ref url="reference/the-builder-ui/the-preview-pane" %}
[the-preview-pane](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/the-preview-pane)
{% endcontent-ref %}

{% content-ref url="reference/the-builder-ui/right-sidebar" %}
[right-sidebar](https://trysavvy.gitbook.io/savvy/reference/the-builder-ui/right-sidebar)
{% endcontent-ref %}
{% endtab %}

{% tab title="Other Reference Docs" %}
{% content-ref url="reference/flow-wide-settings" %}
[flow-wide-settings](https://trysavvy.gitbook.io/savvy/reference/flow-wide-settings)
{% endcontent-ref %}

{% content-ref url="reference/publishing-workflow" %}
[publishing-workflow](https://trysavvy.gitbook.io/savvy/reference/publishing-workflow)
{% endcontent-ref %}

{% content-ref url="reference/definitions" %}
[definitions](https://trysavvy.gitbook.io/savvy/reference/definitions)
{% endcontent-ref %}

{% content-ref url="reference/embed-your-micro-product" %}
[embed-your-micro-product](https://trysavvy.gitbook.io/savvy/reference/embed-your-micro-product)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

### All Other Docs

{% tabs %}
{% tab title="Tips" %}
{% content-ref url="tips/rules-and-tips-for-a-proper-build" %}
[rules-and-tips-for-a-proper-build](https://trysavvy.gitbook.io/savvy/tips/rules-and-tips-for-a-proper-build)
{% endcontent-ref %}

{% content-ref url="tips/going-live-checklist" %}
[going-live-checklist](https://trysavvy.gitbook.io/savvy/tips/going-live-checklist)
{% endcontent-ref %}

{% content-ref url="tips/url-savvy-tricks" %}
[url-savvy-tricks](https://trysavvy.gitbook.io/savvy/tips/url-savvy-tricks)
{% endcontent-ref %}
{% endtab %}

{% tab title="Other Guides" %}
{% content-ref url="other/introduction-to-savvy-analytics" %}
[introduction-to-savvy-analytics](https://trysavvy.gitbook.io/savvy/other/introduction-to-savvy-analytics)
{% endcontent-ref %}

{% content-ref url="other/segment" %}
[segment](https://trysavvy.gitbook.io/savvy/other/segment)
{% endcontent-ref %}
{% endtab %}

{% tab title="Meta" %}
{% content-ref url="meta/roadmap" %}
[roadmap](https://trysavvy.gitbook.io/savvy/meta/roadmap)
{% endcontent-ref %}

{% content-ref url="meta/changelog" %}
[changelog](https://trysavvy.gitbook.io/savvy/meta/changelog)
{% endcontent-ref %}

{% content-ref url="meta/how-to-write-docs" %}
[how-to-write-docs](https://trysavvy.gitbook.io/savvy/meta/how-to-write-docs)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}
