Userflow.js installation in GoHighLevel

You can install Userflow.js in your GoHighLevel account, which will enable you to build flows, Checklist, launchers and surveys for your users.

Follow these steps:

1. Sign in to Userflow.

2. Go to Settings > Environments.

3. Note down your Userflow.js Token (you’ll need it in a later step). Hint: It starts with ct_.

4. Sign in to your GoHighLevel agency account.

5. Go to Settings > Agency Settings.

6. In the Custom Javascript field, paste the code below (make sure to replace USERFLOW_TOKEN with the real token you noted down in step 3).

<script>
!function(){var e="undefined"==typeof window?{}:window,t=e.userflow,r=e.history;function n(t,n){return function(){var o=new CustomEvent(n),s=Array.prototype.slice.call(arguments),a=t.apply(r,s);return e.dispatchEvent(o),a}}if(r){e.__userflowStatePatched=!0;var o=r.pushState,s=r.replaceState;r.pushState=n(o,"userflow:pushstate"),r.replaceState=n(s,"userflow:replacestate")}if(!t){var a="https://js.userflow.com/",l=null;t=e.userflow={_stubbed:!0,load:function(){return l||(l=new Promise((function(t,r){var n=document.createElement("script");n.async=!0;var o=e.USERFLOWJS_ENV_VARS||{};"es2020"===(o.USERFLOWJS_BROWSER_TARGET||function(e){for(var t=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/CriOS\//,/CriOS\/(\d+)/,100],[/Safari\//,/Version\/(\d+)/,14],[/Firefox\//,/Firefox\/(\d+)/,74]],r=0;r<t.length;r++){var n=t[r],o=n[0],s=n[1],a=n[2];if(e.match(o)){var l=e.match(new RegExp(s));if(l&&parseInt(l[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(n.type="module",n.src=o.USERFLOWJS_ES2020_URL||a+"es2020/userflow.js"):n.src=o.USERFLOWJS_LEGACY_URL||a+"legacy/userflow.js",n.onload=function(){t()},n.onerror=function(){document.head.removeChild(n),l=null;var e=new Error("Could not load Userflow.js");console.warn(e.message),r(e)},document.head.appendChild(n)}))),l}};var u=e.USERFLOWJS_QUEUE=e.USERFLOWJS_QUEUE||[],i=function(e){t[e]=function(){var r=Array.prototype.slice.call(arguments);t.load(),u.push([e,null,r])}},c=function(e){t[e]=function(){var r,n=Array.prototype.slice.call(arguments);t.load();var o=new Promise((function(e,t){r={resolve:e,reject:t}}));return u.push([e,r,n]),o}},d=function(e,r){t[e]=function(){return r}};i("_setTargetEnv"),i("closeResourceCenter"),i("disableEvalJs"),i("init"),i("off"),i("on"),i("prepareAudio"),i("registerCustomInput"),i("remount"),i("reset"),i("setBaseZIndex"),i("setCustomInputSelector"),i("setCustomNavigate"),i("setCustomScrollIntoView"),i("setInferenceAttributeFilter"),i("setInferenceAttributeNames"),i("setInferenceClassNameFilter"),i("setResourceCenterLauncherHidden"),i("setScrollPadding"),i("setServerEndpoint"),i("setShadowDomEnabled"),i("setPageTrackingDisabled"),i("setUrlFilter"),i("setLinkUrlDecorator"),i("openResourceCenter"),i("toggleResourceCenter"),c("endAll"),c("endAllFlows"),c("endChecklist"),c("group"),c("identify"),c("identifyAnonymous"),c("start"),c("startFlow"),c("startWalk"),c("track"),c("updateGroup"),c("updateUser"),c("debugger"),d("getResourceCenterState",null),d("isIdentified",!1)}}();

  userflow.init('USERFLOW_TOKEN')
  userflow.identify('{{user.id}}', {
    name: '{{user.name}}',
    email: '{{user.email}}',
    signed_up_at: new Date({{user.data.date_added.seconds}} * 1000).toISOString()
  })
</script>

Important

Make sure to replace USERFLOW_TOKEN with the Userflow.js Token you find in Userflow under Settings > Environments.

Every GoHighLevel user counts as an MAU. Code in Agency Settings > Custom Javascript runs for every user who signs in to your GoHighLevel agency or its sub-accounts, and the snippet identifies each of them. They all count toward your MAU total, even if they never see Userflow content. If you only want Userflow for some users, wrap userflow.identify() in a condition so it only runs for them. See How Userflow Tracks and Bills Monthly Active Users (MAUs).

How it works

The GoHighLevel snippet is the standard Userflow.js snippet with GoHighLevel template variables, such as {{user.id}}, filling in the current user's details.

Extra custom attributes

You can pass whatever custom attributes you want to Userflow in the userflow.identify() call.

GoHighLevel exposes many template variables besides the ID, name, email and signed up at fields we used above. Feel free to add your own, such as permissions.

One tip to see which fields are available is to add this piece of code to your Custom JavaScript field:

<script>
  console.log('^^^^^ user object ^^^^^', '{{log user}}')
</script>

Then, in a tab running GoHighLevel as one of your users, do this:

1. Open DevTools (F12 on your keyboard)

2. Reload the page

3. Look in the Console tab for the ^^^^^ user object ^^^^^ text. The line above that should be the complete user object. You can expand it to see which other fields it contains.