JavaScript SDK

Updated a month ago ​by Matt Bilotti

The Javascript SDK is an easy way to install Drift, while also identifying users and tracking events if you’re installing it in your app. 

It’s free to use Drift – sign up here.

Installing

If you’re still creating your account, copy and paste the code snippet inside your webpage’s, or web app’s, <head> block. If you already have account, get the Drift code at the bottom left of this page.

To make life easy for you, this JS snippet will never change… after installing this you’ll never have to touch it again no matter how many new features we release.

If you want Drift for site visitors

If you only want Drift to display on your website for site visitors, all you have to do is copy and paste the Drift code (from the links above) on your site or integrate using another method like Segment or HubSpot.

You can stop here! You’re all set. Unless you….

Want Drift in your app/product? Follow the steps.

After copy and pasting the Drift code in, you’ll need to update the identify and track methods in order to pass user information to Drift.

Everything below gets a bit technical, so grab an engineer or dive in if you’re technical.

You may be a pro at this API stuff, so here’s a short example of how you might use our identify and track calls (both explained below in more detail) in case this is all you need to know and can take it from here.

HTML Example

<!-- html webpage -->
<script>
drift.identify(userId,{email:'abcd@email.com'});
</script>
<div onClick="drift.track('Clicked Div', { name: 'awesomeDiv' })">
Click
</div>

Methods

identify

This method is used to identify users based on their unique user id in your company’s user table.

The attributes object must be a flat object
drift.identify('USER_ID_2',{email:'example@example.com'}); 
drift.identify('USER_ID_2',{email:'example@example.com',phoneNumber:'5-555-555-5555'});

Nested objects or arrays will not work, such as the following:

drift.identify('USER_ID_1',{emails:['example@example.com','example@gmail.com']});

You can also use the identify call to update info about the user via the attributes parameter.

drift.identify([userId],[attributes]);
userId
string/number
The unique user ID in your company’s user table for the user. 
attributes
Object 
A dictionary of attributes you know about this user, such as their emailnamecompany.  
Note: the attributes object must be a flat object. Nested objects or arrays will not work.
Email must be passed as an attribute to properly initialize the Drift widget. See Special Attributes below for a list of reserved attributes.

Special Attributes

Special Attributes are attributes that we have reserved because they have a specific meaning for users, and we handle them is special ways. For example, we always expect the name attribute to contain the user’s full name, and we will populate or update the user’s name in our system to reflect that.

You should only use these attributes for their intended meaning.

The following are special attributes:

email
string
This is the email of the user, and is used to pull in other information on a user. You must pass this attribute to properly initialize the Drift widget 
name
string
This the user’s name. We use it to fill in the name of the user in our systems
companyId
string, number
This is the id of a company in your system. This should match up with a company id that you have already called with the identify call. We use this to map the user to the company. 
tags
string, array[string]
This is a list of tag names to attach to this identity. You can either supply a comma-separated list of tags or a JavaScript array of strings.
startDate
number, string
This is the date the user started being a customer. This needs to be a unix timestamp in milliseconds.
revenue
number
This is the revenue that this user is generating. It can be over any time period as long as you stay consistent. Currently, we assume that this number is in USD. 


If you want to clear out saved user info (such as on logout) all you need to do is call reset(). This will clear out the users id and generate a new anonymous id. Then you will need to call identify again once you know who the user is.

drift.reset();

track

This method is what you call to send an event to Drift. It takes an event name and a list of attributes.

Note: As explained in the identify call, the attributes object must be a flat object; nested objects or arrays won’t work

drift.track('Page Loaded'); 
drift.track('Exported',{exportedObject:'2015_users'}); 
drift.track('Shared Content',{contentId:1,contentName:'Proposal',contentType:'document',method:'Email'});
drift.track([event],[attributes]); 
event
string
This is the name of this type of event. You should try to reuse the same events with different properties to describe similar actions such as Share or Link Clicked
attributes
Object, optional
A dictionary of attributes about this type of event, such as shareType or linkUrl
Note: the attributes object must be a flat object. Nested objects or arrays will not work

page

This method should be called whenever a user moves on to a new page. It takes the name of the page. The URL of the page will be tracked automatically.

drift.page(); 
drift.page("HomePage");
drift.page([name]);
name
string, optional
This is the human-readable name of the page. 

debug

This method is what you call to enable or disable debug mode for the Drift SDK. Debug mode means that more logging will be output to console and that all events sent won’t contaminate non-debug data.debug takes an optional boolean that enables or disables debug mode which if omitted will also enable debug mode.

drift.debug(); 
drift.debug(true); 
drift.debug(false);
drift.debug([enabled]);
enabled
boolean, optional
An optional boolean that enables or disables debug mode. If omitted then calling this method will enable debug mode. 

Was this article helpful?


Can’t find what you’re looking for?

Talk To Us