Skip to content
LogoLogo

Dynamic Experiences Plugin

This plugin reads the configuration of your project from the Picked API at runtime. You can therefore control your experiences, feature flags, steps, fields, and conditions from the dashboard alone.

The plugin reads the configuration of your project and the CMS content of your experiences from one source. It does not mix them. Picked gives a configuration and its content the same version.

Options

OptionTypeDefaultDescription
mode'bundle' | 'api'see belowWhere to read the configuration and the content from.
apiUrlstringhttps://api.picked.appYour own API URL, for a self-hosted or local API.
projectConfigProjectConfignoneA configuration that you give. The plugin makes no request for it.
getContentfunctionnoneA function that you give. The plugin calls it for each experience that uses CMS content.

mode

ValueSourceUse it when
'bundle'The data that the Vite plugin puts in your buildYou want no API request when the page loads.
'api'The Picked API, read when the client startsYou want a workspace publish to reach users without a new deployment.
import { createClient } from 'picked'
import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
 
const client = createClient({
  projectId: 'your-project-id',
  plugins: [dynamicExperiencesPlugin({ mode: 'bundle' })],
})
 
client.start()

If you do not set mode, the plugin uses the build data when the Vite plugin gave it some. In every other case it uses the API.

projectConfig and getContent

These two replace the source for you. Keep the configuration and the content at the same version when you use them. The plugin cannot make that check for you.

Preview mode

After you enter preview mode from the dashboard, the SDK receives a preview token and starts preview mode:

  • The plugin reads fresh options from the API with that token, for any value of mode. It does not read the build-time configuration, a projectConfig that you give, or the cached options.
  • A feature flag decision uses session storage. The decision resets when you close the tab.

A getContent function keeps its place in a preview session, and it receives the token. You therefore decide what a preview means for your own content.