CodePen Embed - Bitlabs Offerwall Widgets

Live

 
<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" />
<div class="show-room">
  <div id="simple"></div>
  <div id="full-width"></div>
  <div id="notification"></div>
  <div id="compact"></div>
  <div id="offers"></div>
  <div id="compact-grid"></div>
  <div id="simple-grid"></div>
  <div style="width: 350px">
    <div id="earnings"></div>
  </div>
  <div style="width: 350px; height: 500px;">
    <div id="leaderboard"></div>
  </div>
</div>

Live

​x
 
body {
  margin: 50px;
}
​
.show-room {
  display: flex;
  flex-direction: column;
  margin: 10px;
  row-gap: 10px;
}
​

Live

xxxxxxxxxx
 
function initSDK() {
  window.bitlabsSDK
    .init(
      // Your offerwall token
      "7c8daf3b-3f18-4fd3-930b-a353e474f6fd",
      // Your User ID
      "34598eb3-2b14-4f34-8d87-0108a81c18f9",
      { showFloatingWidget: true, floatingWidgetPosition: "bottom-right" }
    )
    .then(() => {
      //showWidget(Div Selector, Widget Name, Offerwall Position
      window.bitlabsSDK.showWidget("#simple", "simple", "top-left");
      window.bitlabsSDK.showWidget("#full-width", "full-width", "top-right");
      window.bitlabsSDK.showWidget(
        "#notification",
        "notification",
        "bottom-left"
      );
      window.bitlabsSDK.showWidget("#compact", "compact", "bottom-right");
      window.bitlabsSDK.showWidget(
        "#compact-grid",
        "compact",
        "bottom-right",
        () => void 0,
        { rows: 2, noFakeSurveys: false, autoWidth: true }
      );
      window.bitlabsSDK.showWidget(
        "#simple-grid",
        "simple",
        "bottom-right",
        () => void 0,
        { rows: 1, noFakeSurveys: false, autoWidth: false }
      );
      window.bitlabsSDK.showWidget("#earnings", "earnings", "bottom-left");
      window.bitlabsSDK.showWidget(
        "#leaderboard",
        "leaderboard",
        "bottom-left",
        () => void 0,
        {
          onClick: () => {
            console.log("click");
          }
        }
      );
      window.bitlabsSDK.showWidget(
        "#offers",
        "offers",
        "bottom-right",
        () => void 0,
        { rows: 2 }
      );
    });
}
​
document.addEventListener("DOMContentLoaded", this.initSDK);
​

This Pen is owned by Marco on CodePen.

See more by @Marcoru97 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.