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

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

  1. 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:

  1. Trigger Type: Page URL

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

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');

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');

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');

Update multiple attributes at once using a JavaScript object:

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

Setting User Email and 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 ISO 639-1 codes (e.g., "en" for English, "es" for Spanish).

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:

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

  2. Code Triggers For advanced scenarios, you can trigger surveys programmatically

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>"});

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 https://documentation.blitzllama.com/connections/backend-trigger 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); 
});

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.

PreviousiOSNextReact Native

Last updated