---
title: "Implementing Yotpo Loyalty & Referrals Modules with Single Page Application (SPA)"
slug: "implementing-yotpo-loyalty-referrals-modules-with-single-page-application-spa"
updated: 2024-04-02T10:50:57Z
published: 2024-04-02T10:50:57Z
canonical: "support.yotpo.com/implementing-yotpo-loyalty-referrals-modules-with-single-page-application-spa"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.
		
			

```markup
<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](https://support.yotpo.com/en/article/finding-your-loyalty-referrals-api-key-and-guid).
2. Choose the module relevant to you and follow the existing module setup guide.
		  
To see the full list of guides, click [here](/v1/docs/display-on-site).
3. Each time a new div element is added to the page, call the following function in order to display the module.
		
			

```markup
yotpoWidgetsContainer.initWidgets()
```

This function will render all the modules that exist on the page and show them on-site once again.