Comment on page
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
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.
<!-- 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
Yarn
npm i blitzllama-js
yarn add blitzllama-js
Please use npm i [email protected] 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);
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.
HTML Script
NPM
blitz('createUser', 'user_id');
blitz.createUser('user_id');
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
NPM
blitz('setUserAttribute','attribute_name','attribute_value', 'data_type');
blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');
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
NPM
blitz('setUserProperties', {'property_name': 'value', age: 25, place: 'chennai'});
blitz.setUserProperties({'property_name': 'value', age: 25, place: 'chennai'});
You can provide Blitzllama with the user's email address. Email address is not mandatory for web micro-surveys.
HTML Script
NPM
blitz('setUserEmail', 'user_email');
blitz.setUserEmail('user_email');
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
NPM
blitz('setUserName', 'user_name');
blitz.setUserName('user_name');
You can provide Blitzllama with the language you wish to survey your user. It is not mandatory to launch surveys.
HTML Script
NPM
blitz('setSurveyLanguage','language_code');
blitz.setSurveyLanguage('language_code');
You can call this function, if you wish to stop tracking the user & their events.
Html Script
NPM
blitz('logout');
blitz.logout();
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.
- 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.
You can provide Blitzllama with the code triggers to setup more use case specific ways to launch surveys.
HTML Script
NPM
blitz('triggerEvent', 'trigger_name');
blitz.triggerEvent('trigger_name', {event_property: "event started", cost: 10});
You can also use backend events to launch in-app surveys. Check out https://documentation.blitzllama.com/connections/backend-trigger for more details.
Blitzllama provides a survey complete event that you might find useful to trigger certain actions in your application.
HTML Script
NPM
blitz('subscribeEvent', 'survey_completed',
(data) => { console.log(data.detail); });
blitz.subscribeEvent('survey_completed',(data) => { console.log(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"
}, ...]
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 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
}
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.
Last modified 3mo ago