loading table of contents...

Personalization Hub Manual / Version 2310

Table Of Contents

4.3.7 Integration with the P13N Service Provider

As explained in Section, “Frontend Integration” the third-party service needs to call the callback functions if a variant should be displayed and replaces the default content fragment with the variant.

Therefore, you have to implement a listener like the previewListener, which will then change the experience state of the React app.

  1. Implement a p13nListener in Page.tsx

    // catch the function to set the p13n context and state
      const { setExperience } = usePreviewContextState();
      // the p13 hook which is then called by p13n provider
      const p13nListener = (event: MessageEvent) => {
        const data =;
        if (data.type === "cm_p13n") {
          const variantId = data?.body?.variantId;
          const exp: PreviewP13NExperiences = { variants: [variantId] };
          setExperience && setExperience(exp);
      window.addEventListener("message", p13nListener);
  2. Expand the header of index.html to implement the callback functions which uses the listener:

    <script type="text/javascript">
        cm_p13n = {
          pushVariant: function (variantId) {
          window.postMessage({ type: "cm_p13n", body: { variantId: variantId } });

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

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