See it in action About Tribes

🎛️Configuration

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.

Integration

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:

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

  // Apply the configuration to TribesKit
  window.tribes.setup(config);
});
</script>

Configuration

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.

PreviousQuickstart GuideNextAPI Reference

Last updated