DeepdeskSDK

Appearance

On this page

Input, Search & Dialogs ​

Add custom styling to the agent input (the tab completion and suggestions overlay), the Search bar and the Dialogs.

Configuring the custom styles ​

The custom styles object is passed as argument when mounting the DeepdeskSDK:

js
deepdeskSDK.mount(inputElement, {
    customStyles
});

Components and class names ​

Example of passing class names to the suggestions overlay components using BEM notation.

js
const customStyles = {
    /**
     * Adds class to root node of the tab completion overlay
     */
    rootNode: 'exampleRootNode',
    portalRootNode: 'examplePortalRootNode',
    /**
     * Adds class to root node of the suggestions overlay
     */
    suggestionsRootNode: 'exampleSuggestionsRootNode',
    CommandPalette: {
        root: 'exampleCommandPalette',
        list: 'exampleCommandPalette__list',
        listWrapper: 'exampleCommandPalette__listWrapper',
        listHorizontal: 'exampleCommandPalette__listHorizontal',
        page: 'exampleCommandPalette__page',
        pageNav: 'exampleCommandPalette__page',
        pageBackButton: 'exampleCommandPalette__page',
        listHeading: 'exampleCommandPalette__listHeading',
        listItem: 'exampleCommandPalette__listItem',
        listItemContent: 'exampleCommandPalette__listItemContent',
        listItemText: 'exampleCommandPalette__listItemText',
        listItemDescription: 'exampleCommandPalette__listItemDescription',
        truncate: 'exampleCommandPalette__truncate',
        lineClamp: 'exampleCommandPalette__lineClamp',
        listItemTitle: 'exampleCommandPalette__listItemTitle',
        listItemAction: 'exampleCommandPalette__listItemAction',
        listItemSelected: 'exampleCommandPalette__listItemSelected',
        sources: 'exampleCommandPalette__sources',
        sourcesTitle: 'exampleCommandPalette__sourcesTitle',
        source: 'exampleCommandPalette__source',
        icon: 'exampleCommandPalette__icon',
        search: 'exampleCommandPalette__search',
        searchIcon: 'exampleCommandPalette__searchIcon',
        searchInputWrapper: 'exampleCommandPalette__searchInputWrapper',
        searchInput: 'exampleCommandPalette__searchInput',
        select: 'exampleCommandPalette__select',
        selectType: 'exampleCommandPalette__selectType',
        selectWrapper: 'exampleCommandPalette__selectWrapper',
        image: 'exampleCommandPalette__image',
        imageSrc: 'exampleCommandPalette__imageSrc',
        imageTitle: 'exampleCommandPalette__imageTitle',
        actions: 'exampleCommandPalette__actions',
        actionsWrapper: 'exampleCommandPalette__actionsWrapper',
        actionsBar: 'exampleCommandPalette__actionsBar',
        actionButton: 'exampleCommandPalette__actionButton',
        actionShortcut: 'exampleCommandPalette__actionShortcut',
        actionShortcutFixKerning: 'exampleCommandPalette__actionShortcutFixKerning',
    },
    Dialog: {
        root: 'exampleDialog',
        content: 'exampleDialog__content',
    },
    EditSuggestionForm: {
        root: 'exampleEditSuggestionForm',
        content: 'exampleEditSuggestionForm__content',
        title: 'exampleEditSuggestionForm__title',
        actions: 'exampleEditSuggestionForm__actions',
        pagination: 'exampleEditSuggestionForm__pagination',
        primaryButton: 'exampleEditSuggestionForm__primaryButton',
        primaryButtons: 'exampleEditSuggestionForm__primaryButtons',
    },
    EntitiesList: {
        root: 'exampleEntitiesList',
        title: 'exampleEntitiesList__title',
        empty: 'exampleEntitiesList__empty',
    },
    Label: {
        root: 'exampleLabel'
    },
    Chip: {
        root: 'exampleChip',
    },
    Login: {
        root: 'exampleLogin',
        anchor: 'exampleLogin__anchor',
        anchorButton: 'exampleLogin__anchorButton',
    },
    SearchTrigger: {
        root: 'exampleSearchTrigger',
        text: 'exampleSearchTrigger__text',
    },
    Suggestion: {
        root: 'exampleSuggestion',
        fadein: 'exampleSuggestion--fadein',
        isSelected: 'exampleSuggestion--isSelected',
        isClickable: 'exampleSuggestion--isClickable',
        actions: 'exampleSuggestion__actions',
        actionsIsFixed: 'exampleSuggestion__actions--isFixed',
        actionButton: 'exampleSuggestion__actionButton',
        actionButtonIsPrimary: 'exampleSuggestion__actionButton--isPrimary',
        actionButtonIsDisabled: 'exampleSuggestion__actionButton--isDisabled',
        dropdownList: 'exampleSuggestion__dropdownList',
        dropdownButton: 'exampleSuggestion__dropdownButton',
        dropdownItem: 'exampleSuggestion__dropdownItem',
        dropdownItemButton: 'exampleSuggestion__dropdownItemButton',
        label: 'exampleSearchTrigger__label',
        labels: 'exampleSearchTrigger__labels',
    },
    SuggestionList: {
        root: 'exampleSuggestionList',
        isWithDivider: 'exampleSuggestionList--isWithDivider'
    },
    SuggestionsOverlay: {
        root: 'exampleSuggestionsOverlay',
        isInline: 'exampleSuggestionsOverlay--isInline',
        isCollapsed: 'exampleSuggestionsOverlay--isCollapsed',
        toggleButton: 'exampleSuggestionsOverlay__toggleButton',
        toggleButtonWrapper: 'exampleSuggestionsOverlay__toggleButtonWrapper',
        toggleButtonWrapperHidden: 'exampleSuggestionsOverlay__toggleButtonWrapperHidden',
        collapsible: 'exampleSuggestionsOverlay__collapsible',
        hints: 'exampleSuggestionsOverlay__hints',
        hintsHidden: 'exampleSuggestionsOverlay__hintsHidden',
        triggers: 'exampleSuggestionsOverlay__triggers',
        triggersRight: 'exampleSuggestionsOverlay__triggersRight',
    },
    TextSuggestion: {
        badge: 'exampleTextSuggestion__badge',
        formattedText: 'exampleTextSuggestion__formattedText',
    },
    KeyboardHint: {
        root: 'exampleKeyboardHint',
    },
    ToggleButton: {
        root: 'exampleToggleButton',
        isCollapsed: 'exampleToggleButton--isCollapsed', // modifier on root element
    },
    TabCompletion: {
        root: 'exampleTabCompletion',
        container: 'exampleTabCompletion__container',
        agentText: 'exampleTabCompletion__agentText',
        tabText: 'exampleTabCompletion__tabText',
        hint: 'exampleTabCompletion__hint',
        focus: 'exampleTabCompletion__focus',
        resetIndent: 'exampleTabCompletion__resetIndent',
        matchSelection: 'exampleTabCompletion__matchSelection',
        matchKeyword: 'exampleTabCompletion__matchKeyword',
        matchPlaceholder: 'exampleTabCompletion__matchPlaceholder',
        hover: 'exampleTabCompletion__hover',
        hintText: 'exampleTabCompletion__hintText',
        popover: 'exampleTabCompletion__popover',
        popoverRoot: 'exampleTabCompletion__popoverRoot',
        popoverContentContainer: 'exampleTabCompletion__popoverContentContainer',
        popoverContent: 'exampleTabCompletion__popoverContent',
        selectionOptions: 'exampleTabCompletion__selectionOptions',
        selectionOptionsIsHidden: 'exampleTabCompletion__selectionOptionsIsHidden',
        selectionOptionsButton: 'exampleTabCompletion__selectionOptionsButton',
        caret: 'exampleTabCompletion__caret',
        popoverSuggestionsRoot: 'exampleTabCompletion__popoverSuggestionsRoot',
        suggestionsOverlayInputStyles: 'exampleTabCompletion__suggestionsOverlayInputStyles',
    },
};

CSS variables ​

Note that on the TabCompletion root has the following css variables set inline:

  • --dd-color
  • --dd-font-size
  • --dd-font-family
  • --dd-font-variant

These variables are the computed style values of the agent input field where the DeepdeskSDK is mounted. So --dd-color contains the computed css color value of the agent input, and so on.

You could use the TabCompletion container class name to override these values.