Skip to content
LogoLogo

Create Experience Plugin

This plugin registers an array of experiences on the Picked client.

Define a step

Define a step with createStep(). Add it directly to an experience with experience.addStep().

import { createExperience, createStep } from '@picked/client/plugins/create-experience'
 
// Define the steps on their own.
const welcomeStep = createStep({
  id: 'welcome',
  name: 'Welcome',
})
 
const contactStep = createStep({
  id: 'contact',
  name: 'Contact Details',
})
 
// Define the experience, then add the steps to build the flow.
const onboardingExperience = createExperience({
  id: 'onboarding',
  name: 'User Onboarding',
  targets: [{ selector: 'body', placement: 'after' }],
})
 
onboardingExperience.addStep(welcomeStep)
onboardingExperience.addStep(contactStep)

Each step needs a name, and your analytics events use that name to identify the step. An id is optional. Picked makes one for you when you give none.

You can use the same step on more than one experience.

Add a field to a step

Define a field with createField().

import { createStep, createField } from '@picked/client/plugins/create-experience'
 
const emailField = createField({
  id: 'email-address',
  name: 'email-address',
  type: 'text',
  label: 'Email Address',
  multiple: false,
  required: true,
  placeholder: 'you@example.com',
})

Add a field to a step with step.addField(). You can also pass an array of fieldIds when you create the step:

const contactStep = createStep({
  id: 'contact',
  label: 'Contact Details',
})
 
contactStep.addField(emailField)
 
// Or:
 
const contactStep = createStep({
  id: 'contact',
  label: 'Contact Details',
  fieldIds: [contactStep.id],
})

Use a condition in an experience

A condition defines when an experience becomes active for the user.

import { createExperience, createStep } from '@picked/client/plugins/create-experience'
 
const productPageFunnel = createExperience({
  id: 'product-page-funnel',
  name: 'Product Page Funnel',
  condition: {
    and: [
      {
        '==': [
          {
            var: 'location.pathname',
          },
          '/product/:id',
        ],
      },
      {
        var: 'actions.isSaleActive',
      },
    ],
  },
  targets: [{ selector: 'body', placement: 'after' }],
})

A condition also controls the move from one step to the next.

import { createExperience, createStep } from '@picked/client/plugins/create-experience'