All Collections
Nickelled Interactive (Advanced) Guides
Installation
Installing Nickelled Interactive Guides in Javascript Single Page Apps (SPAs)
Installing Nickelled Interactive Guides in Javascript Single Page Apps (SPAs)

How to set up Nickelled Interactive Guides inside single-page web apps such as Angular, React or Vue

cyndi@nickelled.com avatar
Written by cyndi@nickelled.com
Updated over a week ago

You can set up Nickelled inside a Javascript-based app easily.

Here's how to do it:

1) Head to your Nickelled account at https://app.nickelled.com/

2) Click 'Settings' to open your account settings:

3) Click 'Sites' to open your sites:

4) Open the site you want to install your Flows on. Then, click 'View code snippet' to get your javascript snippet:

5) In your code, execute the following part of the code snippet to instantiate Nickelled on the page:

<script type="text/javascript">
(function () {
var NickelledLaunchers = window.NickelledLaunchers = NickelledLaunchers || { setUser: function (u) { this.userData = u } };
var s = document.createElement("script");
s.async = true;
s.src = "https://cdn.nickelled.com/launchers-2.min.js";
var f = document.getElementsByTagName("script")[0];
f.parentNode.insertBefore(s, f);
})();
</script>

6) Next, you'll need to pass in the app ID and user ID (and any other data you want to pass) once it becomes available to the page. This might not be at load time, so we'll use the setUser function to pass it only when it's ready.

First, ensure you've got access to the Nickelled app ID, which you'll find in your original JS snippet, by adding it to an environment constant:

export const environment = {
nickelled_app_id: 'your-site.com-123123',
};

7) Finally, when your users sign in (or signs up) and you have the user details, you should call something like the following:

NickelledLaunchers.setUser({
appId: environment.nickelled_app_id,
userId: user.id,
});

This will set the user details and load the relevant launchers for that user as soon as it's executed.

8) Check your code is working as expected. Once it's live, you'll see that your site is marked 'Code Snippet Installed' in your Nickelled settings:

Did this answer your question?