Web

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 initializing 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.

We provide two options to integrate Blitzllama SDK (Plain Javascript and NPM Script). Please choose based on your Frontend stack. The NPM Script approach has typescript support, so will be a preferred option for Frameworks/Libraries like AngularJS, Vue.js, React, etc.

Plain Javascript

 <!-- Start of Blitz client code snippet -->
    <script type="text/javascript">
      var exports = { __esModule: true };
      window._blitzQueue = window._blitzQueue || [];
      function blitz() {
        _blitzQueue.push(arguments);
      }
      (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");
    </script>
    <!-- End of Blitz client code snippet -->

NPM Script

npm i blitzllama-js

Please use npm i blitzllama-js@1.1.4 if you are using script injection (angular).

Then, in your application, initialize Blitzllama

import blitz from 'blitzllama-js';

//initialize blitzllama SDK. Place this as higher in your app as possible
blitz.init(api_key);

You can find your API_KEY by navigating to Connections tab > Web on Blitzllama's dashboard.

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.

Call the logout function or clear storage, if you are switching between projects in the same device.

 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", and "boolean".

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.

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.

 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.

 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.

blitz('setSurveyLanguage','language_code');  

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.

blitz('logout');  

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 set up more use case-specific ways to launch surveys.

blitz('triggerEvent', 'trigger_name',{event_key: "<event value>"});

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

1. Frontend Callback

Blitzllama provides a survey complete event that you might find useful to trigger certain actions in your application.

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
event: "event_name"
}, ...]

2. Custom CSS

For more fine-tuned control of how your survey looks, Blitzllama supports injecting CSS into surveys for text alignment and icons. You can edit it from the Settings tab on Blitzllama's dashboard.

//we support the following four configurations.
{
  star_feedback: {
    textalign: 'center'
  },
  nps_feedback: {
    textalign: 'center'
  },
  scale_feedback: {
    textalign: 'center'
  },
  close_icon_url: '',
  font_scale: 1 // 1 denotes font size of 16px 
}

3. 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.

Web Surveys Examples

Below are a few screenshots of how the surveys would show up on mobile and desktop web.

Last updated