Notifly
Search…
Single page applications
Use this installation guide if your website is a single page application or otherwise renders HTML with Javascript.
Step 1 is to copy and paste the following snippet into all pages you want Notifly to appear on. This would usually be your template for your application (an HTML file). The snippet should be placed right before the </body> tag:
1
<script>
2
(function(){
3
w=window;n=w.Notifly=function(){n.q.push(arguments)};n.q=[];
4
d=document;s=d.createElement("script");s.src="https://app.notifly.io/static/v2/notifly.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);
5
})();
6
</script>
Copied!
Step 2 Is to call window.Notifly('init', ...) as shown below when the element with the ID elementId has been rendered:
1
window.Notifly('init', {
2
appId: "<YOUR_NOTIFLY_APP_ID>",
3
authCode: "<USER_NOTIFLY_HASH>",
4
elementId: "<ELEMENT_ID_FOR_WIDGET_TO_ATTACH_ONTO>",
5
externalId: "<EXTERNAL_USER_ID>"
6
});
Copied!

React example

In React calling window.Notifly('init', ...) would be done as follows.
In the component that the Notifly icon should appear in, add a useEffect -hook similar to this:
1
const NotiflyWrapper = ({ user }) => {
2
useEffect(() => {
3
if (window.Notifly) {
4
window.Notifly('init', {
5
appId: "<YOUR_NOTIFLY_APP_ID>",
6
authCode: "<USER_NOTIFLY_HASH>", // e.g. could be `user.notiflyId` here
7
elementId: "notifly-wrapper",
8
externalId: "<EXTERNAL_USER_ID>"// e.g. could be `user.id` here
9
});
10
}
11
}, [window.Notifly]) // add `user` here if required
12
13
return <div id="notifly-wrapper" />
14
}
Copied!
Copy link
Contents