# 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 `` 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 `` section (before ``):
```javascript
```
{% hint style="info" %}
For WordPress integration, check out
{% endhint %}
2. **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.
{% hint style="info" %}
For example, to show a survey on any page containing `checkout:`
1. Trigger Type: *Page URL*
2. Condition: *URL contains* `checkout`
{% endhint %}
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:
{% tabs %}
{% tab title="NPM" %}
```javascript
npm i blitzllama-js
```
{% endtab %}
{% tab title="Yarn" %}
```javascript
yarn add blitzllama-js
```
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
Please use **npm i blitzllama-js\@1.1.4** if you are using script injection (Angular).
{% endhint %}
Then, in your application, initialize Blitzllama:
```javascript
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..
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('createUser', 'user_id');
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.createUser('user_id');
```
{% endtab %}
{% endtabs %}
#### 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.
{% tabs %}
{% tab title="Html Script" %}
```javascript
blitz('logout');
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.logout();
```
{% endtab %}
{% endtabs %}
### 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".
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('setUserAttribute','attribute_name','attribute_value', 'data_type');
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');
```
{% endtab %}
{% endtabs %}
Update multiple attributes at once using a JavaScript object:
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('setUserProperties', {'property_name': 'value', age: 25, place: 'chennai'});
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.setUserProperties({'property_name': 'value', age: 25, place: 'chennai'});
```
{% endtab %}
{% endtabs %}
#### Setting User Email and Name:
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('setUserEmail', 'user_email');
blitz('setUserName', 'user_name');
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.setUserEmail('user_email');
blitz.setUserName('user_name');
```
{% endtab %}
{% endtabs %}
#### **Set User Language**
To display surveys in the user's preferred language, set the survey language using an [ISO 639-1 codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) (e.g., `"en"` for English, `"es"` for Spanish).
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('setSurveyLanguage','language_code');
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.setSurveyLanguage('language_code');
```
{% endtab %}
{% endtabs %}
### 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
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('triggerEvent', 'trigger_name');
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.triggerEvent('trigger_name');
```
{% endtab %}
{% endtabs %}
#### 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.
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('triggerEvent', 'trigger_name',{event_key: ""});
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.triggerEvent('trigger_name', {event_key: ""});
```
{% endtab %}
{% endtabs %}
This allows you to integrate triggers deeply into your business logic, ensuring surveys appear at precisely the right time.
{% hint style="success" %}
You can also use **backend events** to launch in-app surveys. Check out for more details.
{% endhint %}
## Advanced Options
### Frontend Callback
Blitzllama provides a completion event to let you run custom logic after the user finishes a survey:
{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('subscribeEvent', 'survey_completed', (data) => {
console.log(data.detail);
});
```
{% endtab %}
{% tab title="NPM" %}
```javascript
blitz.subscribeEvent('survey_completed',(data) => { console.log(data.detail); }));
```
{% endtab %}
{% endtabs %}
#### Sample Callback data (data.detail)
```json
[{
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:
```javascript
//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 [Header Footer Code Manager (HFCM)](https://wordpress.com/plugins/header-footer-code-manager/blitzllamatest.wordpress.com) for a quick and seamless setup. Below we share the steps to integrate using HFCM but the same steps work for other plugins too.
1. **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.
2. **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** ([provided at the start of this page](#setup-steps)[ in step 1](#setup-steps)).
* Click **Save** to apply the changes.
3. **Configure Triggers in Blitzllama Dashboard**
* In the **Blitzllama Dashboard**, go to the **Events** tab. ([more at the start of this page in step 2](#setup-steps))
* **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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://documentation.blitzllama.com/sdk/web.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.