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>
):
Create No-Code Triggers in the Dashboard:
Login to Blitzllama Dashboard: Go to Events tab.
Click Add a Event: Choose from:
Page URL Trigger: Show a survey when a user visits a page that matches certain criteria (e.g., URL contains
checkout
).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:
Please use npm i blitzllama-js@1.1.4 if you are using script injection (Angular).
Then, in your application, initialize Blitzllama:
User Management
Identifying Users
Identifying users can prevent duplicate surveys and enable personalization. This is not mandatory but highly recommended for more targeted feedback..
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.
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".
Update multiple attributes at once using a JavaScript object:
Setting User Email and 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).
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
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.
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:
Sample Callback data (data.detail)
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:
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 beforetriggerEvent
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
.
Last updated