Web

Blitzllama helps you collect user feedback seamlessly within your website. This guide shows you how to install and integrate the Blitzllama Web SDK, whether you’re a non-developer who wants a simple solution or a developer looking for advanced customization.

For Non-Developers: Quick & No-Code Setup

What You Need

Access to your website’s codebase, or the ability to add a script in the HTML <head> section.
A Blitzllama account and your unique API_KEY (found in the Blitzllama dashboard under Connections > Web).

Setup Steps

Copy & Paste the Script: Paste this snippet into your HTML file’s <head> section (before </head>):

 <!-- 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"); // Replace with your actual API_KEY
    </script>
    <!-- End of Blitz client code snippet -->

For WordPress integration, check out

Create No-Code Triggers in the Dashboard:
1. Login to Blitzllama Dashboard: Go to Events tab.
2. Click Add a Event: Choose from:
  1. Page URL Trigger: Show a survey when a user visits a page that matches certain criteria (e.g., URL contains checkout).
  2. CSS Selector Trigger: Show a survey when a user interacts with an element (e.g., a button) on your site.

For example, to show a survey on any page containing checkout:

Trigger Type: Page URL
Condition: URL contains checkout

That’s it! No coding or user management required. Your visitors will now see a survey based on the triggers you’ve set.

You’ve integrated Blitzllama without writing custom code or managing users. Surveys will appear based on the rules you’ve configured in the Blitzllama dashboard.

For Developers: Advanced Integration & Customization

If you need more control, such as identifying users, setting attributes, or programmatically triggering surveys - these steps are for you.:

Install via NPM

For modern frontend frameworks (React, Vue, Angular) or TypeScript support, install via NPM:

npm i blitzllama-js

yarn add 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.

User Management

Identifying Users

Identifying users can prevent duplicate surveys and enable personalization. This is not mandatory but highly recommended for more targeted feedback..

 blitz('createUser', 'user_id');

blitz.createUser('user_id');

Logout User

You can call this function, if you wish to stop tracking the user & their events. Call the logout function or clear storage, if you are switching between projects in the same device.

blitz('logout');

 blitz.logout();

Personalize and Localize Surveys

Setting User Attributes

Add context to surveys and target specific user segments. Allowed data_type values are "string", "number", "date", and "boolean".

blitz('setUserAttribute','attribute_name','attribute_value', 'data_type');

blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');

Update multiple attributes at once using a JavaScript object:

blitz('setUserProperties', {'property_name': 'value', age: 25, place: 'chennai'});

blitz.setUserProperties({'property_name': 'value', age: 25, place: 'chennai'});

Setting User Email and Name:

blitz('setUserEmail', 'user_email');  
blitz('setUserName', 'user_name');

blitz.setUserEmail('user_email');  
blitz.setUserName('user_name');

Set User Language

blitz('setSurveyLanguage','language_code');

 blitz.setSurveyLanguage('language_code');

Creating Triggers

Triggers display a survey to the user at critical moments in their journey—on button presses, page views, or any custom event. There are two main approaches:

No-Code Triggers (Already Covered Above) Set up triggers in the dashboard based on:
- Page URLs: Ideal for launching surveys on page load.
- CSS Selectors: Ideal for user actions like clicks on buttons or links.
Code Triggers For advanced scenarios, you can trigger surveys programmatically

blitz('triggerEvent', 'trigger_name');

 blitz.triggerEvent('trigger_name');

Trigger Properties

You can attach properties to a trigger event to provide additional context, such as screen names or user actions. These properties help refine your targeting.

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

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

This allows you to integrate triggers deeply into your business logic, ensuring surveys appear at precisely the right time.

Advanced Options

Frontend Callback

Blitzllama provides a completion event to let you run custom logic after the user finishes a survey:

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

Custom CSS

For fine-tuned control over the survey’s appearance, Blitzllama supports custom CSS settings. You can configure this from the Settings tab in the Blitzllama 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 
}

Performance Impact

Thorough Testing: Each release is tested across multiple websites and browsers to ensure no crashes or significant performance regressions.

Speed: The SDK script is loaded asynchronously, so it won’t slow down your page load. Blitzllama loads in two parts:
- controller.js (12KB) for all users,
- microsurveys.js (250KB) only for sessions where a survey is actually shown.
CDN Hosting: Blitzllama scripts are served from a global CDN, ensuring the fastest load times regardless of user location.
CPU usage Minimal increase (<0.4%) in CPU usage, only when the survey is displayed on-screen.

Web Surveys Examples

Below are a few screenshots showcasing how surveys appear on both mobile and desktop versions of your site. These examples can help you visualize the end-user experience.

FAQ & Troubleshooting

Survey not appearing?

Ensure you’ve initialized the SDK with the correct API_KEY.
Check that your no-code trigger conditions match the page URL or the correct CSS selector.
If using code triggers, confirm that createUser is called before triggerEvent if you’re leveraging user states.

Refining Triggers?

Adjust or add triggers in the Blitzllama dashboard without changing code.

Need advanced integrations?

Consider setting user attributes, hooking into completion callbacks, or using code triggers for precise control.

Next Steps

Non-Developers: Start with the no-code setup, just paste the script and add triggers in the dashboard.
Developers: For deeper integration, install via NPM, manage user attributes, set code triggers, and leverage callbacks for advanced behaviors.

Support: For additional help, reach out via support chat or email tech@blitzllama.com.

WordPress Integration

Install and Activate the Plugin
- In the WordPress Admin Panel, go to Plugins → Add New.
- Search for "Header Footer Code Manager", install, and activate it.
Add the Blitzllama Script
- Navigate to HFCM → Click Add New.
- Enter a name (e.g., Blitzllama Survey Script).
- Select Snippet Type: JavaScript.
- Choose Display Options:
  - Site Display: "Site Wide" (or specific pages).
  - Location: "Header".
- Click Save to apply the changes.
Configure Triggers in Blitzllama Dashboard
- Set up triggers such as:
  - Page URL Trigger: Display surveys on specific pages.
  - CSS Selector Trigger: Show surveys based on user interactions.

Once saved, Blitzllama will be active on your WordPress site, displaying surveys as per your configured triggers.

PreviousiOS NextReact Native

Last updated 3 months ago

Was this helpful?

Web

For Non-Developers: Quick & No-Code Setup

What You Need

Access to your website’s codebase, or the ability to add a script in the HTML <head> section.
A Blitzllama account and your unique API_KEY (found in the Blitzllama dashboard under Connections > Web).

Setup Steps

Copy & Paste the Script: Paste this snippet into your HTML file’s <head> section (before </head>):

 <!-- 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"); // Replace with your actual API_KEY
    </script>
    <!-- End of Blitz client code snippet -->

For WordPress integration, check out

Create No-Code Triggers in the Dashboard:
1. Login to Blitzllama Dashboard: Go to Events tab.
2. Click Add a Event: Choose from:
  1. Page URL Trigger: Show a survey when a user visits a page that matches certain criteria (e.g., URL contains checkout).
  2. CSS Selector Trigger: Show a survey when a user interacts with an element (e.g., a button) on your site.

For example, to show a survey on any page containing checkout:

Trigger Type: Page URL
Condition: URL contains checkout

That’s it! No coding or user management required. Your visitors will now see a survey based on the triggers you’ve set.

You’ve integrated Blitzllama without writing custom code or managing users. Surveys will appear based on the rules you’ve configured in the Blitzllama dashboard.

For Developers: Advanced Integration & Customization

If you need more control, such as identifying users, setting attributes, or programmatically triggering surveys - these steps are for you.:

Install via NPM

For modern frontend frameworks (React, Vue, Angular) or TypeScript support, install via NPM:

npm i blitzllama-js

yarn add 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.

User Management

Identifying Users

Identifying users can prevent duplicate surveys and enable personalization. This is not mandatory but highly recommended for more targeted feedback..

 blitz('createUser', 'user_id');

blitz.createUser('user_id');

Logout User

You can call this function, if you wish to stop tracking the user & their events. Call the logout function or clear storage, if you are switching between projects in the same device.

blitz('logout');

 blitz.logout();

Personalize and Localize Surveys

Setting User Attributes

Add context to surveys and target specific user segments. Allowed data_type values are "string", "number", "date", and "boolean".

blitz('setUserAttribute','attribute_name','attribute_value', 'data_type');

blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');

Update multiple attributes at once using a JavaScript object:

blitz('setUserProperties', {'property_name': 'value', age: 25, place: 'chennai'});

blitz.setUserProperties({'property_name': 'value', age: 25, place: 'chennai'});

Setting User Email and Name:

blitz('setUserEmail', 'user_email');  
blitz('setUserName', 'user_name');

blitz.setUserEmail('user_email');  
blitz.setUserName('user_name');

Set User Language

To display surveys in the user's preferred language, set the survey language using an (e.g., "en" for English, "es" for Spanish).

blitz('setSurveyLanguage','language_code');

 blitz.setSurveyLanguage('language_code');

Creating Triggers

Triggers display a survey to the user at critical moments in their journey—on button presses, page views, or any custom event. There are two main approaches:

No-Code Triggers (Already Covered Above) Set up triggers in the dashboard based on:
- Page URLs: Ideal for launching surveys on page load.
- CSS Selectors: Ideal for user actions like clicks on buttons or links.
Code Triggers For advanced scenarios, you can trigger surveys programmatically

blitz('triggerEvent', 'trigger_name');

 blitz.triggerEvent('trigger_name');

Trigger Properties

You can attach properties to a trigger event to provide additional context, such as screen names or user actions. These properties help refine your targeting.

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

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

This allows you to integrate triggers deeply into your business logic, ensuring surveys appear at precisely the right time.

You can also use backend events to launch in-app surveys. Check out for more details.

Advanced Options

Frontend Callback

Blitzllama provides a completion event to let you run custom logic after the user finishes a survey:

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

Custom CSS

For fine-tuned control over the survey’s appearance, Blitzllama supports custom CSS settings. You can configure this from the Settings tab in the Blitzllama 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 
}

Performance Impact

Thorough Testing: Each release is tested across multiple websites and browsers to ensure no crashes or significant performance regressions.

Speed: The SDK script is loaded asynchronously, so it won’t slow down your page load. Blitzllama loads in two parts:
- controller.js (12KB) for all users,
- microsurveys.js (250KB) only for sessions where a survey is actually shown.
CDN Hosting: Blitzllama scripts are served from a global CDN, ensuring the fastest load times regardless of user location.
CPU usage Minimal increase (<0.4%) in CPU usage, only when the survey is displayed on-screen.

Web Surveys Examples

Below are a few screenshots showcasing how surveys appear on both mobile and desktop versions of your site. These examples can help you visualize the end-user experience.

FAQ & Troubleshooting

Survey not appearing?

Ensure you’ve initialized the SDK with the correct API_KEY.
Check that your no-code trigger conditions match the page URL or the correct CSS selector.
If using code triggers, confirm that createUser is called before triggerEvent if you’re leveraging user states.

Refining Triggers?

Adjust or add triggers in the Blitzllama dashboard without changing code.

Need advanced integrations?

Consider setting user attributes, hooking into completion callbacks, or using code triggers for precise control.

Next Steps

Non-Developers: Start with the no-code setup, just paste the script and add triggers in the dashboard.
Developers: For deeper integration, install via NPM, manage user attributes, set code triggers, and leverage callbacks for advanced behaviors.

Support: For additional help, reach out via support chat or email tech@blitzllama.com.

WordPress Integration

To integrate Blitzllama into a WordPress site, you can use the plugins like for a quick and seamless setup. Below we share the steps to integrate using HFCM but the same steps work for other plugins too.

Install and Activate the Plugin
- In the WordPress Admin Panel, go to Plugins → Add New.
- Search for "Header Footer Code Manager", install, and activate it.
Add the Blitzllama Script
- Navigate to HFCM → Click Add New.
- Enter a name (e.g., Blitzllama Survey Script).
- Select Snippet Type: JavaScript.
- Choose Display Options:
  - Site Display: "Site Wide" (or specific pages).
  - Location: "Header".
- Paste the Blitzllama script ().
- Click Save to apply the changes.
Configure Triggers in Blitzllama Dashboard
- In the Blitzllama Dashboard, go to the Events tab. ()
- Set up triggers such as:
  - Page URL Trigger: Display surveys on specific pages.
  - CSS Selector Trigger: Show surveys based on user interactions.

Once saved, Blitzllama will be active on your WordPress site, displaying surveys as per your configured triggers.

PreviousiOS NextReact Native

Last updated 3 months ago

Was this helpful?