Account Set-Up and retrieving your API Key

Before we can get started with implementing the SDK, you should retrieve your API Key for your integration from the BitLabs Dashboard. If you haven't created an account yet, you can do so here and follow the instructions for the dashboard starting with Sign up & Set up.

Adding the SDK

In your project directory, open a terminal and add:

npm install bitlabs

yarn add bitlabs

The SDK requires the react-native-webview:

npm install react-native-webview

yarn add react-native-webview

Using the SDK

Show the Offerwall

Use the <BitLabs /> component to show the Offer Wall/Direct Link. BitLabs will show up and the user will see qualifications or surveys.

<BitLabsOfferWall
      uid='USER_ID'
      token='APP_TOKEN'
      adId={adId}
      onExitPressed={navigation.goBack}
      tags={{ 'my_tag': 'new_user', 'is_premium': true }}
      onReward={reward => console.log(`Reward this time: ${reward}`)} />

The props are the following:

• uid: you will need to dynamically insert the user id for each app user. Make sure the id used here is unique and that it does not change, as the user's profile will be stored under this id.
• token: This is where you will need the API key from the dashboard, as you will need to replace "YOUR-TOKEN" with it.
• adId: The advertising Id, we recommend you use this so that the offers make more sense to the user. Default value is empty.
• onExitPressed: The Navigation algorithm which triggers a back press to exit the BitLabs screen.

📘

Navigation System

The onExitPressed implies that the BitLabs component is on its own screen. You shouldn't add anything to the screen. In the example above, I am using the react-navigation module as the navigation system. You can use any navigation system you want, just pass the function which triggers an exit screen.

• tags: Additional parameters to the SDK you would like to receive in your callback.
• onReward: The callback which receives the reward of the user and executes the behaviour you specify. This callback is invoked when the user leaves the Offer Wall, and the reward is the total reward the user got since the Offer Wall is opened until it is closed.

📘

Important

Once you enable Offers in your BitLabs Dashboard, the Offerwall will be launched in Safari on iOS and thus you can only use server-to-server callbacks for reward tracking. This function will basically be useless in such a case.

For Android, the reward in this callback is just that of the surveys. For offers, please use the server-to-server callback.

🚧

We highly recommend using server-to-server callbacks instead! Please do not use this in apps where the user can withdraw real currency, as it might be exploitable.
However, if your app stores user data locally and does not sync with a server, this would be an option to still use BitLabs to reward your users.

👍

That's it!

Theoretically, this is all you have to do. Anything below is optional but can improve the user experience.

List of Survey Widgets

The <BitLabsSurveys /> component shows a horizontal list of survey widgets for the user.

<BitLabsSurveys
        uid={uid}
        token={token}
        onSurveyPressed={() => navigation.navigate('Offerwall')} />

The props are the following:

• uid: you will need to dynamically insert the user id for each app user. Make sure the id used here is unique and that it does not change, as the user's profile will be stored under this id.
• token: This is where you will need the API key from the dashboard, as you will need to replace "YOUR-TOKEN" with it.
• onSurveyPressed: The function which triggers when one survey among the list is pressed. We recommend that the functionality would be to open the offerwall. In the example above, react-navigation is used and thus the function navigates to a screen called Offerwall where it shows the <BitLabsOfferWall /> component.

Additional Functionality

Check For Surveys - Check if there's something to do for the user

You can use checkSurveys() to check if a survey is available for the user. This function takes two callbacks as parameters: onResponse with hasSurveys, a boolean which is true whenever there's at least one survey or qualification question available for the user. Otherwise, it's false. onFailure with an Exception. The token and the uid are the same ones used previously.

checkSurveys(
  token, 
  uid, 
  (hasSurveys) => console.log(`[Example] Has Surveys: ${hasSurveys}`), 
  (error) => console.log(error.message));

Get Surveys

You can use .getSurveys() to get available surveys for the user. The onResponse callback has a list of The onResponse callback has a List Surveys.

getSurveys(
  token, 
  uid, 
  (surveys) => console.log(`[Example] Getting surveys -> ${surveys.map((survey) =>
          `Survey ${survey.id} in ${survey.details.category.name}`)}`),
  (error) => console.log(error.message));

A survey has the following properties: