Customize the look of RECAP
As part of the Enterprise Edition, we provide the ability to easily customize the look of RECAP. This comes in two forms:
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.
RECAP also has some advanced customization options
Chat Header Content Custom Markdown content that will be displayed as a banner at the top of the Chat page.
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 Content Custom Markdown content that will be displayed as a popup on initial visit to the application.
Chat Footer Text Custom Markdown content that will be displayed at the bottom of the Chat page.
RECAP uses Tailwind CSS for theming. The color palette is defined in two main files:
web/tailwind-themes/tailwind.config.js
: This file contains the base Tailwind configuration, including color definitions.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:
web/src/app/globals.css
To choose specific colors for a given set of UI elements, you can:
web/tailwind-themes/tailwind.config.js
.tailwind.config.js
file.Alternatively, to customize all these colors, you can:
web/tailwind-themes
.tailwind.config.js
file in this new folder.tailwind.config.js
file.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:
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.
Customize the look of RECAP
As part of the Enterprise Edition, we provide the ability to easily customize the look of RECAP. This comes in two forms:
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.
RECAP also has some advanced customization options
Chat Header Content Custom Markdown content that will be displayed as a banner at the top of the Chat page.
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 Content Custom Markdown content that will be displayed as a popup on initial visit to the application.
Chat Footer Text Custom Markdown content that will be displayed at the bottom of the Chat page.
RECAP uses Tailwind CSS for theming. The color palette is defined in two main files:
web/tailwind-themes/tailwind.config.js
: This file contains the base Tailwind configuration, including color definitions.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:
web/src/app/globals.css
To choose specific colors for a given set of UI elements, you can:
web/tailwind-themes/tailwind.config.js
.tailwind.config.js
file.Alternatively, to customize all these colors, you can:
web/tailwind-themes
.tailwind.config.js
file in this new folder.tailwind.config.js
file.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:
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.