In order to customize the offerwall during runtime, the iframe post messages can be used. It is to note that this will only overwrite what can be seen in the iframe and not the offerwall settings on the dashboard.

Example

To change offerwall settings you can simply call the postMessage function on the iframe with a valid message.

<!doctype html>
<html lang="en">
  <head>
    <title>Offerwall</title>
    <script>
      function sendMessage() {
        const iframe = document.querySelector('#frame');
        iframe.contentWindow.postMessage({ target: 'app.visual.dark.background_color', value: '#FF0000' }, '*');
      }
    </script>
  </head>
  <body>
    <button onclick="sendMessage()">Send Message</button>
    <iframe id="frame" src="https://web.bitlabs.ai/?token=PUT_YOUR_APP_TOKEN_HERE"></iframe>
  </body>
</html>

Available Messages

A valid message has to be an object with the following properties:

target string - The target of the message.
value any - The value of the message.

If you send a message with an invalid target or value, the setting will not be applied, and you will receive a console warning.

Target	Value	Description
`app.modifier.theme`	`string`, must be either `light` or `dark`	Switches between light and dark mode
`app.visual.custom_logo_url`	`string`	Changes the brand logo of the offerwall
`app.visual.dark.background_color`	`string`, valid Hex color e.g. `#000000` or valid linear gradient e.g. `linear-gradient(90deg, #000000 0%, #FFFFFF 100%)`	Changes the background color in dark mode
`app.visual.dark.branding_color`	`string`, valid Hex color e.g. `#000000` or valid linear gradient e.g. `linear-gradient(90deg, #000000 0%, #FFFFFF 100%)`	Changes the branding color in dark mode
`app.visual.dark.interaction_color`	`string`, valid Hex color e.g. `#000000`	Changes the interaction/secondary color in dark mode
`app.visual.dark.navigation_color`	`string`, valid Hex color e.g. `#000000` or valid linear gradient e.g. `linear-gradient(90deg, #000000 0%, #FFFFFF 100%)`	Changes the navigation color in dark mode
`app.visual.light.background_color`	`string`, valid Hex color e.g. `#000000` or valid linear gradient e.g. `linear-gradient(90deg, #000000 0%, #FFFFFF 100%)`	Changes the background color in light mode
`app.visual.light.branding_color`	`string`, valid Hex color e.g. `#000000` or valid linear gradient e.g. `linear-gradient(90deg, #000000 0%, #FFFFFF 100%)`	Changes the branding color in light mode
`app.visual.light.interaction_color`	`string`, valid Hex color e.g. `#000000`	Changes the interaction/secondary color in light mode
`app.visual.light.navigation_color`	`string`, valid Hex color e.g. `#000000` or valid linear gradient e.g. `linear-gradient(90deg, #000000 0%, #FFFFFF 100%)`	Changes the navigation color in light mode
`app.visual.hide_reward_value`	`boolean`	Hides the reward
`general.currency.symbol`	`object: { content: string; isIcon: boolean }`	Changes the currency name or symbol displayed. Set `isIcon` to true, if you want to pass in an image URL.