Customize TribesKit's look, feel and flow

Integrating TribesKit seamlessly into your application involves both:

  1. script integration

  2. kit configuration

Below are the steps to customize the design to match your application's look and feel.


To start, embed the following script within your HTML <head> tag:

<script src="https://kit.tribes.xyz/tribeskit.js"></script>

Upon loading, TribesKit will be attached to the window object, paving the way for interface configuration:

window.addEventListener('TribesKitLoaded', () => {
  // Define configuration options
  const config: TribesKitConfig = { "isDismissable": true }

  // Apply the configuration to TribesKit


To provide a consistent user experience, you can configure several aspects of TribesKit. Here's a brief overview:

interface TribesKitConfig {
  isDismissable: boolean;
  theme: TribesThemeConfig;

interface TribesKitThemeConfig {
  mode: TribesTheme;
  light?: BrowserThemeOverrides;
  dark?: BrowserThemeOverrides;

enum TribesTheme {
  LIGHT = "light",
  DARK = "dark",
  AUTO = "auto"

interface TribesKitThemeOverrides {
  themeColor?: string; // Hex string for Color
  bgColor?: string;    // Hex string for Color

TribesKitConfig Interface

  • isDismissable (boolean):

    • Determines if the TribesKit UI can be dismissed by the user.

    • When true, users can dismiss the UI using the 'x' button. If false, the UI remains persistent once opened.

  • theme (TribesKitThemeConfig):

    • Specifies the theme settings and potential color overrides.

TribesKitThemeConfig Interface

  • mode (TribesTheme):

    • Defines the browser's theme mode (LIGHT, DARK, or AUTO).

  • light (TribesKitThemeOverrides | undefined):

    • Overrides default light theme colors.

  • dark (TribesKitThemeOverrides | undefined):

    • Overrides default dark theme colors.

TribesTheme Enum

  • LIGHT: Opt for a light theme.

  • DARK: Opt for a dark theme.

  • AUTO: The theme automatically toggles between light and dark based on system preferences.

TribesKitThemeOverrides Interface

  • themeColor (string | undefined):

    • The primary theme color is specified as a hex string (e.g., "#FFFFFF").

    • Overrides the default theme color, if provided.

  • bgColor (string | undefined):

    • Defines the background color for the chat UI using a hex string (e.g., "#000000").

    • Overrides the default background color, if provided.

By leveraging these interfaces and configurations, developers can ensure TribesKit is functionally integrated and aesthetically aligned with their application.

Last updated