Customize Widget

Adjust the containerStyle in the widget's configuration to align with your application's aesthetics. You can customize the background, primary, secondary, and button colors.

The example below shows how to customize Widget.

import { KanaWidget } from "@kanalabs/kana-widget";

    const widgetConfig: any = {
        // Styling options for the widget container and elements within it.
        containerStyle: {
            backgroundColor: "#1E1123", // Background color of the widget container.
            primaryColor: "#130E18", // Primary color theme for the widget.
            secondaryColor: "#2c2533", // Secondary color theme for the widget.
            buttonColor: "#00fbd0", // Color for buttons within the widget.
        },
    };


export const WidgetPage = () => {
  return (
    <KanaWidget config={widgetConfig} />
  );
};