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 simple steps:

1. Sign into 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 into 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"),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 .

How it works

The snippet above is our standard Userflow.js snippet, but using template variables provided by GoHighLevel, such as {{user.id}} to dynamically get the current user’s ID.

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.