Pendo with React SPA

• 

  石田 大地

  December 03, 2021 09:37

  Did you every figure this out? In case some one else comes across this post. I had the same question and after hours of playing around I was able to get Pendo working with in a ReactJS SPA.

  you need to  include the common snippet in to your index.html, then add the `pendo.initialize` code in to a common component. (eg: component that loads after user logins)

  The caveat here is you need to use `window.pendo.initialize` or else it will say that pendo is undefined.

  9
• 

  Admin Joyuus

  January 08, 2024 21:47

  I am having this same problem, but I can't seem to use window.pendo either, because Typescript doesn't understand that it exists. 

  0
• 

  石田 大地

  January 09, 2024 04:42 (Edited January 09, 2024 04:43)

  For Typescript you need to create a definition file for pendo.
  The following is not a Pendo Official library but has worked for me.

  DefinitelyTyped/types/pendo-io-browser at master · DefinitelyTyped/DefinitelyTyped (github.com)

  0
• 

  sarath kumar

  September 04, 2024 08:33 (Edited September 04, 2024 10:19)

  load Pendo script dynamically from the CDN using a custom function, then initialize Pendo after the user logged in.
  This method works without using pendo-io-brower package.

  src/pendo.d.ts (create a custom typing file to let TypeScript know about the global pendo object;

  declare global{
    interface Window {
       pendo:any;
    }
  }
  export {};

  src/pendoUtils.ts (pendo utility functions)

  export const loadPendoScript = () => {
     const script = document.createElement('script');
     script.scr = 'https://cdn.pendo.io/agent/static/YOUR_PENDO_API_KEY/pendo.js';
     script.async = true;
     document.body.appendChild(script);
  };
  
  Or
  directly add the script in index.html file.
  <script type="text/javascript" src="https://cdn.pendo.io/agent/static/YOUR_PENDO_API_KEY/pendo.js"></script>

  export const initializePendo = (userData:any) => {
     if(window.pendo){
        window.pendo.initialize({
            apiKey: 'YOUR_PENDO_API_KEY',
            visitor: {id:userData.Id,   },
            account: {id:userData.Id,  }
        });
     }
  };

  In react component

  userEffect(() => {
      loadPendoScript();
      if(isLoggedIn) {
         getUserdata().then(data => {
           initializePendo(data.userinfo);
         });
      }
  },[isLoggedIn]); 
   

  1

Please sign in to leave a comment.