Implementing Yotpo Review Widgets with Single Page Application (SPA)
- DarkLight
Implementing Yotpo Review Widgets with Single Page Application (SPA)
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
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.
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.
Choose the widget relevant to you and follow the existing widget setup guide. To see the full list of guides, click here.
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?
