Webview
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:
https://web.bitlabs.ai/?uid=[USER_ID]&token=[YOUR_API_TOKEN]
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:
https://web.bitlabs.ai/?uid=[UUID]&token=[YOUR_API_TOKEN]
Examples
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() {
super.viewDidLoad()
let myURL = URL(string:"https://web.bitlabs.ai/?uid=[UUID]&token=[YOUR_API_TOKEN]")
let myRequest = URLRequest(url: myURL!)
webView.load(myRequest)
}}
Android Example
WebView myWebView = new WebView(activityContext);
setContentView(myWebView);
// Enable JavaScript to support all kinds of Surveys
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Load the OfferWall URL with your token included
myWebView.loadUrl("https://web.bitlabs.ai/?uid=[UUID]&token=[YOUR_API_TOKEN]");
Optional parameter
Similar to the iFrame and web integration, we offer optional opening parameters to enhance the offer wall experience. You can read about it here.
Updated 6 months ago