How to implement the Userlane snippet

About the Snippet

The Userlane Snippet is a piece of JavaScript code that your engineers need to add to your application's source code. Once added, Userlane will appear for your users.

By implementing the snippet, software providers can onboard users and improve user retention. To use the snippet, you need to be able to customize JavaScript in your application. 

Userlane can be added directly through the Userlane snippet in your application's code as long as the application has only one domain. 

In the initial stages, you can still use the browser extension to create and test your first Guides.


Benefits of implementing the Snippet

Userlane will be shown in the application independent of the browser and is available to all end-users. 


Requirements

  • access to Userlane Portal
  • access to source code of application


Setup Snippet for your Application

1. Admin: Share the snippet with the developers

To locate the Userlane snippet, select Settings and then select Setup. Copy the snippet and send it to your developers.

💡 The snippet makes Userlane visible for your end users. 

If you do not want content to be visible yet, set all chapters to private or switch Userlane off under General Settings.

2. Developer: Implement the snippet

The load function loads Userlane in your application. The initialize command executes Userlane and is needed for the Userlane Assistant to appear. The Snippet should be implemented into the application's front-end, before the closing </body> tag.

// load Userlane
(function(i,s,o,g,r,a,m){i['UserlaneCommandObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://cdn.userlane.com/userlane.js','Userlane');

// identify your user (see Chapter 3. below)

Userlane('identify','user_ID');

  
// initialize Command

Userlane('init', 'your_property_ID');

Make sure that the initialize command contains your account’s property ID that can be found in the Userlane Portal snippet. The initialize command executes Userlane. Therefore, all the commands that you want to additionally use should be called before ‘init’.

Note: Should you use Userlane on MS Dynamics, please read more detailed instructions here.

ℹ️  You need to load and initialize Userlane to make it visible in your application. Any other commands are optional.


3. Developer: Add additional user information in your code snippet

We recommend that you add the user ID in your snippet with the identify command.

This will help you with better user segmentation, more insights in both HEART and Content Analytics and show your users the status quo about their Guide accomplishments. 

// Pass the user ID without any Custom User Attributes

Userlane('identify','user_ID');

ℹ️  We recommend that you use the user ID in the identify command as well. Keep in mind that if this command is not used, Userlane will generate a random user ID and will save it in a cookie.

Additionally, you can add Custom User Attributes within this command. A custom attribute could be a user role or a subscription to a specific feature of your application.  This allows applying user-based segmentation in the Userlane Portal later. This article provides more info on how a snippet with passed custom data attributes looks. Here you’ll find further information on user-based segmentation

// Pass a Custom User Attribute (data types: number, string, datetime, array, boolean)

Userlane('identify','user_ID',{
  Attribute_key:'Attribute_value'
});

ℹ️  If you include any extra commands in the snippet, remember to place them before the initialize command. The initialize command verifies the user information provided. So, whenever the page is refreshed, the user information is updated.

Good to know

  • Every snippet is connected to a specific Userlane Account. 
  • We do not recommend using Snippet if you want to create Guides over multiple domains as Userlane can not pick up the context. 
User Icon

Thank you! Your comment has been submitted for approval.