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:

<script>
(function(){
  w=window;n=w.Notifly=function(){n.q.push(arguments)};n.q=[];
  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);
})();
</script>

Step 2 Is to call window.Notifly('init', ...) as shown below when the element with the ID elementId has been rendered:

window.Notifly('init', {
  appId: "<YOUR_NOTIFLY_APP_ID>",
  authCode: "<USER_NOTIFLY_HASH>",
  elementId: "<ELEMENT_ID_FOR_WIDGET_TO_ATTACH_ONTO>",
  externalId: "<EXTERNAL_USER_ID>"
});

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:

const NotiflyWrapper = ({ user }) => {
  useEffect(() => {
    if (window.Notifly) {
      window.Notifly('init', {
        appId: "<YOUR_NOTIFLY_APP_ID>",
        authCode: "<USER_NOTIFLY_HASH>", // e.g. could be `user.notiflyId` here
        elementId: "notifly-wrapper",
        externalId: "<EXTERNAL_USER_ID>"// e.g. could be `user.id` here
      });
    }
  }, [window.Notifly]) // add `user` here if required

  return <div id="notifly-wrapper" />
}