How to set up BitLabs Widgets across your Web App

February 18, 2022

If you are using the BitLabs Offerwall on your reward site, our widgets can help you to improve your revenue signficantly. With the implementation of a widget, our offerwall can open up as an overlay on any page. You can put surveys into banners, sidebars and virtually across any page you wish.

How to set up Widgets

Widgets are complementary to the offerwall you are already using, so you will not have to create a new app on the BitLabs dashboard for this to work. The colors will automatically be synced with your offerwall, so that the widgets fit your web app perfectly.

Adding the BitLabs Script to your <head> Section

For any widget to work you will need to add our script to either the head or the end of the body section of the page you want to display our widgets on.

<script src="https://sdk.bitlabs.ai/bitlabs-sdk-v0.0.2.js"></script>
<link rel="stylesheet" href="https://sdk.bitlabs.ai/bitlabs-sdk-v0.0.2.css"/>

Add this Script wherever you want the Widget to display

<script>
   function initSDK() {
     window.bitlabsSDK.init("YOUR_APP_TOKEN", "USER_ID");
‍
    window.bitlabsSDK.showWidget("#one", "simple", "top-left");
      document.removeEventListener("DOMContentLoaded", this.initSDK);
   }
   document.addEventListener("DOMContentLoaded", this.initSDK);
</script>

Available Widgets

See the code in action and play around with it in our codepen:

See the Pen Bitlabs Widgets by Marco (@Marcoru97) on CodePen.