Other Platforms

This page will guide you through the implementation of BitLabs with Platforms like Flutter, React, VueJS and others.

Account Set-Up and retrieving your API Key

Before we can get started, 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..

Opening BitLabs in a WebView

It is possible to embed the offer wall in a WebView.

Open BitLabs URL:

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

Adjusting WebView Settings

We need to make a few configurations to the WebView to make it work well with BitLabs.

1. Enable JavaScript to support all survey types

2. Disable any option to go forward/backward navigation in the Web-View

3. Display a small X in the upper right corner to close the Web-View

4. As soon as the URL in the Web-View does not contain "web.bitlabs.ai" anymore,
change the X in the upper corner to a back button.

This will enable the user to leave a single survey instead of quitting the entire offer wall. In case the user hits this button, set the URL of the Web-View to the original one:



iOS Example

If you want the user to take the survey in a native iOS app, please embed the URL in a WebView. If you are unfamiliar with this process, you can learn more about WebViews on iOS here.

// Official Doc: https://developer.apple.com/documentation/webkit/wkwebview

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {

   var webView: WKWebView!

   override func loadView() {
       let webConfiguration = WKWebViewConfiguration()
       webView = WKWebView(frame: .zero, configuration: webConfiguration)
       webView.uiDelegate = self
       view = webView
   override func viewDidLoad() {

       let myURL = URL(string:"https://web.bitlabs.ai/?uid=[UUID]&token=[YOUR_API_TOKEN]")
       let myRequest = URLRequest(url: myURL!)

Android Example

WebView myWebView = new WebView(activityContext);

// Enable JavaScript to support all kinds of Surveys
WebSettings webSettings = myWebView.getSettings();

// Load the OfferWall URL with your token included

Optional parameter

The Offerwall uses query parameters to adjust the user experience dynamically.
Every unused query parameter is added to the survey opening URL.
Query parameters always have the highest priority and will override default values or values provided by settings set on our Dashboard. They get saved into the session storage to prevent the parameters from being overwritten after a page reload.

parameterpossible valuesdescription
osandroid, ios, desktopoverrides the operating system which is currently used.
sdkIFRAME, TABoverrides where the offer wall is opened in an iframe or own tab
display_modesurveys, offers, all, surveys,offers,alloverrides which modes will be enabled
only surveys, only offers, offers and surveys or all
debugtrue, falseused to activate the debug mode
exchangeany numberoverrides the factor, which gets multiplied by the payout value
currencystringoverrides currency symbol with a string
currency_iconicon URLoverrides currency symbol with an icon from the given URL
custom_logo_urlicon URLoverrides the custom logo
widthdefault, full_widthoverrides the offer wall width:
default (700px) or full_width (100%)
element_border_radiusnone, small, medium, bigoverrides the border-radius
navigation_colorcolorsoverrides the navigation color
background_colorcolorsoverrides the background color
interaction_colorcolorsoverrides the interaction color
survey_icon_colorcolorsoverrides the survey icon color
themethemesets the color scheme the Offerwall should use
hashhmac sha1 hash from the URLto validate the set parameter settings more information
username"username123"The username the user set on your page. This is used to display the username instead of anonymous in the leaderboard widget
tags&tags=premium_user%3Dtrue%26my_id%3D12345Encoded parameters you want to pass into BitLabs. All parameters you pass into the tags will be appended to the callbacks/redirects in the same way you pass them in.


The color parameters accept a simple hex color code like #ff00ff or a linear-gradient.
The linear gradient needs this format: linear-gradient(45deg, #ff0000 0%, #00ff00 100%). (the numbers can be changed)


The Offerwall can operate in two color schemes (themes). Light and Dark. The theme is automatically set on startup based on the user's browser settings. It's possible to override this behavior with the theme query parameter. Just append theme=LIGHT or theme=DARK to force a given theme.


To make these parameters a bit more save, we suggest hashing the finished URL with hmac sha1 and the app/API token as hash salt.

import { createHmac } from 'crypto';

// URL with all desired parameters set
let urlWithParams = 'https://example.com/surveys?uid=123&token=abc123&width=full_width&navigation_color=%23ffff00';

// app/api token
const salt = 'abs123';

// create hash (result from this example: 6b9e14a31b642aed06a12882a13ae2fcb38ece4d)
const hash = createHmac('sha1', salt).update(urlWithParams).digest('hex');

// add hash to the URL
const finishedURL = urlWithParams + '&hash=' + hash;

// finished URL: https://example.com/surveys?uid=123&token=abc123&width=full_width&navigation_color=%23ffff00&hash=6b9e14a31b642aed06a12882a13ae2fcb38ece4d



To comply with RFC3986 the query parameter values have to be percentage encoded. This means to replace reserved characters with their corresponding percentage encoded code. These codes also have to be uppercase. You can find a list of these codes below.

reserved characterspace!#$%&'()*+,/:;=?@[]
percentage encoded%20%21%23%24%25%26%27%28%29%2A%2B%2C%2F%3A%3B%3D%3F%40%5B%5D