Skip to content
LogoLogo

Build your first experience

In this tutorial we build a survey and show it to your visitors. We do all of it in the Picked dashboard.

At the end you have one experience, one step, one field, and a preview of the survey on your own site.

You will need

A Picked account, in an organization. An organization holds your projects and the people who work on them. If you have an invitation, accept it and sign in. If nobody made an organization yet, make one from the dashboard home page.

A project. A project is one site or one application. See How to create a project. Keep the project home page open, because it shows the SDK snippet that the next item needs.

The URL of your site, such as https://www.example.com. Step 5 opens it to show you the survey. It can be a test site.

What a developer must do first

The SDK must be on your site before step 1. This happens one time, and after it you need no developer again. Send them these four tasks:

  1. Add the SDK to the site. The snippet and the project ID are on the project home page. See How to install the SDK.
  2. Make a component that renders a step form.
  3. Register that component under the name ColorSurvey. Step 3 enters the same name in the dashboard, and the two names must match.
  4. Tell you which site the SDK runs on, so you can open a preview against it.

Add Picked to your application walks a developer through all of it.

1. Make a field

A field collects one answer from your visitor.

  1. Open your project.
  2. Click Fields in the sidebar.
  3. Click New field.
  4. Enter the name Color. The dashboard fills in the label and the key for you.
  5. Change the label to Which color do you like most?. Your visitors read the label, and they never see the name or the key.
  6. Leave the key as color. You cannot change it later.
  7. Choose the type Text.
  8. Click Create field.
The new field form, with a name, a label, and a key entered The fields list for a workspace on the Picked dashboard

Your field appears in the fields list.

2. Make the experience

  1. Click Flows in the sidebar. The experiences list opens.
  2. Click New experience.
  3. Enter the name Color survey.
  4. Leave Type on the Flow option. A flow is the interactive kind, and it is what this tutorial builds. See About pages and flows for the other kind.
  5. Open Advanced.
  6. Enter the component name ColorSurvey. This is the name your developer registered.
  7. Click Create flow.

The flow builder opens with an empty canvas. One gray circle sits on the left. That circle is the origin, and every flow starts there.

3. Make a step

A step is one screen that your visitor sees. It holds your field. You make one from the library, on the left of the flow builder.

  1. Find the Steps section in the library.
  2. Click the + next to it.
  3. Enter the name Question. The key fills in as question.
  4. Click Create step.

The flow builder opens again, and your step is in the library.

4. Build the flow

  1. Find your Question step under Steps in the library.
  2. Drag it onto the canvas.
  3. Drag from the output handle of the origin to the input handle of your step. An arrow joins them.
  4. Drag your Color field from the library onto the step node.
  5. Click Save in the toolbar.
The flow builder with the library, canvas, and inspector panels

The subtitle of the step node now reads one field. Your flow is one step long, and it starts at the origin.

5. Preview it

A preview opens your own site with this workspace applied. Your visitors see no change.

  1. Click Preview in the workspace toolbar.
  2. Enter the URL of your site.
  3. Click Open preview.

Your site opens in a new tab, and your survey is on it. Enter a color and continue.

6. Publish it

  1. Click Publish in the workspace toolbar.
  2. Read the change preview. It lists what your visitors get.
  3. Click Publish to confirm.

Your survey is live.

What you built

You have an experience that your visitors see. The dashboard holds the flow, the step, and the field, so you change any of them and publish again without a deployment.

Where to go next