# 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>`):

```javascript
 <!-- 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 -->
```

{% hint style="info" %}
For WordPress integration, check out&#x20;
{% 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" %}
&#x20;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:&#x20;

{% 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.&#x20;

{% tabs %}
{% tab title="HTML Script" %}
```javascript
blitz('triggerEvent', 'trigger_name',{event_key: "<event value>"});
```
{% endtab %}

{% tab title="NPM" %}
```javascript
 blitz.triggerEvent('trigger_name', {event_key: "<event value>"});  
```
{% 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 [https://documentation.blitzllama.com/connections/backend-trigger](https://documentation.blitzllama.com/connections/backend-trigger) 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,&#x20;
  * `microsurveys.js` (250KB) only for sessions where a survey is actually shown.&#x20;
* **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.

<div><figure><img src="https://713176431-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MagfF5JPg-8vm99iTd9%2Fuploads%2FVuXmK3emmh38ebEq8GdO%2FScreenshot%202023-12-23%20at%2011.22.58%E2%80%AFAM.png?alt=media&#x26;token=a79799fc-bb63-4ff5-84d3-3f72cbbb660a" alt=""><figcaption></figcaption></figure> <figure><img src="https://713176431-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MagfF5JPg-8vm99iTd9%2Fuploads%2Fhr6feffPxQppLccNy30W%2FScreenshot%202023-12-23%20at%2011.22.10%E2%80%AFAM.png?alt=media&#x26;token=0d199a26-4145-430b-b2fd-c302b8ad4fa1" alt=""><figcaption></figcaption></figure></div>



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