React Native

Overview

The Blitzllama React Native SDK allows you to embed short in-app surveys directly into your React Native application (on both Android and iOS). By integrating the SDK, you can collect real-time user feedback at key points in the user’s journey.

Key Features:

• Quickly display micro-surveys using triggers you define.

• Ensure unique user identification to avoid repeated surveys.

• Add optional user attributes and event properties for better targeting.

• Localize surveys by specifying language codes.

Requirements:

• Android API level 21 (Android 5.0) or higher for Android.

• iOS 11 and above for iOS.

• Access to the Blitzllama dashboard to retrieve your API Key and manage triggers.

Getting Started

Before You Begin

Obtain Your API Key:

• Log in to the Blitzllama dashboard.

• Navigate to the Connections tab.

• Select React Native and find your api_key.

Confirm Minimum Requirements: For Android, ensure that your minimum SDK version is at least 21. For iOS and React Native setup, confirm that your environment meets standard React Native requirements.

Quick Start (About 15 Minutes)

1. Install the SDK

Install the Blitzllama React Native package and necessary dependencies. Replace api_key with your workspace’s API_KEY.

NPM

//dependency package needed
npm install @react-native-async-storage/async-storage @react-native-community/checkbox react-native-webview

npm install react-native-blitzllama@1.5.0

Yarn

yarn add @react-native-async-storage/async-storage @react-native-community/checkbox react-native-webview

yarn add react-native-blitzllama@1.5.0

2. Initialize the SDK

Initialize the Blitzllama SDK as early as possible in your app—ideally in your main application file.

import { blitz } from 'react-native-blitzllama';

//initialize blitzllama SDK. Place this as higher in your app as possible
blitz.init(api_key);

You can find your api_key on the Blitzllama dashboard under Connections > React Native.

3. Create a User

Before launching any survey, ensure that a unique user is created. The user_id should be unique and a string.

NPM

blitz.createUser('user_id'); 

Why Create a User? This ensures consistent survey experiences and avoids repeated surveying of the same individual. If switching projects or user contexts, call blitz.logout() to clear stored data.

4. Trigger a Survey

Use triggers to display surveys at critical moments in your application. Set showSurvey to true when you want to present the survey and provide a trigger_name that matches one configured in the dashboard.

NPM

const [show, setShow] = React.useState(false);

<Blitzllama 
 showSurvey={show}
 trigger="trigger_name" 
 closeSurvey={() => setShow(false)}
 />

Once the user completes or dismisses the survey, the closeSurvey callback is executed to hide it.

You’re now ready to collect targeted user feedback with Blitzllama's in-app surveys! 🚀 Read further to check other capabilities of Blitzllama and customize to your requirement.

---

Triggers and Trigger Properties

What are Triggers? Triggers are events defined in your app that determine when a survey should display. They are managed and configured in the Blitzllama dashboard.

Attaching Trigger Properties (Optional): Pass additional properties with a trigger to refine targeting.

 <Blitzllama event_properties={event_property object} trigger="trigger_name"   />

You can use these properties to more filter users in the survey, as shown in the below screenshot.

You can also use backend events to launch in-app surveys. Check out https://documentation.blitzllama.com/connections/backend-trigger for more details.

Personalizing and Localizing Surveys

Setting User Attributes

You can provide Blitzllama with additional user information. This helps with refining targeting and personalizing the survey experience.

Set a Single Attribute:

NPM

blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');  

//Allowed values for data_type are "string", "number", "date", "boolean".

Set Multiple Attributes at Once:

NPM

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

Set User Email and Name (Optional):

NPM

blitz.setUserEmail('user_email');  
blitz.setUserName('user_name'); 

Setting Survey Language

You can provide Blitzllama with the language you wish to survey your user. It is not mandatory to launch surveys. Language code should be in ISO 639-1 codes.

NPM

 blitz.setSurveyLanguage('language_code');

User Management

Logout

If you need to reset user tracking, for example when a user logs out of your app, call:

NPM

 blitz.logout();

This ensures subsequent surveys are not tied to the previous user’s data.

Advanced Usage and Best Practices

Survey Completion Callback

Blitzllama can notify you when a survey completes, allowing you to trigger app-specific logic.

NPM

 blitz.subscribeEvent('survey_completed',(data) => { 
                          // data is an array of question/response objects
                          //add you custom logic here
                     });  

Sample Data Format:

[{
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
}, ...]

Survey Display Event

You can also subscribe to survey display events:

NPM

 blitz.subscribeEvent('survey_displayed',(data) => { 
      console.log('data', data); 
      //{trigger: triggerName, can_display_survey: false | true}
 });  

Custom Fonts

Customize your survey’s look and feel by specifying custom fonts:

NPM

 import { blitz } from 'react-native-blitzllama';
 
 blitz.setCustomFont('regular_font_family', 'bold_font_family');  

Initializing Blitzllama Early

Make sure blitz.init() runs before mounting components that might trigger surveys. Ideally, run it in your main entry file (App.js or similar).

App.jsx

import { blitz } from 'react-native-blitzllama';

const blitzSetup = async() => {
    await blitz.init('api_key');
    
    // call createUser once in the app’s lifetime for each unique user
    await blitz.createUser('user_id'); 
    
    // optionally set user attribute or set survey language here
};

// Call blitzSetup() at a high point in the app lifecycle. 
// Ensure blitzSetup() loads before a component is mounted. 

Component.jsx

import Blitzllama from 'react-native-blitzllama';

const [show, setShow] = React.useState(false);

<Blitzllama showSurvey={show} trigger="trigger_name" closeSurvey={() => setShow(false)}/>

Performance Impact

The Blitzllama React Native SDK is designed to have a minimal footprint. Calls are asynchronous, so app performance is generally not affected. Surveys will briefly increase CPU usage when displayed, but the effect is negligible.

FAQ & Troubleshooting

Survey not showing up?

• Verify that blitz.createUser() was called before showing the survey.

• Confirm that the trigger name used in your code matches exactly with the one configured on the Blitzllama dashboard.

Survey not appearing on initial load? This could be a timing issue. Make sure blitz.init() and blitz.createUser() are called early. If needed, you can trigger events only after the user creation callback completes.

Switching Users? If you need to track a different user, call blitz.logout() before creating a new one.

Need more assistance? Contact support via chat or email at [e-mail].

Next Steps

• Add a few triggers for critical actions within your app.

• Create and customize your first survey on the Blitzllama dashboard.

• Personalize the survey experience by adding attributes, setting languages, and customizing fonts.