Miniapp lifecycle events allow you to monitor key activities, such as onLaunch, onResume, onPause, onClose, and onError. These events help track the miniapp’s behavior throughout its usage lifecycle.
To append custom data params to miniapp URL use .params:
Copy
let miniapp = Boxo.shared.getMiniapp(appId: "app_id")let miniappConfig = MiniappConfig(theme: .System)// Set params that will be appended to miniapp's url// Ex. https://google.com/?name=OraveminiappConfig.setExtraParams(extraParams: ["name" : "Orave"])miniapp.setConfig(config: miniappConfig)
You can add your custom action menu item to existing default action menu item by defining .setCustomActionMenuItemImage
Copy
let miniapp = Boxo.shared.getMiniapp(appId: "app_id")let miniappConfig = MiniappConfig(theme: .System)// Set third custom action menu item// It is hidden by defaultminiappConfig.setCustomActionMenuItemImage(image: UIImage(named: "ic_custom_action_button"))miniapp.setConfig(config: miniappConfig)...extension ViewController : MiniappDelegate { func didSelectCustomActionMenuItemEvent(miniapp: Miniapp) { //show any custom dialog when custom action menu item is clicked }}
To show/hide custom action menu item use miniapp.showCustomActionMenuItem() and miniapp.hideCustomActionMenuItem()
Fetch the complete catalog of available miniapps with detailed metadata. This operation returns:
Basic miniapp information (id, name, description)
Logo
Category
Copy
Boxo.shared.getMiniapps { miniapps, error in miniapps.forEach { data in print(data.appId) print(data.name) print(data.longDescription) print(data.logo) print(data.category) }}
let config = Config(clientId: "CLIENT_ID")config.setUserId(id: "HOST_APP_USER_ID") //will be used for the consent screenBoxo.shared.setConfig(config: config)
let miniapp = Boxo.shared.getMiniapp(appId: "app_id")let miniappConfig = MiniappConfig()miniappConfig.enableSplash(isSplashEnabled: false) // to skip splash screen. if enabled, the splash screen will be hidden when 50% of web content is loaded. Otherwise, when the web page starts loading. By default is enabled.miniapp.setConfig(config: miniappConfig)miniapp.open(viewController: self)
Customize the animation effects to enhance the user experience by setting the appropriate page transition animation when opening a miniapp.
You can choose from the following page animations:
LEFT_TO_RIGHT - The miniapp slides in from the left side of the screen to the right.
RIGHT_TO_LEFT - The miniapp slides in from the right side of the screen to the left.
BOTTOM_TO_TOP- The miniapp slides in from the bottom of the screen to the top.
TOP_TO_BOTTOM - The miniapp slides in from the top of the screen to the bottom.
FADE_IN - The miniapp fades in gradually from completely transparent to opaque.
The BOTTOM_TO_TOP animation is the default page transition effect. You can easily change the animation to any of the other available options based on the user experience you want to provide.
Configure native component theming to match your app’s design system or respect user preferences. The SDK provides comprehensive theme support for:
Splash screens
Native UI components
System dialogs and alerts
Theme Options:
Option
Description
SYSTEM
Automatically matches device theme
LIGHT
Forces light theme
DARK
Forces dark theme
Control theme behavior at both global and per-miniapp levels for maximum flexibility.
Global Theme (Affects all miniapps)
Copy
Boxo.setConfig(Config.Builder() ... .setTheme(Config.Theme.SYSTEM) // DEFAULT: Follows system setting .build())
Per-Miniapp Theme Override
Copy
// Override theme for specific miniappBoxo.getMiniapp(appId) .setConfig(MiniappConfig.Builder() .setTheme(Config.Theme.LIGHT) // Overrides global theme .build()) .open()
Handle authentication between your host app and miniapps:
Copy
miniapp.setAuthListener { boxoActivity, miniapp -> // 1. Fetch auth code from your backend //use boxoActivity to open dialogs or activity val authCode = fetchAuthCodeFromBackend() // 2. Provide code to Miniapp miniapp.setAuthCode(authCode)}
Control the miniapp loading experience by customizing splash screen behavior. By default, miniapps display a splash screen that automatically hides when 50% of web content has loaded.
Important: Animations will only work if multitaskMode is set tofalse. Make sure to configure it accordingly to enable page transition animations.
Customize the animation effects to enhance the user experience by setting the appropriate page transition animation when opening a miniapp.
You can choose from the following page animations:
LEFT_TO_RIGHT - The miniapp slides in from the left side of the screen to the right.
RIGHT_TO_LEFT - The miniapp slides in from the right side of the screen to the left.
BOTTOM_TO_TOP- The miniapp slides in from the bottom of the screen to the top.
TOP_TO_BOTTOM - The miniapp slides in from the top of the screen to the bottom.
FADE_IN - The miniapp fades in gradually from completely transparent to opaque.
The BOTTOM_TO_TOP animation is the default page transition effect. You can easily change the animation to any of the other available options based on the user experience you want to provide.
Copy
Boxo.getMiniapp(appId) .setConfig( MiniappConfig.Builder() ... // Set the page animation to slide from right to left .pageAnimation(PageAnimation.RIGHT_TO_LEFT) .build() ) .open(requireActivity())
Track key moments in a miniapp’s execution by implementing the LifecycleListener. These events help you monitor user interactions and manage app state transitions.
Copy
miniapp.setLifecycleListener(object : Miniapp.LifecycleListener { override fun onLaunch(miniapp: Miniapp) { // Triggers when miniapp begins launching via miniapp.open() // Ideal for analytics tracking and initial setup } override fun onResume(miniapp: Miniapp) { // Called when miniapp returns to foreground // Use to resume paused operations } override fun onPause(miniapp: Miniapp) { // Called when miniapp loses foreground focus // Pause ongoing operations } override fun onClose(miniapp: Miniapp) { // Triggers when: // - User taps close button // - Miniapp activity is destroyed // Clean up resources and finalize analytics } override fun onError(miniapp: Miniapp, message: String) { // Called when miniapp fails to launch due to internet connection issues } override fun onUserInteraction(miniapp: Miniapp) { // Called on every user touch event // Useful for implementing custom idle timeouts }})
import 'package:appboxo_sdk/boxo.dart';Boxo.setConfig( clientId: '[client_id]', // your Boxo client_id userId: '[hostapp_user_id]',// will be used for the consent screen language: 'en', // use it to provide language to miniapp. by default 'en' multitaskMode: true, // (optional) 'multitaskMode' works only on Android. By default 'true', each miniapp appears as a task in the Recents screen. sandboxMode: false, // sandbox mode. By default 'false' theme: 'dark', // (optional) miniapp theme "dark" | "light" (by default is system theme), isDebug: true, // by default 'false', enables webview debugging showClearCache: true, // use it to hide "Clear cache" from Miniapp menu, by default 'true' showPermissionsPage: true, // use it to hide "Settings" from Miniapp menu, by default 'true' showAboutPage: true // show/hide "About page" on Miniapp menu, by default 'true');Boxo.openMiniapp( "[miniapp_id]", // your miniapp id data: {'key': 'value'}, // (optional) data as Map that is sent to miniapp theme: 'dark', // (optional) miniapp theme "dark" | "light" (by default is system theme) enableSplash: false // (optional) to skip splash screen. if enabled, the splash screen will be hidden when 50% of web content is loaded. Otherwise, when the web page starts loading. By default is enabled.);Boxo.hideMiniapps(); //use it to close all miniapp screensBoxo.logout(); //On logout from your app, call it to clear all miniapps data.
import React from 'react';import Boxo from '@appboxo/react-native-sdk';import { StyleSheet, View, Button } from 'react-native';export default function App() { React.useEffect(() => { Boxo.setConfig( '[client_id]', { // your Boxo client_id userId: [hostapp_user_id], // will be used for the consent screen language: 'en', // to provide language to miniapp. by default 'en' enableMultitaskMode: true, // (optional) 'multitaskMode' works only on Android. By default 'true', each miniapp appears as a task in the Recents screen. sandboxMode: false, // sandbox mode. By default 'false' theme: 'light', // (optional) miniapp theme "dark" | "light" (by default is "system") isDebug: true, // by default 'false', enables webview debugging showClearCache: true, // use it to hide "Clear cache" from Miniapp menu, by default 'true' showPermissionsPage: true, // use it to hide "Settings" from Miniapp menu, by default 'true' showAboutPage: true // show/hide "About page" on Miniapp menu, by default 'true' } ); }, []) const handleOpenMiniapp = () => { const options = { data: {'key': 'value'}, // (optional) data as {[key: string]: any} that is passed to miniapp in `.getInitData` call theme: 'dark', // (optional) miniapp theme "dark" | "light" | "system" (by default is value of "theme" argument in setConfig function) extraUrlParams: {param: 'test'}, // (optional) extra query params to append to miniapp URL (like: http://miniapp-url.com/?param=test) } Boxo.openMiniapp( '[miniapp_id]', // miniapp ID to be launched options // (optional) options ); } return ( <View style={styles.container}> <Button color="#841584" title="Launch miniapp" onPress={handleOpenMiniapp} accessibilityLabel="Launch miniapp" /> </View> );}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: '#fff', justifyContent: 'center', },});
Important
Custom params available in 1.0.26+ versions
To append any custom data as URL param to miniapp’s URL use extraUrlParams:
Copy
const options = { extraUrlParams: {param: 'test'} // (optional) extra query params to append to miniapp URL (like: http://miniapp-url.com/?param=test)}Boxo.openMiniapp( '[miniapp_id]', // miniapp ID to be launched options // (optional) options);
Miniapp opens on a native screen. To show payment processing page need to hide miniapp screen.
To use this function need to enable ‘enableMultitaskMode: true’ in Boxo.setConfig()
onLaunch - Called when the miniapp will launch with Boxo.open(…)
onResume - Called when the miniapp will start interacting with the user
onPause - Called when the miniapp loses foreground state
onClose - Called when clicked close button in miniapp or when destroyed miniapp page
onError - Called when miniapp fails to launch due to internet connection issues
onUserInteraction - Called whenever touch event is dispatched to the miniapp page.
onAuth - Called when the miniapp starts login and user allows it
Miniapp opens on a native screen. To show payment processing page need to hide miniapp screen.
To use this function need to enable ‘enableMultitaskMode: true’ in Boxo.setConfig()
onLaunch - Called when the miniapp will launch with Boxo.open(…)
onResume - Called when the miniapp will start interacting with the user
onPause - Called when the miniapp loses foreground state
onClose - Called when clicked close button in miniapp or when destroyed miniapp page
onError - Called when miniapp fails to launch due to internet connection issues
onUserInteraction - Called whenever touch event is dispatched to the miniapp page.
onAuth - Called when the miniapp starts login and user allows it