Boxo miniapps can be customized to match the appearance of the host app. This means that the same miniapp can have different visual styles depending on the host app it’s launched in.

​
White-Labeling Process:

To enable white-labeling, host app theming colors and details, such as the host app’s name and logo, are provided to the miniapp within its settings.

​
Steps to Get Started:

  1. Enable Inheritance of Host App Colors
    Turn on Inherit host app colors within the miniapp settings. Additionally, provide default colors for scenarios where the host app doesn’t share its theming colors.

  2. Retrieve Miniapp Settings
    Call the AppBoxoWebAppGetMiniappSettings event to retrieve the miniapp’s settings.

  3. Apply UI Customizations
    Update the UI accordingly, using the data provided in the settings.

Here is an example of overriding CSS custom properties (variables):

appboxo.sendPromise('AppBoxoWebAppGetMiniappSettings').then(({ miniapp_settings }) => {
  // Data inside:
  // miniapp_settings = {
  //   colors: {
  //     primary_color: '#2EB8DA',
  //     secondary_color: '#E84060',
  //     tertiary_color: '#001529'
  //   },
  //   hostapp: {
  //     name: 'Boxo',
  //     logo: 'https://appboxo.com/img/Logo.svg'
  //   }
  // }

  document.head.insertAdjacentHTML('beforeend', `<style>
    :root {
      --primary-color: ${miniapp_settings.colors.primary_color};
      --secondary-color: ${miniapp_settings.colors.secondary_color};
      --tertiary-color: ${miniapp_settings.colors.tertiary_color};
    }
  </style>`)
}).catch(err => console.log(err));