Implementing Yotpo Loyalty & Referrals Modules with Single Page Application (SPA)

      Implementing Yotpo Loyalty & Referrals Modules with Single Page Application (SPA)


        Products


        Loyalty & Referrals
        Supported plans

        Pro, Premium, Enterprise

        eCommerce Platform

        N/A

        SPA sites and similar setups create a fast and smooth user experience for your shoppers.


        Since these setups are built on a single page that only loads once as the customer scrolls through, you’ll need to add a code snippet to Yotpo’s on-site modules so they can keep appearing as necessary even after the initial page load.
        Possible use cases may include:

        • The customer moving across pages
        • The customer scrolling down a page that dynamically uploads specific elements only
        • You want the module to appear as a post-purchase popup

        Implementing modules on-site

        Please note:
        This implementation requires the help of a developer.
        1. The following loader code snippet must be added as it appears below with your Loyalty & Referrals modules.
          <html>
              <head>
                  <!-- rest of your js/css includes -->
                  <script type="text/javascript" async src="https://cdn-widgetsrepository.yotpo.com/v1/loader/<YOUR GUID GOES HERE>"></script>
              </head>
              <body>
                  
              </body>
          </html>
          Make sure to replace the <YOUR GUID GOES HERE>section of the code with your account’s GUID.
          To learn how to find your account’s GUID, click here.
        2. Choose the module relevant to you and follow the existing module setup guide.
          To see the full list of guides, click here.
        3. Each time a new div element is added to the page, call the following function in order to display the module.
          yotpoWidgetsContainer.initWidgets()
          
          This function will render all the modules that exist on the page and show them on-site once again. 

        Was this article helpful?