# Quickstart

Airkit is a CX automation platform that streamlines the process of building out digital customer experiences.

Here's how to get started!

***

<details>

<summary>Access the platform 🔑</summary>

#### Logging into Airkit

All of the tools required to build apps in Airkit are available on our browser-based platform.

* If you already have access to an Airkit account, you can sign in [here](https://studio.airkit.com).
* If your teammates have an existing [Organization](../administration/airkit-organizations) you want to join, someone with Admin permissions will need to invite you per the instructions given in [Adding Users to Airkit](../administration/adding-users-to-airkit).
* Otherwise, [sign up for a free trial](https://www.airkit.com/free-trial) to make an account and get started.

</details>

<details>

<summary>Create an app and open it in the Studio 🛠️</summary>

#### Creating an app

Once logged in, you will be taken to the [Airkit Console](../console/console). This part of the platform allows you to configure application resources, connect external integrations, and access all applications that have been created within the relevant Organization. Upon first getting started, no such applications will exist.

Make your first application by clicking on the 'Create New' Button in the upper right corner.

Upon clicking this button, you'll be invited to select how you want to start building your application: from scratch, or with a template.

Templates are built around common Airkit use-cases, and using them can vastly speed up development time, particularly when building out long, complicated application flows. However, when first getting started, the additional layers of abstraction provided by templates can obscure the underlying tools. Peel away those layers of abstraction and start with a blank app by selecting the 'Create blank app' box.

Clicking on this box takes you to a screen that provides an overview of the application.

#### Naming the app

Rename this application by clicking on the edit icon that will appear next to the default name ("Untitled App"):

<img src="https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-8a549d67e28ee913ec7e267652d125cea8608e82%2Fquickstart-v180-0.png?alt=media" alt="" data-size="original">

📘 **Each app stored within an Organization requires a unique name.**

#### Opening the Studio and editing the app

Once you've named your application, click on the 'Edit in Studio' button to the upper right of the screen to begin building out your app:

<img src="https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-f913a4549418d9348049d8a72eb1510409c38781%2Fquickstart-v180-1.png?alt=media" alt="" data-size="original">

</details>

## Define how digital Journeys begin

Upon creating an app, you will first land on [Journey Builder](../studio/builder-bar/journey-builder) in the Studio. This is where you'll outline the intended flow of the application and define how your digital Journeys begin.

1. To build an application that is triggered by a user clicking a link, drag the **Visit a Link** icon from **Triggers > User Interactions** on the left side of the screen to **Triggers** in the Stage on the right.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-c3c8994517886501c6986c2d5eeeb956faeff661%2Fquickstart-v180-2.gif?alt=media)

2. Under **Journey Steps**, turn your attention to the **Step 1** box. In **Web Flow Starts** select the '+' icon. This defines the Web Flow that users will be directed to upon clicking the Journey Start Link.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-b13aa4adc4a48301d9a00c29668834dc7ce170b1%2Fquickstart-v180-3.png?alt=media)

You've now set up an entry point for your application and defined a Web Flow for it to lead to!

> 📘 Save your work frequently, so you don't have to worry about losing progress by accident! Click the Save icon on the upper left of the Studio, or use the usual keyboard shortcuts: CMD + S or CTRL + S.

## Build the UI

After creating an entry point for your application and defining the Web Flow that it links to, you'll want to build out the UI that users will see upon clicking the link.

1. UI components are laid out and styled in the [Web Flows Builder](../studio/builder-bar/web-flows-builder). To toggle to the Web Flows Builder, turn your attention to the [Builder Bar](../studio/builder-bar) on the far left of the screen and select **Web Flows**.

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-139a86eb110c07d850ab8c0eda1cb69097a4084d%2Fquickstart-v180-4.png?alt=media)

The Web Flows Builder is laid out as follows:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-72c92a66a67eed89715bbb1abd3d9ffc0db48fca%2Fquickstart-v180-5.png?alt=media)

2. Under the **Web Flows** section of the Tree, you'll see the Web Flow created in the the previous section, still named "Web Flow". Web Flows are containers for Web Pages, which display UI components called **Web Controls**.

Click on the Web Page, named "Web Page", under the Web Flow. You will see the Web Page appear in the Stage:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-f4c60a18abc3f80a3e2852fcf1443c495dba1798%2Fquickstart-v180-6.png?alt=media)

3. To select Web Controls to drag-and-drop into your new Web Page, toggle from the **Navigator** Tab at the top of the Tree to the **Controls** Tab:

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-8eeec65af52a8a32c781cf967c7ae7de114e0269%2Fquickstart-v180-7.png?alt=media)

4. Expand the **Text** section to view the Text Controls, including Labels and Hyperlinks. Drag-and-drop a Label into the Web Page, then double-click on the text the appears in order to edit it. Replace "The quick brown fox jumped over the lazy dog" with "Hello, World!"

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-c5a4a373f2bd60d8c27fb1e5d051d314c9d1615a%2Fquickstart-v180-8.gif?alt=media)

> 📘 If you prefer not to drag-and-drop Controls into your Web Page, you can also add Controls by clicking on the '+' icon to the right of the Web Page in the Tree and selecting the desired Web Control.

## Preview your digital Journey

[Previewing](../studio/app-preview) your application fully emulates everything you've built out so far, allowing you to test all components of your digital experiences.

> 📘 To ensure your App Preview will emulate all components of your app build, you'll need to save your app before Previewing; if you don't, you will receive a reminder to do so upon clicking the **Preview** button.

1. Click on the **Preview** button to the upper right of the Studio.

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-6a2990e9022544f75ba98de0581d33091072b1aa%2Fquickstart-v180-9.png?alt=media)

2. Clicking on the **Preview** button will open up your App Preview in a separate tab. To emulate accessing your application by clicking on a link, click on the Web icon to the bottom right of the leftmost Previews Window:

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-27287d7bbef9afea109f05f3d9e80de8d4f68f75%2Fquickstart-v180-10.png?alt=media)

Clicking on this icon simulates the process of starting a digital Journey by clicking a link. Note that the simulated Journey begins with the Web Flow defined in the Journey Builder, which begins with the Web Page you created in the Web Flows Builder.

## Publishing

To publish your application, click on the "Publish" button on the upper right to the Studio. In the pop-up window that appears, click the "Publish" button. This will provide a Starting Link that can be used to navigate to the web experience that you just built out.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-196573d2537d0d82bfb871e1aa0b89b58159a6b2%2Fquickstart-v180-11.gif?alt=media)

> 📘 The Starting Link automatically generated here uses Airkit's default domain. For more on how to create a white-label URL to link to your applications, see [Publishing Your Application](../building-apps/publishing/publishing-your-application).

Congratulations! You've just built and published your first digital experience in Airkit.

## What's next?

Now that you've been introduced to the Airkit platform, we recommend building a simple Contact Form as your first full-scale application.

After building your Contact Form, there's lot a lot more Airkit to explore! Here are some good places to get started:

**Prefer to learn by building?** 🛠️ Check out some of our long-form tutorials:
