Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.boxo.io/llms.txt

Use this file to discover all available pages before exploring further.

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));