Flutter SDK

This page will guide you through the integration of our Flutter SDK into your app.

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 SDK

In your pubspec file, add bitlabs as a dependency.

dependencies:
  bitlabs: ^1.1.0

Initialision

You must initialise the SDK before you can use it. You can do so with the following code.

BitLabs.instance.init('YOUR_APP_TOKEN', 'USER_ID');

This is where you will need the API key from the dashboard, as you will need to replace "YOUR-TOKEN" with it. For "YOUR-USER-ID", 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.

Support Localization

If want to support localization in the OfferWall, you have to add the LocalizationDelegate() to your main App Widget as follows:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    localizationsDelegates: [
      ...GlobalMaterialLocalizations.delegates,
      LocalizationDelegate(), // This belongs to BitLabs and it's required for localization
    ],
    supportedLocales: const [Locale('en', ''), Locale('es', '')],
  );
}

Using the SDK

Show BitLabs to the user

Now it's time to use the BitLabs SDK so that your users can start taking surveys. Call the .launchOfferWall() function to open the Offer Wall/Direct Link. BitLabs will show up and the user will see qualifications or surveys.

BitLabs.instance.launchOfferWall(<BuildContext>);

The <BuildContext> is that of the widget where BitLabs is visible in.

👍

That's it!

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

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 returns true whenever there's at least one survey or qualification question available for the user. Otherwise, it returns false.

BitLabs.instance.checkSurveys((hasSurveys) {
  if (hasSurveys == null) {
    log('[Example] CheckSurveys Error. Check BitLabs logs.');
    return;
  }
  log('[Example] Checking Surveys -> ${hasSurveys ? 'Surveys Available!' : 'No Surveys!'}');
});

If hasSurveys is null, then there has been an error in the request. It will be logged with [BitLabs].

Get Surveys Natively

You can use .getSurveys() to get available surveys for the user.

BitLabs.instance.getSurveys((surveys) {
  if (surveys == null) {
    log('[Example] GetSurveys Error. Check BitLabs logs.');
    return;
  }
  log('[Example] Getting Surveys -> ${surveys.map((survey) => 'Survey ${survey.id} in ${survey.details.category.name}')}');
});

The callback's parameter is a list of surveys. A survey has the following properties:

PropertyTypeDescription
networkIdintThe id of the Network this survey belongs to.
idintThe id of the Survey.
cpistringCPI of this survey in USD without any formatting applied.
valuestringCPI formatted according to your app settings. Can be shown to the user directly.
loidoubleAssumed length of the survey in minutes.
remainingintAmount of users that can still open the survey
detailsDetails(Category(name: string, iconUrl: string))The details of the category this Survey is classified in.
ratingintDifficulty ranking of this survey. 1-5 (1 = hard, 5 = easy). Minimum value is 1, maximum value is 5.
linkstringThis link can be used as is to open the survey. All relevant details are inserted on the server.
missingQuestionsint?The amount of questions that have to be answered before the survey is guaranteed to be openable by the user.

On Reward - Client Side Callbacks

You can use .setOnReward() to set callback which receives the reward of the user and executes the behaviour you specify.

BitLabs.instance.setOnReward((reward) => {log('[Example] Reward for this session: $reward')});

This callback is invoked when the user leaves the Offer Wall, and the payout 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.

Tags - Set a list of Tags to receive in your callbacks

You can use .setTags() to pass additional parameters to the SDK you would like to receive in your callback.

BitLabs.instance.setTags({'my_tag': 'new_user', 'is_premium': true});

🚧

Setting a new Map of Tags will replace the old ones.

Add a Tag - Add single tags to receive in your callbacks

Use addTag() if you want to append new tags to an already existent Map of tags which you already set earlier.

BitLabs.instance.addTag('my_tag', 'new_user');
BitLabs.instance.addTag('is_premium', true);

Request Tracking Authorisation - For the Advertising Id

Since Offers work best with a device's Ad Id, we will need to fetch that Id and send it to the offer wall. In iOS, this can only be done after the user gives authorisation. So, we created a method which asks the user for authorisation. You can have the discretion of when it's best to ask the user in your app and call this one method whenever you want.

BitLabs.instance.requestTrackingAuthorization()

❗️

IMPORTANT

In order to be able to show the Tracking Authorization request, you have to provide a custom text, known as a usage-description string, which displays in the system-permission alert request. Basically, just add this value to your Info.plist as shown in this official page.


Your next Step

You have now integrated BitLabs with your project. If you haven't done it already, it is time to configure server-to-server callbacks and the look and feel of your app.