JavaScript SDK

npm install --save @sprig-technologies/sprig-browser

yarn add @sprig-technologies/sprig-browser --latest

npm update @sprig-technologies/sprig-browser

yarn update @sprig-technologies/sprig-browser

<meta
     http-equiv="Content-Security-Policy"
     content="script-src https://cdn.sprig.com;
	connect-src blob: data: https://api.sprig.com https://cdn.sprig.com;
     font-src data:;
     worker-src blob:;"
   />

<meta
     http-equiv="Content-Security-Policy"
     content="img-src data: https://*.mux.com;
        connect-src blob: data: https://api.sprig.com https://*.mux.com https://storage.googleapis.com https://cdn.sprig.com https://cdn.userleap.com;
        font-src data:;
        media-src blob: https://*.mux.com;
        worker-src blob:;"
   />

<script type="text/javascript">
    Sprig('setUserId', 'USER_ID');
</script>

// import the client returned from your Sprig.configure call
import { Sprig } from 'utils/sprig'

Sprig.setUserId('USER_ID');

<script type="text/javascript">
    Sprig('logoutUser');
</script>

// import the client returned from your Sprig.configure call
import { Sprig } from 'utils/sprig'

Sprig.logoutUser();

<script type="text/javascript">
  // Note: all of these functions make a network call, so be sure to give them enough time to complete
  
  // RECOMMENDED: Track event with payload. Only eventName is required.
  Sprig('identifyAndTrack', {
    eventName: 'EVENT_NAME',
    userId: 'some_user_id',
    properties: { property1: 'value'}
  });
    
  // ALTERNATIVES
  
  // Track event with string
  Sprig('track', 'EVENT_NAME');
  
  // Optionally include properties
  Sprig('track', 'EVENT_NAME', { property1: 'value' });
})
</script>

// import the client returned from your Sprig.configure call
import { Sprig } from 'utils/sprig'

// Note: all of these functions make a network call, so be sure to give them enough time to complete

// RECOMMENDED: Track event with event payload. Only eventName is required.
Sprig.identifyAndTrack({
	eventName: 'EVENT_NAME',
	userId: 'some_user_id',
	properties: { property1: 'value'}
});

// ALTERNATIVES

// Track event with string
Sprig.track('EVENT_NAME');

// Optionally include properties
Sprig.track('EVENT_NAME', { property1: 'value' };

<script type="text/javascript">
    // for a single attribute
    Sprig('setAttribute', ATTRIBUTE, VALUE);
    
    // for multiple attributes
    // saves multiple round-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>

// import the client returned from your Sprig.configure call
import { Sprig } from 'utils/sprig'

Sprig.setAttribute('ATTRIBUTE', 'VALUE');

// for multiple attributes
// saves multiple round-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 type="text/javascript">
    Sprig('setEmail', 'EMAIL_ADDRESS');
</script>

import { Sprig } from 'utils/sprig'

Sprig.setEmail('EMAIL_ADDRESS');

<script type="text/javascript">
    // at end of installation snippet 
    Sprig.maxHeight = '50%';  // sets maxHeight property of the iframe to 50% of page height.

    // at end of installation snippet, and when the window is resized
    Sprig('setWindowDimensions', [[WIDTH]], [[HEIGHT]])  // [[WIDTH]] and [[HEIGHT]] are pixel numbers
</script>

import Sprig from '@sprig-technologies/sprig-browser';
// or with require() syntax:
// const sprig = require('@sprig-technologies/sprig-browser');

export const Sprig = sprig.configure({
  environmentId: '[[ENVIRONMENT_ID]]',
  maxHeight: '50%',  // sets maxHeight property of the iframe to 50% of page height.
});

// during initialization, and when the window is resized
Sprig.setWindowDimensions([[WIDTH]], [[HEIGHT]])  // [[WIDTH]] and [[HEIGHT]] are pixel numbers

<script type="text/javascript">
    Sprig.styleNonce = 'YOUR_NONCE'; // Optional if your CSP requires nonces
    Sprig('applyStyles','.ul-question {color: red}'); // Example: changes question text color to red
</script>

import Sprig from '@sprig-technologies/sprig-browser';

Sprig.styleNonce = 'YOUR_NONCE'; // Optional if your CSP requires nonces
Sprig.applyStyles('.ul-question {color: red}'); // Example: changes question text color to red

<script type="text/javascript">
    // an example of a simple listener
    const listener = function (e) {
        // does work with data
        console.log(e);
    };

    // to subscribe to Sprig study presented event
    Sprig('addListener', Sprig.UPDATES.SURVEY_PRESENTED, listener);
    // to remove a study presented event listener
    Sprig('removeListener', Sprig.UPDATES.SURVEY_PRESENTED, listener);
</script>

// import the client returned from your Sprig.configure call
import { Sprig } from 'utils/sprig'
//import SprigEvent from the Sprig NPM package
import { SprigEvent } from '@sprig-technologies/sprig-browser';

// an example of a simple listener
const listener = function (e) {
    // does work with data
    console.log(e);
};

// to subscribe to Sprig study presented event
Sprig.addListener(SprigEvent.SurveyPresented, listener);
// to remove a study presented event listener
Sprig.removeListener(SprigEvent.SurveyPresented, listener);