Customization via the theme object

The theme object is part of the baseSettings and can be used to customize the widgets to fit your brand’s style.

Fonts

Specify which fonts should be applied to the body, headings, or code (mono) elements. For example:

 theme: {
    tokens: {
      fonts: {
        heading: "'Space Grotesk'",
        body: "'Inter'",
        mono: "'Space Mono', monospace",
      },
    },
  }

Colors

The widget ships with a neutral gray scheme and derives accent colors from the primardBrandColor (passed into baseSettings), but these colors can be overridden with your own colors if you wish. Here is an example:

 theme: {
    tokens: {
      colors: {
        // grays for light mode
        'gray.50': '#f8f9fa',
        'gray.100': '#f1f3f5',
        'gray.200': '#eceef0',
        'gray.300': '#e6e8eb',
        'gray.400': '#dfe3e6',
        'gray.500': '#BDC2C7',
        'gray.600': '#889096',
        'gray.700': '#687076',
        'gray.800': '#36424A',
        'gray.900': '#11181c',
        // grays for dark mode
        'grayDark.50': '#ededed',
        'grayDark.100': '#a0a0a0',
        'grayDark.200': '#7e7e7e',
        'grayDark.300': '#707070',
        'grayDark.400': '#505050',
        'grayDark.500': '#3e3e3e',
        'grayDark.600': '#343434',
        'grayDark.700': '#2e2e2e',
        'grayDark.800': '#282828',
        'grayDark.900': '#1c1c1c',
      },
    },
    // derived from primaryBrandColor
    primaryColors: {
      textColorOnPrimary: '#11181c',
      textBold: '#141d20',
      textSubtle: '#354a51',
      lighter: '#e5feff',
      light: '#85f0ff',
      lightSubtle: '#f1f8fa',
      medium: '#26d6ff', // primaryBrandColor
      strong: '#00b5dd',
      stronger: '#006881',
      hitContentPreview: '#00b5dd',
      hitContentPreviewHover: '#006881',
      textColorOnPrimary: 'white',
    },
  }

Z-indices

Customizing the zIndex tokens is usually not necessary but can be helpful if there is an element on your site with a high z-index that is being rendered on top of one of the widgets or modal. Below are the default token values. It is a good idea to update the rest of z-index tokens relative to the one you need to change, for example if changing modal to 2000 make sure to also bump popover to 2100, skipLink to 2200 etc.

 theme: {
    tokens: {
      zIndex: {
        hide: -1,
        auto: 'auto',
        base: 0,
        docked: 10,
        dropdown: 1000,
        sticky: 1100,
        banner: 1200,
        overlay: 1300,
        modal: 1400,
        popover: 1500,
        skipLink: 1600,
        toast: 1700,
        tooltip: 1800,
      },
    }
  }

Component variants

The Search Bar component has two variants to chose from subtle and emphasized, the default is subtle. There are also four size variants to chose from expand, compact, shrink, or medium, the default is compact. The Docusaurus package defaults to shrink.

To change the variant and size:

 theme: {
    components: {
      SearchBarTrigger: {
        defaultProps: {
          size: 'expand', // 'expand' 'compact' 'shrink' 'medium'
          variant: 'emphasized', // 'emphasized' 'subtle'
        },
      },
    }
  }

Embedded Chat

The Embedded Chat component has two variants: container-with-shadow and no-shadow, the default is container-with-shadow. There are also four size variants: shrink-vertically, expand, default, or full-viewport, the default is default.

To change the variant and size:

 theme: {
    components: {
      AIChatPageWrapper: {
        defaultProps: {
          size: 'shrink-vertically', // 'shrink-vertically' 'expand' 'default' 'full-viewport'
          variant: 'no-shadow', // 'no-shadow' or 'container-with-shadow'
        },
      },
    }
  }

Centering and sizing an embedded chat

Below are examples of how to set the size and center the widget relative to the parent. The examples show inline styles, but you can use any styling solution.

With a display='block' parent

<div style={{ // parent
    display: 'block',
    position: 'relative',
    height: 'calc(100vh - 16px)',
  }}>
  <div style={{ // container
    maxHeight: '600px',
    height: '100%',
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%,-50%)',
  }}>
    <EmbeddedChat {...embeddedChatProps} />
  <div> 
</div>

With a display='flex' parent

<div style={{ // parent
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: 'calc(100vh - 16px)',
  }}>
  <div style={{ // container 
    maxHeight: '600px',
    height: '100%',
   }}> 
    <EmbeddedChat {...embeddedChatProps} />
  <div> 
</div>

Customizing dimensions (using size='expand')

<div style={{ // parent
    minHeight: '600px',
    height: 'calc(100vh - 16px)',
  }}>
  <div style={{ // container
    maxWidth: '750px',
    maxHeight: '600px',
    height: '100%',
    width: '100%',
    minWidth: '0px',
   }}> 
    <EmbeddedChat {...embeddedChatProps} />
  <div> 
</div>

Syntax highlighting theme

By default, the Prism syntax highlighting theme we use is oneLight in light mode and vsDark in dark mode. If you wish to use a different theme you can pass it in the syntaxHighlighter prop in the theme.

For example to use the dracula highlighting theme:

import { themes } from 'prism-react-renderer';

const inkeepProps = {
  theme: {
    syntaxHighlighter: {
      lightTheme: themes.dracula, // theme used in light mode
      darkTheme: themes.dracula, // theme used in dark mode
    },
  },
}

The Prism theme is a JS object, so you may write your own theme if you wish.

Dark mode

Controlling the color mode

By default, the widgets will be rendered in light mode, to change the color mode use the forcedColorMode prop in the colorMode object of the baseSettings.

 baseSettings: {
    colorMode: {
      forcedColorMode: 'dark', // options: 'light' or dark'
    }
  }

System color mode

To use the user’s system preference color mode, set the enableSystem prop to true (by default it is false) in the colorMode object of the baseSettings.

 baseSettings: {
    colorMode: {
      enableSystem: true,
    }
  }

Style overrides

Additional customization can be done via CSS stylesheets. Any custom styling must be passed to the widget component in order for them to be applied.

stylesheetUrls prop

To pass the url(s) of the stylesheet(s) (urls can be relative or absolute):

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  stylesheetUrls: ['/path-to-my-stylesheet.css'],
  baseSettings: {
    ...baseSettings,
  },
  aiChatSettings: {
    // ... typeof InkeepAIChatSettings
  },
};

stylesheets prop

Alternatively if using React, you may also pass an array of <link> or <style> tags, ensure that each element has a unique key. For example:

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  stylesheets: [<link key="my-stylesheet-key" rel="stylesheet" href="path-to-my-stylesheet.css" />],
  baseSettings: {
    ...baseSettings,
  },
  aiChatSettings: {
    // ... typeof InkeepAIChatSettings
  },
};

Next.js example

If using Next.js, you can create a css file within the public folder and then pass that url to the stylesheetUrls prop. For example:

// for this example there is a file in the public folder is called inkeep.css

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  stylesheetUrls: ['/inkeep.css'],
  baseSettings: {
    ...baseSettings,
  },
  aiChatSettings: {
    // ... typeof InkeepAIChatSettings
  },
};

Gatsby example

If using Gatsby, you can create a static folder in the root of your project, then create a css file for the Inkeep widget style overrides, this will then get copied to the public folder, then you can pass the url to the stylesheetUrls prop. For example:

// for this example there is a file in the static folder is called inkeep.css

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  stylesheetUrls: ['/inkeep.css'],
  baseSettings: {
    ...baseSettings,
  },
  aiChatSettings: {
    // ... typeof InkeepAIChatSettings
  },
};

Using Inkeep CSS variables

Inkeep CSS variables can be utilized within stylesheets to customize elements. For example, the Chat Button uses a dark gray color by default. You can use the .ikp-floating-button and any of the pre-defined theme color tokens or any color of your choice to customize it:

.ikp-floating-button {
  background: var(--ikp-colors-inkeep-primary-medium);
}

Dark mode style overrides

To apply a specific style for dark mode only, utilize the [data-theme='dark'] attribute. For example:

[data-theme='dark']  .ikp-floating-button {
  background: #353e52;
}

Class names

Below is a list of class names and their corresponding component part:

Main widget containers

classNameElement
.ikp-ai-chat-page-wrapperEmbeddedChat
.ikp-search-bar-trigger__containerSearchBar
.ikp-floating-buttonChatButton
.ikp-modal-widget__containerModal
classNameElement
.ikp-search-bar-trigger__wrappersearch bar trigger
.ikp-search-bar-trigger__containersearch bar trigger
.ikp-search-bar-trigger__iconsearch bar trigger
.ikp-search-bar-trigger__kbdsearch bar trigger
.ikp-search-bar-stand-alone__search-inputsearch bar modal
.ikp-search-bar-stand-alonesearch bar modal
.ikp-switch-to-chat-buttonsearch bar modal
.ikp-search-result-tabssearch results
.ikp-search-result-tabs__listsearch results
.ikp-search-result-tabsearch results
.ikp-search-result-tabsearch results
.ikp-search-result-tab__contentsearch results
.ikp-taglinesearch footer

AI chat

classNameElement
.ikp-ai-chat-page-wrapperai chat
.ikp-ai-chat__scrollable-page-wrapperai chat
.ikp-ai-chat__headerai chat
.ikp-ai-chat__header-toolbarai chat
.ikp-ai-chat__scrollable-page-contentai chat
.ikp-ai-chat__scrollable-page-content__innerai chat
.ikp-messages__wrappermessages
.ikp-messages__errormessages
.ikp-message__wrappermessage
.ikp-message__divider-wrappermessage
.ikp-message__dividermessage
.ikp-chat-bubble__wrapperchat bubble
.ikp-chat-bubble__user-messagechat bubble (user)
.ikp-chat-bubble__bot-messagechat bubble (bot)
.ikp-chat-bubble__message-content-wrapperchat bubble
.ikp-chat-bubble__user-message-content-wrapperchat bubble
.ikp-chat-bubble__user-message-contentchat bubble
.ikp-chat-bubble__message-actionschat bubble
.ikp-chat-bubble__message-actions-copychat bubble
.ikp-thumbs-up-down__wrapperthumbs up and down
.ikp-thumbs-up__buttonthumbs up and down
.ikp-thumbs-down__buttonthumbs up and down
.ikp-message-headerai chat
.ikp-message-header__avatar-boxai chat
.ikp-bot-avatar__boxai chat
.ikp-quick-questions__labelquick questions
.ikp-quick-question-button__wrapperquick questions
.ikp-quick-question-button__highlightquick questions
.ikp-quick-question-buttonquick questions
.ikp-ai-chat__disclaimerdisclaimer
.ikp-ai-chat__disclaimer-labeldisclaimer
.ikp-disclaimer-icondisclaimer
.ikp-ai-chat-footer__content-wrapperchat footer
.ikp-ai-chat-footer__contentchat footer
.ikp-ai-chat-footerchat footer
.ikp-ai-chat-footer__footerchat footer
.ikp-ai-chat__message-boxchat footer
.ikp-ai-chat__message-box-wrapperchat footer
.ikp-ai-chat__message-inputchat footer
.ikp-ai-chat__send-buttonchat footer
.ikp-taglinechat footer
.ikp-get-help__buttonget help
.ikp-get-help__menuget help
.ikp-get-help__menu-itemget help
.ikp-get-help__menu-item-linkget help
.ikp-ai-chat__toolbarai chat modal
.ikp-ai-chat__toolbar-headerai chat modal
.ikp-switch-to-search-buttonai chat modal
.ikp-citation-sources-headerai chat
.ikp-result-cardresult card
.ikp-result-card__containerresult card
.ikp-result-card__bodyresult card
.ikp-result-card__contentresult card
.ikp-result-card__iconai chat
.ikp-result-card__hover-iconai chat
.ikp-search-result-line__firstresult card
.ikp-search-result-line__secondresult card
.ikp-bread-crumb-separatorresult card
.ikp-codeblock-containercode block
.ikp-codeblock-headercode block
.ikp-codeblock-header__language-wrappercode block
.ikp-codeblock-header__languagecode block
.ikp-codeblock-header__copy-button-wrappercode block
.ikp-codeblock-header__copy-buttoncode block
.ikp-codeblock-highlighter-wrappercode block
.ikp-codeblock-highlightercode block
.ikp-content-parser__supmessage content
.ikp-content-parser__sup-linkmessage content
.ikp-content-parser__textmessage content
.ikp-content-parser__olmessage content
.ikp-content-parser__limessage content
.ikp-content-parser__codemessage content
.ikp-loading__dotsai chat
.ikp-loading__dotai chat
.ikp-loading__status-textai chat

Chat button

classNameElement
.ikp-floating-buttonchat button
.ikp-floating-button-boxchat button
.ikp-chat-button__textchat button
.ikp-bot-avatar__boxchat button
classNameElement
.ikp-modal-widget__containermodal container
.ikp-modal-widget__contentmodal content
.ikp-modal__backdropmodal overlay