loading table of contents...

Personalization Hub Manual / Version 2310

Table Of Contents

4.3.6 P13N Studio Integration

You can preview the p13n feature of a p13n experience and segment content items in CoreMedia Studio. This section describes the implementation steps necessary to enable the preview for Spark headless client.

1. Enabling Preview in Preview Toolbar

Client-side Personaliaztion adds a new menu in the preview toolbar (see Section 7.1.3, “Previewing Client Personalization” in Studio User Manual). You can use it to enable a segment and a combination of experience variants for preview.

To enable this preview feature in your headless case, proceed as follows:

  1. Change Preview.ts to use the newly introduced p13n experience context. Implement a new function which extracts the experience url parameter which is set when the user chooses an experience:

    export const getPreviewP13NExperiences = (queryParams: string): Object | undefined => {
      const p13nExperiences = new URLSearchParams(queryParams).get("p13n_experiences");
      return (isPreview() && p13nExperiences && JSON.parse(p13nExperiences)) || undefined;
  2. Modify App.tsx so that the preview context provider is set by this function:

    const previewP13NExperiences = getPreviewP13NExperiences(;
          <PreviewContextProvider previewDate={previewDate} previewP13NExperiences={previewP13NExperiences}>

Now, when the editor chooses the p13n experience in the preview toolbar in Studio, the React experience state is changed and Spark renders the chosen experience variant in the preview.

2. Enabling Preview in LinkList Toolbar

Each toolbar of a variant/segment and baseline linklist in CoreMedia Studio has a preview icon as mentioned in Section 7.1.3, “Previewing Client Personalization” in Studio User Manual. By clicking the icon, the corresponding variant/segment will be loaded in the preview window.

To enable this preview feature in your headless case proceed as follows:

  1. Implement a previewListener in PreviewPage.tsx

    // catch the function to set the p13n context and state
      const { setExperience } = usePreviewContextState();
      // the p13 hook which is used by studio "eye".
      const previewListener = (event: MessageEvent) => {
        const data =;
        if (data.type === "previewExperience") {
          const variantId = data?.body?.variantId;
          const exp: PreviewP13NExperiences = { variants: [variantId] };
          setExperience && setExperience(exp);
      window.addEventListener("message", previewListener, false);

Now, in Studio the preview of the p13n experience shows the chosen variant.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.