Implementing Yotpo Review Widgets with Single Page Application (SPA)

Prev Next

Products


Reviews

Supported plans

Free, Starter, Pro, Premium, Enterprise

eCommerce Platform

N/A

Goals and Outcomes

Single Page Applications (SPAs) are designed to deliver a fast, seamless shopping experience by loading content dynamically within a single page, rather than reloading the entire page as users navigate.

Because of this dynamic behavior, you’ll need to add a code snippet to Yotpo’s on-site widgets to ensure they continue to load correctly as users move through your site.

Common use cases for this setup include:

  • Shoppers navigating between virtual "pages" within the SPA

  • Elements loading dynamically as a user scrolls

  • Displaying a post-purchase review request popup

In this article, you’ll learn how to implement Yotpo’s on-site widgets within an SPA environment.

Implementing Widgets On-Site

Note

This implementation requires the help of a developer.

  1. The following loader code snippet must be added as it appears below with your Review Widgets. 

    <html>
    <head>
        <!-- rest of your js/css includes -->
        <script type="text/javascript" async src="https://cdn-widgetsrepository.yotpo.com/v1/loader/<YOUR APP KEY GOES HERE>"></script>
    </head>
    <body>
        
    </body>
</html>

    Make sure to replace the <YOUR APP KEY GOES HERE>section of the code with your account’s App Key.

    To learn how to find your account’s APP KEY, click here.

  2. Choose the widget relevant to you and follow the existing widget 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.