Welcome to our Help Center 👋

How to set up Engagespot in Single Page Applications

Read this guide to set up Engagespot in SPAs like React, Angular, Vue
AS
Written by Anand S
Updated 3 months ago

In Single Page Applications, pages do not refresh. So, you need to follow a different approach in setting up notifications in your admin dashboards built in React, Angular, Vue etc.

The initial setup is same for all kind of web apps (Be it single page, or not). You can read that here. (Upto Step 4)

Step 5. Copy the JS code and paste it in your SPA's index.html file, just above the </head> tag.

If you've configured your bell icon as floating type, then you don't need to do anything. Your setup is complete. But if you have choosen the "On Nav Bar" mode where the bell icon will be inserted into an HTML element, there is a difference.

In most web app dashboards, there is a login page where you don't need to show the bell icon. You need to show the bell icon on the page after login screen. Here is how to do it.

In the Step 5 mentioned above, remove the "Engagespot.init('SITE_KEY')" function from the Javascript code.

Because that function is what inserts the bell icon to the specified HTML element. Since you don't have the HTML Element in your login page, bell icon won't be inserted. And when the user reaches the main page after login, this Engagespot.init() won't be executed again, because this is a Single Page Application. Therefore you won't see the bell icon on your dashboard.

So, you need to call Engagespot.init('SITE_KEY') function on the page where you have the HTML element.

Make sure to replace the SITE_KEY with your app's SITE_KEY, which can be found in your Engagespot dashboard -> App Settings

Did this answer your question?