As part of the Enterprise Edition, we provide the ability to easily customize the look of RECAP. This comes in two forms:

  1. Adding in your own custom application name / logo.
  2. Customizing every color in the UI.

To provide your own application name / logo, you can use the Whitelabelling tab in the admin panel. Here, we provide a way to input a name of your choice, as well as an optional logo.

​
Advanced Options

RECAP also has some advanced customization options

  1. Chat Header Content Custom Markdown content that will be displayed as a banner at the top of the Chat page.

  2. Popup Header The title for the popup that will be displayed for each user on their initial visit to the application. If left blank AND Custom Popup Content is specified, will use “Welcome to [Application Name]!” where application name is your filled in application name. Popup Header

  3. Popup Content Custom Markdown content that will be displayed as a popup on initial visit to the application.

  4. Chat Footer Text Custom Markdown content that will be displayed at the bottom of the Chat page.

Chat Footer

  1. Chat Footer Logotype Add a custom logotype by uploading a new image and clicking the Update button. This logotype is the text-based logo that will be rendered at the bottom right of the chat screen.

Chat Footer Logotype

​
Customizing Colors

RECAP uses Tailwind CSS for theming. The color palette is defined in two main files:

  1. web/tailwind-themes/tailwind.config.js: This file contains the base Tailwind configuration, including color definitions.
  2. web/src/app/globals.css: This file defines CSS variables for colors, which are then used in the Tailwind config.

To customize the color palette of RECAP, you can:

  1. Navigate to web/src/app/globals.css
  2. Customize the base color palette (for example, create different accent colors, background colors, etc.)

To choose specific colors for a given set of UI elements, you can:

  1. Navigate to web/tailwind-themes/tailwind.config.js.
  2. Override any values specified in the base tailwind.config.js file.

Alternatively, to customize all these colors, you can:

  1. Navigate to web/tailwind-themes.
  2. Create a new folder with the name of your organization.
  3. Create a tailwind.config.js file in this new folder.
  4. Override any values specified in the base tailwind.config.js file.
  5. Set NEXT_PUBLIC_THEME to the name of your organization (e.g. the same name as the folder you created in step 2).

For example, if you wanted to make the background black, you could use:

/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    extend: {
      colors: {
        "background": "#000000",
      },
    },
  },
};

NOTE: for these changes to apply, you will need to build RECAP from source. If testing locally, you will need to restart the NextJS application to apply the changes.