Skip to content
LogoLogo

Experiences

Define an experience in code with createExperience(). You can also load an experience from the dashboard at runtime with the Dynamic Experiences Plugin.

The flow below points at a DOM selector and renders into it. A Page experience renders through a named slot instead. Point it at .picked-slot-<name> and render <ExperienceSlot name="<name>" /> on your server. Use the slot path for a Page that the server renders and that search engines must read. Use the selector path for a Flow that the browser renders. See Server-Side Rendering and Slots and Placements.

Create an experience

import { createExperience } from '@picked/client/plugins/create-experience'
import { adaptSvelteComponent } from '@picked/svelte'
import appCss from '../app.css?inline'
 
export const productPageExperience = createExperience({
  id: 'product-page-experience',
  name: 'Product Page Experience',
  condition: {
    '==': [
      { var: 'location.pathname' },
      '/product/',
    ],
  },
  targets: [{ selector: 'body', placement: 'after' }],
  component: adaptSvelteComponent(
    import('../ui/ProductPageExperience.svelte'),
    { css: [appCss] },
  ),
})

To register an experience that you define in code, use the Create Experience Plugin. To read an experience from the dashboard at runtime and control it there, use the Dynamic Experiences Plugin.