You can install the SDK using a small snippet of code that you paste on your site to asynchronously load the SDK. Setting up Blitzllama involves,
  • Integrating the SDK: installing and initialising the SDK
  • Managing users: creating users and adding user attributes
  • Creating triggers: setting up code/no-code triggers on the dashboard

1. Integrating the SDK

Paste the below code snippet just before the </head> tag, replacing api_key with the API Key of your workspace.

Plain Javascript

<!-- Start of Blitz client code snippet -->
<script type="text/javascript">
var exports = { __esModule: true };
window._blitzQueue = window._blitzQueue || [];
function blitz() {
(function () {
var a = document.createElement('script');
a.type = 'text/javascript';
a.async = !0;
a.src = 'https://cdn.blitzllama.com/js/blitz.js';
var b = document.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a, b);
blitz('init', "api_key");
<!-- End of Blitz client code snippet -->

NPM Script

npm i blitzllama-js
yarn add blitzllama-js
Then, in your application, initialize Blitzllama
import blitz from 'blitzllama-js';
//initialize blitzllama SDK. Place this as higher in your app as possible
You can find your API_KEY in Connections > Web

2. Managing users

Create User

It is mandatory to create users using unique user ids. Not only does it provide a consistent experience across platforms, but also prevents users from being surveyed multiple times. user_id has to be a string.
Create a user with a unique user_id to prevent any inconsistencies.
HTML Script
blitz('createUser', 'user_id');

Update User Attributes (optional)

Attributes are additional data points about users, that are used for creating targeted user cohorts on the Blitzllama dashboard. Attributes are optional and not required to launch a micro-survey.
Allowed data_type values are "string", "number", "date", "boolean".
HTML Script
blitz('setUserAttribute','attribute_name','attribute_value', 'data_type');
blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');

Bulk Update

You can update multiple user attributes which are in key-value pairs (javascript object). It is suggested if user attributes have to be updated too frequently or all at once.
HTML Script
blitz('setUserProperties', {'property_name': 'value', age: 25, place: 'chennai'});
blitz.setUserProperties({'property_name': 'value', age: 25, place: 'chennai'});

Update User Email

You can provide Blitzllama with the user's email address. Email address is not mandatory for web micro-surveys.
HTML Script
blitz('setUserEmail', 'user_email');

Update User Name

You can also provide Blitzllama with the user's name. It can be used to make the questions more personalised. The User name is, again, not mandatory to launch surveys.
HTML Script
blitz('setUserName', 'user_name');

Set User Language

You can provide Blitzllama with the language you wish to survey your user. It is not mandatory to launch surveys.
HTML Script
Language code should be in ISO 639-1 codes.

Logout User

You can call this function, if you wish to stop tracking the user & their events.
Html Script

3. Creating triggers

Triggers, when initiated, display the micro-survey to the users. You can add triggers to all components - button press, screen open, or screen close - that are critical in a user's journey.
There are two methods to create a trigger on the dashboard: no-code and code triggers.

a. No-code triggers

  • Page URLs: Add the URL of the specific page. These are useful for launching micro surveys on page opens.
  • CSS Selector: Add the classname of the CSS component. Useful for triggering micro surveys after user actions such as button clicks.

b. Code triggers

You can provide Blitzllama with the code triggers to setup more use case specific ways to launch surveys.
HTML Script
blitz('triggerEvent', 'trigger_name');
You can also use backend events to launch in-app surveys. Check out https://documentation.blitzllama.com/connections/backend-trigger for more details.

Advanced Options

Frontend Callback

Blitzllama provides a survey complete event that you might find useful to trigger certain actions in your application.
HTML Script
blitz('subscribeEvent', 'survey_completed',
(data) => { console.log(data.detail); });
blitz.subscribeEvent('survey_completed',(data) => { console.log(data.detail); }));

Sample Callback data (data.detail)

question_order: 1,
question_text: "How well do you expect Blitz Demo to meet your needs?",
question_type: "single_select_feedback",
response: ['One'] //array value for select questions & string for other question types
}, ...]

Performance Impact

Before every release, we extensively test our SDK in multiple websites and browsers for crashes and performance issues. Blitzllama's SDK has negligible performance impact and below are the stats for the latest SDK version.
  • Speed The script is loaded asynchronously, so it does not impact website load times or scroll performance. We load our SDK in two separate files (i) controller.js (10KB) loads for all users, and (ii) microsurveys.js (250KB) downloads only in sessions which have micro surveys active that particular user.
  • Availability and Load time The Blitzllama client-side script is hosted on a global CDN. This allows for the fastest load times by hosting the script as close to the users as possible.
  • CPU usage A negligible increase of < 0.4% CPU usage only when the micro survey is on-screen.