close

Filter

loading table of contents...

Personalization Hub Manual / Version 2307

Table Of Contents

4.3.7 Integration with the P13N Service Provider

As explained in Section 4.2.1.1, “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 = event.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 } });
        }
      </script>

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

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