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