Custom styling

The Deepdesk SDK's suggestions overlay and tab completion features are each composed of several components. Each component is composed of one or more html elements.

The components and their html elements are styled by class names and are shipped with a default styles.

The Deepdesk SDK offers a simpel interface which allows you to extend the class names with your own styling.

Each feature (eg. suggestions overlay) can take a custom styles object of which the keys are the component names.

In general each component has a root class and optionally modifier classes in the form of isFoo (eg.: isSelected). A component could also have child element classes, which in turn could contain modifier classes in the form of fooIsBar (eg.: actionButtonIsPrimary).

Suggestions overlay

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

const customStyles = {
SuggestionsOverlay: {
root: 'MySuggestionsOverlay',
isCollapsed: 'MySuggestionsOverlay--isCollapsed', // modifier on root element
collapsible: 'MySuggestionsOverlay__collapsible',
toggleButton: 'MySuggestionsOverlay__toggleButton',
hints: 'MySuggestionsOverlay__hints',
hint: 'MySuggestionsOverlay__hint',
},
SuggestionList: {
root: 'MySuggestionList'
},
Suggestion: {
root: 'MySuggestion',
isSelected: 'MySuggestion--isSelected',
isClickable: 'MySuggestion--isClickable',
actions: 'MySuggestion__actions',
actionsIsFixed: 'MySuggestion__actions--isFixed',
actionButton: 'MySuggestion__actionButton',
actionButtonIsPrimary: 'MySuggestion__actionButton--isPrimary',
actionButtonIsDisabled: 'MySuggestion__actionButton--isDisabled',
},
TextSuggestion: {
badge: 'MyTextSuggestion__badge',
formattedText: 'MyTextSuggestion__formattedText',
},
KeyboardHint: {
root: 'MyKeyboardHint',
arrowUp: 'MyKeyboardHint__arrowUp',
arrowDown: 'MyKeyboardHint__arrowDown',
tab: 'MyKeyboardHint__tab',
esc: 'MyKeyboardHint__esc',
enter: 'MyKeyboardHint__enter',
},
Label: {
root: 'MyLabel'
},
ToggleButton: {
root: 'MyToggleButton',
isCollapsed: 'MyToggleButton--isCollapsed', // modifier on root element
},
};

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

deepdeskSDK.mount(inputElement, {
suggestionsOverlay: {
customStyles
}
});

Tab completion

Example of passing class names to the tab completion components using BEM notation.

const customStyles = {
KeyboardHint: {
root: 'MyKeyboardHint',
isArrowUp: 'MyKeyboardHint--isArrowUp',
isArrowDown: 'MyKeyboardHint--isArrowDown',
isTab: 'MyKeyboardHint--isTab',
isEsc: 'MyKeyboardHint--isEsc',
isEnter: 'MyKeyboardHint--isEnter',
},
TabCompletion: {
agentText: 'MyTabCompletion__agentText',
tabText: 'MyTabCompletion__tabText',
hint: 'MyTabCompletion__hint',
}
};

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

deepdeskSDK.mount(inputElement, {
tabCompletion: {
customStyles
}
});

Widget

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

const customStyles = {
Autoflow: {
root: 'MyAutoflow',
isDisabled: 'MyAutoflow--isDisabled',
isCompleted: 'MyAutoflow--isCompleted',
isAborted: 'MyAutoflow--isAborted',
isStarted: 'MyAutoflow--isStarted',
buttonStart: 'MyAutoflow__buttonStart',
buttonStop: 'MyAutoflow__buttonStop',
stateBadge: 'MyAutoflow__stateBadge',
},
Card: {
root: 'MyCard',
imageWrapper: 'MyCard__imageWrapper',
image: 'MyCard__image',
brokenImage: 'MyCard__brokenImage',
content: 'MyCard__content',
contentIsCropped: 'MyCard__content--isCropped',
},
KeyboardHint: {
root: 'MyKeyboardHint',
isArrowUp: 'MyKeyboardHint--isArrowUp',
isArrowDown: 'MyKeyboardHint--isArrowDown',
isTab: 'MyKeyboardHint--isTab',
isEsc: 'MyKeyboardHint--isEsc',
isEnter: 'MyKeyboardHint--isEnter',
},
Label: {
root: 'MyLabel',
},
SectionList: {
root: 'MySectionList',
},
Section: {
root: 'MySection',
subTitleContainer: 'MySection__subTitleContainer',
subtitle: 'MySection__subtitle',
suggestions: 'MySection__suggestions',
},
SuggestionList: {
root: 'MySuggestionList'
},
Suggestion: {
root: 'MySuggestion',
isSelected: 'MySuggestion--isSelected',
isClickable: 'MySuggestion--isClickable',
actions: 'MySuggestion__actions',
actionsIsFixed: 'MySuggestion__actions--isFixed',
actionButton: 'MySuggestion__actionButton',
actionButtonIsPrimary: 'MySuggestion__actionButton--isPrimary',
actionButtonIsDisabled: 'MySuggestion__actionButton--isDisabled',
},
Widget: {
root: 'MyWidget',
waiting: 'MyWidget__waiting',
sectionList: 'MyWidget__sectionList',
}
};

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

deepdeskSDK.renderWidget(inputElement, {
customStyles
});