Ask or search…


Customize TribesKit's look, feel and flow
Integrating TribesKit seamlessly into your application involves both:
  1. 1.
    script integration
  2. 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=""></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.