Customization | Kota Embed Documentation

Kota Hosted provides comprehensive customization options to ensure the benefits experience feels native to your platform. All customization settings are configured once during integration setup and can be updated if needed.

Branding options

Custom domain

Host the Kota experience on your own subdomain to maintain a seamless experience for your users.

Example: benefits.yourplatform.com

This ensures employees see your domain in the browser address bar throughout their benefits journey.

SSL certificates: Kota issues and manages SSL certificates for your custom domain. You’ll need to add CNAME records to your DNS configuration for domain validation - Kota will provide these records during setup.

Logo

Display your company logo throughout the Hosted experience to reinforce your brand.

Format: URL to your logo image (PNG, SVG, or JPG recommended)

Example: https://yourplatform.com/logo.png

Favicon

Set a custom favicon that appears in the browser tab.

Format: URL to your favicon file (ICO or PNG format)

Example: https://yourplatform.com/favicon.ico

Platform name

Customize the page title and meta title that appears in browser tabs and bookmarks.

Example: "Acme Benefits Portal"

Redirect URL

Configure where employees are sent when they click the return button in the header or encounter authentication errors.

Example: https://yourplatform.com/benefits

This URL is used throughout the Hosted experience to bring employees back to your platform.

Theme configuration

Customize colors, borders, and other visual elements to match your platform’s design system. All theme properties are optional - any omitted fields will use Kota’s default values.

Kota's Default Theme

Our theme uses a simple background/foreground convention for colors. For example, a primary button uses primaryColor as the background and primaryForegroundColor as the text color.

Theme properties

Property	Description	Format
primaryColor	Primary background color for buttons, badges, etc.	Hex color (e.g., `#0875E1`)
primaryForegroundColor	Text color on primary elements	Hex color
secondaryColor	Secondary background color for buttons, badges, etc.	Hex color
secondaryForegroundColor	Text color on secondary elements	Hex color
accentColor	Background/text for accents like hover effects on dropdown menus	Hex color
accentForegroundColor	Text color on accent elements	Hex color
foregroundColor	Default text color of the interface	Hex color
foregroundHeadingColour	Text color for headings	Hex color
backgroundColor	Default background color of the interface	Hex color
borderColor	Default border color	Hex color
cardColor	Background color for cards	Hex color
cardForegroundColor	Text color on cards	Hex color
destructiveColor	Color for destructive actions (e.g., delete buttons)	Hex color
destructiveForegroundColor	Text color on destructive elements	Hex color
inputColor	Border color for form inputs, selects, radio buttons	Hex color
mutedColor	Background for off states of components like tabs & switches	Hex color
mutedForegroundColor	Text color for muted elements	Hex color
popoverColor	Background color for popovers	Hex color
popoverForegroundColor	Text color in popovers	Hex color
radius	Border radius for cards, inputs, and buttons	CSS value (e.g., `12px`, `0.75rem`)
ringColor	Color of focus ring for accessibility	Hex color
warningColor	Background color for warning badges/alerts	Hex color
warningForegroundColor	Text color on warning elements	Hex color

Example theme configuration

Here’s an example of a custom theme configuration:

1 {
2   "primaryColor": "#0875E1",
3   "primaryForegroundColor": "#ffffff",
4   "backgroundColor": "#f5f5f8",
5   "radius": "12px",
6   "ringColor": "#0875E1",
7   "cardColor": "#ffffff",
8   "borderColor": "#d8dee6"
9 }

Remember, all theme properties are optional. You can provide as few or as many as needed to match your brand.

Hosted overview

Learn more about Kota Hosted integration.

Frontend integration

Implement the frontend integration in your application.