Web - JavaScript

📷

UserLeap is now Sprig

We might have changed our name, but you don't have to change a thing!
All of your surveys, integrations, and code will continue to function properly with no action required.

Install

Add the following code snippet to your webpage to complete a Sprig JavaScript SDK installation. Add the snippet to every page on your website where you want Sprig to track your users. You can paste the snippet anywhere on the page, but preferably at the bottom of the document, before the </body> tag.

📘

Info

Depending on your current Environment, replace ENVIRONMENT_ID with the Production ID or Development ID by clicking Get Code on Connect > JavaScript.

<script>
   (function(l,e,a,p) {
     if (window.Sprig) return;
     window.Sprig = function(){S._queue.push(arguments)}
     var S = window.Sprig;S.appId = a;S._queue = [];window.UserLeap=S;
     a=l.createElement('script');
     a.async=1;a.src=e+'?id='+S.appId;
     p=l.getElementsByTagName('script')[0];
     p.parentNode.insertBefore(a, p);
   })(document, 'https://cdn.sprig.com/shim.js', 'ENVIRONMENT_ID');
 </script>

Sprig provides two Environments (with corresponding ENVIRONMENT_IDs). As the Development environment is not constrained by the resurvey waiting period policy, it is recommended to test your surveys; then, you can use the Production environment to deploy your surveys to receive user feedback. Make sure to use the correct ENVIRONMENT_ID corresponding to the environment (Development or Production) you have selected.

📘

Info

The Development environment behaves differently than Production. It does not adhere to the resurvey waiting period policy. This allows you to verify installation more quickly as every user event always triggers a survey.

Verify Installation

There are two primary ways to verify the installation. Either by viewing People in the Sprig app or by open the browser's JavaScript console for the page in question and running a command.

People page

Navigate to People to verify that your site sends events to Sprig. When a user visits your site, they will appear in this view. Their survey eligibility or Survey Status will also be shown. If you have set the EMAIL_ADDRESS attribute, it will also be displayed.

Browser Console

In Sprig, only users who match a running survey's specific targeting will ever see a survey due to the JavaScript. This can make it challenging to test out how to survey will look for users on your site.

In addition to the Live Preview rendered during the Design and Launch of a given survey in the Sprig Dashboard, you can also manually view and test a Survey from within your site by running the following command in the browser JavaScript console. It does require that you have launched at least one survey in your environment.

Open the JavaScript console in your browser. Run the following command:

Sprig.displaySurvey(SURVEY_ID);

If the Sprig snippet is already installed on that page, your browser will display the survey.

To find the SURVEY_ID, click on Microsurveys and click on a survey. If you look at the URL in your browser, The SURVEY_ID is the integer at the end of the PATH.

https://app.sprig.com/surveys/SURVEY_ID

Identify Users

Sprig allows you to differentiate users by setting a USER_ID. While setting USER_IDs is optional, it helps provide a consistent experience across platforms and prevents users from seeing the same survey multiple times. It also helps you to optimize the number of events you send to Sprig. The user identifier should be unique and associated with a user in some way.

Set the USER_ID after the installation snippet if they are already logged in or after the user logs in to your website:

<script>
    Sprig('setUserId', 'USER_ID');
</script>

This user identifier is stored via local storage, and this function can be called multiple times safely. We recommend you set the user identifier every time you initialize Sprig and when your user logs in.

You can also provide Sprig with the user's email address. It is not required for Web and Mobile surveys but is required to enable email-based surveys.

<script>
    Sprig('setEmail', 'EMAIL_ADDRESS');
</script>

Logout

When a user logs out of your webpage, make sure to log out of Sprig. This will prevent new activity from being associated with the incorrect user.

<script>
    Sprig('logoutUser');
</script>

Sample Snippet

Following is a sample snippet of what an installation looks like on pages that track registered users:

<script>
   (function(l,e,a,p) {
     window.Sprig = function(){S._queue.push(arguments)}
     var S = window.Sprig;S.appId = a;S._queue = [];window.UserLeap=S;
     a=l.createElement('script');
     a.async=1;a.src=e+'?id='+S.appId;
     p=l.getElementsByTagName('script')[0];
     p.parentNode.insertBefore(a, p);
   })(document, 'https://cdn.sprig.com/shim.js', 'ENVIRONMENT_ID');
  
   // Increases tracking accuracy across devices
   Sprig('setUserId', 'USER_ID');
  
   // Allows the user to receive email surveys
   Sprig('setEmail', 'EMAIL_ADDRESS');
 </script>

Set Visitor Attributes

Sprig lets you build up user profiles to provide more context to understand the user's feedback better. Sprig tracks a default set of attributes and allows you to specify custom attributes and values specific to your business.

You can use visitor attributes for survey targeting to help refine the cohort of users you wish to survey. They can also be used as filters to drill into the survey response data in the Sprig Dashboard.

📘

Info

Visitor Attributes are limited to 100 distinct values for a given key

Default Attributes

Sprig's JavaScript snippet automatically tracks and attaches the following attributes:

• Browser and version
• Device
• Session count
• Page URL
• Screen size
• Browser Language
• Operating System and Version

Custom Attributes

Optionally, you can send in custom attributes about the visitor. This information is visible on the People section of the Sprig Dashboard when viewing a Visitor.

Values

• ATTRIBUTE {String} required - the attribute name to set. Attributes beginning with ! are reserved
• VALUE {Object} required - the value to set for the specified attribute name (typically a string or number, but anything convertible to JSON will work)

<script>
    //for a single attribute
    Sprig('setAttribute', ATTRIBUTE, VALUE);
    
    //for multiple attributes
    //saves multiple rounds trips and reduces data usage
    Sprig('setAttributes',{
        ATTRIBUTE1: VALUE1,
        ATTRIBUTE2: VALUE2
    });

    //if attributes no longer apply to the user
    //you can delete multiple at a time
    Sprig('removeAttributes', [ATTRIBUTE1, ATTRIBUTE2]);
</script>

Some common attributes to set are:

• Location
• Referral URL
• A/B test group

Track Events to Display Surveys

Sprig provides two types of Events for triggering and filtering your microsurveys using our SDK. They are described as No Code and Code event types.

Code Events

To add or track a Code event for triggering or filtering, you will need the following snippet. If you or your colleague added a Code event via the UI, be sure that the event name used in the UI is identical to the name used in this snippet.

<script >
    Sprig('track', 'EVENT_NAME');
</script>

When Sprig receives this event, the survey is displayed if the user is eligible to receive that survey. You can see the eligibility of a given user on the People page.

📘

Info

Sprig('track', 'EVENT_NAME') makes a network call, so be sure to give it enough time to complete. Also, note that if you or your colleague added a Code event to the UI via the Code option there, the name used in the code would need to match the name in the UI exactly.

Verifying Surveys

We have tests in place to make sure we show surveys at the right time. To test that your surveys show with the right attributes and events set, be sure to set up the SDK with your development ENVIRONMENT_ID. This will bypass throttling and the re-survey window.

No Code Events

there are three types of No Code events: Page URL, Inner Text, and CSS Selector. No code events can only be used to trigger Web Microsurveys. Once the Sprig JavaScript snippet is installed, No Code events permit survey designers to create triggers outside the webpage, potentially not requiring engineering support. Sprig also supports Regular Expressions, which can be useful to include or exclude groups of pages from the triggering.

Page URLs

Page URLs allow you to define a single page or a set of pages to trigger a survey.

Inner Text

The No-Code options allow you to track events when a user clicks one or more HTML elements, with some specific inner text, or rendered text, one or more pages. The snippet needs to be installed and configured. Once configured, they are viewed on the Events page.

CSS

The No-Code option allows you to track events when a user clicks a specific CSS class.

📘

Info

Surveys only support one trigger at a time. So a single survey may only have one event trigger or one Page URL trigger.

Customize Appearance

You can set a hard limit on the height of your survey with the following code in the installation snippet.

Sprig.maxHeight = '50%';

This will set the maxHeight property of the iframe.

The survey will show at the bottom right of the window by default. You can customize this behavior starting v1.9.0 to show the survey on the bottom left of the window.

Sprig.framePosition = 'bottomLeft';

Setting this parameter will make the survey appear on the bottom left.

You can configure the survey to show in either of the 4 corners of the window. Supported parameters are topLeft topRight bottomLeft and center. To revert to default, delete framePosition property from Sprig.

delete Sprig.framePosition;

For center position, there's a default dark overlay covering the parent element. To configure a light overlay, you can configure this before presenting the survey:

Sprig.overlayStyle = 'light';

Survey State Notifications

In Sprig SDK version 1.9.0 and above, Sprig introduces several new SDK events and exposes a new way to listen to the updates. Here is a sample code block for listening to SDK events in real-time:

// an example of a simple listener
const listener = function (e) {
    // does work with data
    console.log(e);
};
// to subscribe to Sprig survey presented event
Sprig('addListener', Sprig.UPDATES.SURVEY_PRESENTED, listener);
// to remove a survey presented event listener
Sprig('removeListener', Sprig.UPDATES.SURVEY_PRESENTED, listener);

The following supported events are available on Sprig.UPDATES:

Performance

In the modern web, performance is a critical part of any successful website. At Sprig, we ensure that you can get deep insights about your users without sacrificing your site's performance.

Speed impact on your website

The script is loaded asynchronously, so it does not impact website load times or scroll performance.

File Sizes:

The Sprig JS SDK is broken up into 2 JS files: a controller and a view.

controller.js: 188KB

The controller is responsible for keeping track of your users and your interface to track events and set attributes and identities. A vast majority of sessions are not shown surveys, so we separated the view into a separate file, reducing data usage for your users.

view.js: 213KB (users only download this when a survey is presented to them)

The view contains the code to show the survey and send the responses to Sprig.

Availability and Load time:

The Sprig client-side script is hosted on a leading global CDN powered by AWS CloudFront. This allows for the fastest load times by hosting the script as close to the users as possible.

Cross-browser testing:

The Sprig client-side script is tested against all modern browsers, including:

Chrome (latest versions*)
Firefox (latest versions *)
Safari 8+
Internet Explorer 11
Microsoft Edge 40+

* Chrome and Firefox are on 6-week release cycles, so best-effort support is given to older releases

CPU Usage:

Sprig adds minimal CPU overhead (less than 0.1%), leaving application responsiveness virtually untouched. Our cross-browser testing suite ensures that Sprig remains performant across all browsers.