Skip to main content

React Native SDK

Survey library to monetize your mobile app, provided by inBrain.ai

Requirements

  • React Native >= 0.69.0

iOS specific requirenments:

  • Xcode 14+
  • iOS 12.0+ / Catalyst(macOS 10.15.1+), iOS 13.1+
  • Swift 5.0+

Android specific requirenments:

  • System WebView >= 51.0.2704.90 (default for Android 7.0).

Installation

Install and link the module: $ npm install inbrain-surveys --save

Extra steps Android
Add jitpack repository to your gradle configuration android/build.gradle > allprojects > repositories

maven { 
url 'https://jitpack.io'
}

Extra steps iOS
Open the Terminal and go to the iOS project folder, then run

pod install

Usage
To start using the package - please, add the corresponding import statement in your code:

import inbrain from 'inbrain-surveys';

For a fully functional example, please refer to this demo app using the SDK.

Get Started

Initialize the SDK

inbrain.setInBrain(apiClientId: string, apiSecret: string, userId?: string);

Note: This method must be called prior calling all the other methods.

Initialization Example

import inbrain from 'inbrain-surveys';

inbrain.setInBrain(apiClientId, apiSecret, userId);

User identifier

Set uniq identifier of the user within your application. If value not set (or empty) - deviceId will be used instead. This value is provided via S2S Callbacks as PanelistId. See more here: S2S Docs.

inbrain.setUserID(userID: string | undefined)
  • userId: The string value that uniquely identifies each user within your application (Example: an email, a username).

Example

import inbrain from 'inbrain-surveys';

inbrain.setUserID(userId)

Option #1: Use The Survey Wall

Simply show the survey wall and let the inBrain system handle everything else! Be sure to Setup your S2S Callbacks and fully configure your application here: Publisher Dashboard

inbrain.showSurveys() : Promise<void>

Survey Wall Example

import inbrain from 'inbrain-surveys';

inbrain.showSurveys()
.then(() => {
console.log('success');
})
.catch((err: Error) => {
console.log(err);
});

Option #2: Use Native Surveys

Native Surveys is similar to an API that can be used within our SDK. Fetch "Surveys" and receive a list of the top surveys for a single user based on their profiler data. inBrain handles collecting profiler data and matching users with the ideal surveys. When fetching surveys, we return a list with details about each survey opportunity such as Reward, Length of Interview, Rating, etc. You are responsible for displaying a representation (button, tile, etc.) for each survey natively within your app.

getNativeSurveys: (filter?: InBrainSurveyFilter) => Promise<InBrainNativeSurveys[]>
  • filter: Optional parameter for filter surveys. Possible options:
    • placementId (string): an optional placement identifier. These can be setup in your Publisher Dashboard
    • categoryIds (number[]): an optional list of categories. Providing one or more category Ids will limit surveys to those categories.
    • excludedCategoryIds (number[]): an optional list of EXCLUDED categories. Providing one or more excluded category Ids will only return surveys that do NOT belong to these categories.

Usage

import inbrain, {InBrainNativeSurvey, InBrainSurveyFilter, InBrainSurveyCategory} from 'inbrain-surveys';

let filter: InBrainSurveyFilter = {
placementId: placementId,
categoryIds: [InBrainSurveyCategory.Automotive],
excludedCategoryIds: [InBrainSurveyCategory.BeveragesAlcoholic],
};

inbrain
.getNativeSurveys(filter)
.then((nativeSurveys: InBrainNativeSurvey[]) => {
console.log(InBrainNativeSurvey);
})
.catch((err: Error) => {
console.log(err);
});

Open A Native Survey

When a user within your app selects a survey, you will then need to call showNativeSurvey along with the following survey data points. This will open the survey within a webview over your app.

inbrain.showNativeSurvey(surveyId: string, searchId: string) : Promise<void>
  • surveyId: id of the surveys to be shown;
  • searchId: survey's searchId.

Example

import inbrain from 'inbrain-surveys';

inbrain
.showNativeSurvey(surveyId, searchId)
.then(() => {
console.log('success');
})
.catch((err: Error) => {
console.log(err);
});

Understanding Native Surveys

As mentioned in the previous sections, fetching surveys via getNativeSurveys returns an array of survey objects. Below are details related to the properties available with each survey:

PropertyDescription
idId of the survey and the value that should be used when passing parameter to showNativeSurvey()
rankA normalized value of 1-N where 1 is highest ranked survey and N is the lowest ranked survey
timeAn estimation of how many minutes will be required for the user to complete the survey
valueReward the user will earn by completing the survey. This value is in the currency type (points, coins, cents) you specified within the publisher dashboard and already takes into consideration the revenue share you've allocated to share with the user for a survey completion.
isProfilerSurveyBoolean value indicating whether the survey represents an inBrain Profiler survey
currencySaleBoolean value indicating if the value of the survey is adjusted based on an active currency sale
multiplierThe currency sale multiplier value applied to the survey value
conversionLevelValue that indicates the approximate conversion rate of the survey. See possible values here
categoriesArray of values indicating what categories this survey belongs to. See possible values here
searchIdThis value should be used when opening a native survey. It includes important encoded information related to placement and category filters

Additional Functionality

Add custom tracking data

Set the value to track each user session. This value is provided via S2S Callbacks as SessionId. See more here: S2S Docs

inbrain.setSessionID(sessionId: string)
  • sessionId: Identifier of the session

Example

import inbrain from 'inbrain-surveys';

inbrain.setSessionID(`session_identifier`)

Customize Navigation Bar

Setup Navigation Bar to match your application style

inbrain.setNavigationBarConfig(config: NavigationBarConfig)
  • config: the Navigation Bar configuration

Example

import inbrain, { NavigationBarConfig } from 'inbrain-surveys';

const navigationBarConfig: NavigationBarConfig = {
title: 'inBrain.ai Surveys',
backgroundColor: '#00A5ED',
titleColor: '#FFFFFF',
buttonsColor: '#FFFFFF',
hasShadow: false,
};
inbrain.setNavigationBarConfig(navigationBarConfig);

Customize Status Bar

Setup Status Bar to match your application style

inbrain.setStatusBarConfig(config: StatusBarConfig)
  • config: the Status Bar configuration

Example

import inbrain, { StatusBarConfig } from 'inbrain-surveys';

const statusBarConfig: StatusBarConfig = {
lightStatusBar: true,
statusBarColor: '#EAAAAA', // Android only option, have no effect at iOS.
};
inbrain.setStatusBarConfig(statusBarConfig);

Check if Surveys are available (Survey Wall Only)

A method to check if the user has surveys available. This is useful to check prior to giving the user an option to open the inBrain Survey Wall. DO NOT use this method when working with Native Surveys, as that does not take into account placement and categories filter options.

inbrain.checkSurveysAvailable() : Promise<boolean>

Example

import inbrain from 'inbrain-surveys';

inbrain
.checkSurveysAvailable()
.then((available: boolean) => {
console.log(available);
})
.catch((err: Error) => {
console.log(err);
});

Callbacks

On webview dismissed. If you are using Native Surveys - please, ensure the surveys reloaded each time the webview closed.

inbrain.setOnSurveysCloseLister(callback: (OnCloseSurveysData) => void)
  • callback: called after WebView closed by the user. Available OnCloseSurveysData fields:
    • byWebView (boolean): true - webview closed by command from WebPage; false - webview closed by user;
    • rewards? (InBrainSurveyReward[]) - optional list of completed surveys and earned rewards:
      * `surveyId (string)` - identifier of completed survey;
      * `userReward (number)` - amount of IAC, earned by the user;
      * `outcomeType (SurveyOutcomeType)` - type of survey completion (completed or terminated);
      * `placementId (string)` - an optional placement identifier of the survey;
      * `categories (Category)` - an optional list of the survey's categories.
      NOTE: At the moment only first Native Survey reward is delivered. That means if the user complete a Native Survey, proceed to Survey Wall and complete one more survey - only first reward will be delivered. In case of Survey Wall usage only - no rewards will be delivered.

Usage

import inbrain from 'inbrain-surveys';

inbrain.setOnSurveysCloseLister((data) => {
// Do something with the data
})

Note: Calling this method multiple times will override the previous listener.

TS available types and interfaces:

  • InBrainReward: response from .getRewards();
  • InBrainNativeSurvey: response from .getNativeSurveys();
    • Category: InBrainNativeSurvey's field, describes survey's category;
    • ConversionLevel: InBrainNativeSurvey's field, describes the estimated conversion performance range;
  • InBrainSurveyFilter: type for filtering data used with .getNativeSurveys();
  • InBrainSurveyCategory: a full list of available categories;
  • OnCloseSurveysData: parameter of OnSurveysClose callback;
    • InBrainSurveyReward: information about completed survey and earned reward;
    • SurveyOutcomeType: type of survey completion (completed or terminated);
  • NavigationBarConfig: Navigation Bar configuration options;
  • StatusBarConfig: Status Bar configuration options.

Full list of categories:

  • Automotive
  • Beverages Alcoholic
  • Beverages Non Alcoholic
  • Business
  • Children & Parenting
  • Coalition Loyalty Programs
  • Destinations & Tourism
  • Education
  • Electronics, Computer Software
  • Entertainment And Leisure
  • Finance, Banking, Investing & Insurance
  • Food
  • Gambling, Lottery
  • Government & Politics
  • HealthCare
  • Home
  • Media & Publishing
  • Personal Care
  • Restaurants
  • Sensitive & Explicit Content
  • Smoking & Tobacco
  • Social Research
  • Sports Recreation Fitness
  • Telecommunications
  • Transportation
  • Travel - Airlines
  • Travel - Hotels
  • Travel - Services, Agency, Booking
  • Credit Cards
  • Video Games
  • Fashion & Clothing - Other
  • Fashion & Clothing - Department Store

List of available "Conversion Level" values:

Note: The Conversion Level buckets indicate how the survey has been performing platform-wide at inBrain, not necessarily how well the survey will perform for the user its shown to. Its recommended to use these tags only to portray a unique UI.

  • New Survey;
  • Very Poor Conversion
  • Poor Conversion;
  • Fair Conversion;
  • Good Conversion;
  • Very Good Conversion;
  • Excellent Conversion.

Troubleshoots

[BUILD TIME]

Several errors similar to Bad receiver 'int *', Unkown type name 'InBrain'...

First check that the framework target membership is correctly set. If the problem still occurs, and you are trying to create a release build with a simulator as target, please add arm64 to the Excluded Architecture of your project and 'inbrain-surveys' pods (see this post for detailed information)

[RUNTIME]

Library not loaded: @rpath/libswiftCore.dylib

This problem can happen if your project doesn't have the Swift standard libraries included. Set the 'Always Embed Swift Standard Libraries' to yes in your target to fix it. Clean and build the project after changes.

[RUNTIME - Release scheme]

dependent dylib '@rpath/InBrainSurveys.framework/InBrainSurveys' not found

This problem happen with some versions of Cocoapods and Xcode. Updating Cocoapods and Xcode to the latest versions should fix the trouble.

[DEVELOPMENT]

When running 'pod install' in APP: "Specs satisfying the inbrain-surveys (from ../node_modules/inbrain-surveys) dependency were found, but they required a higher minimum deployment target."

=> Increase the platform version in 'APP/ios/Podfile'

When building in Xcode: problem with not finding switch libraries

https://github.com/facebook/react-native/issues/31733#issuecomment-931824830