DeepdeskSDK

Appearance

On this page

Widget ​

Configuring the custom styles ​

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

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

Components and class names ​

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

js
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',
        title: 'myCard__title',
        content: 'myCard__content',
        contentIsCropped: 'myCard__content--isCropped',
    },
    KeyboardHint: {
        root: 'myKeyboardHint',
    },
    Label: {
        root: 'myLabel',
    },
    Login: {
        root: 'myLogin',
        anchor: 'myLogin__anchor',
        anchorButton: 'myLogin__anchorButton',
    },
    Markdown: {
        root: 'myMarkdown',
        popover: 'myMarkdown__popover',
        options: 'myMarkdown__options',
        arrow: 'myMarkdown__arrow',
        copyIcon: 'myMarkdown__copyIcon',
        option: 'myMarkdown__option',
        divider: 'myMarkdown__divider',
        fadeup: 'myMarkdown__fadeup',
    },
    Section: {
        root: 'mySection',
        subTitleContainer: 'mySection__subTitleContainer',
        subtitle: 'mySection__subtitle',
        suggestions: 'mySection__suggestions',
    },
    SectionList: {
        root: 'mySectionList',
    },
    Suggestion: {
        root: 'mySuggestion',
        fadein: 'mySuggestion--fadein',
        isSelected: 'mySuggestion--isSelected',
        isClickable: 'mySuggestion--isClickable',
        actions: 'mySuggestion__actions',
        actionsIsFixed: 'mySuggestion__actions--isFixed',
        actionButton: 'mySuggestion__actionButton',
        actionButtonIsPrimary: 'mySuggestion__actionButton--isPrimary',
        actionButtonIsDisabled: 'mySuggestion__actionButton--isDisabled',
        dropdownList: 'mySuggestion__dropdownList',
        dropdownButton: 'mySuggestion__dropdownButton',
        dropdownItem: 'mySuggestion__dropdownItem',
        dropdownItemButton: 'mySuggestion__dropdownItemButton',
        label: 'mySearchTrigger__label',
        labels: 'mySearchTrigger__labels',
        buttonsContainer: '.mySuggestion__buttons',
        button: '.mySuggestion__button',
        buttonWithIcon: '.mySuggestion__button--withIcon',
        buttonDisabled: '.mySuggestion__button--disabled',
    },
    SuggestionList: {
        root: 'mySuggestionList',
    },
    Widget: {
        root: 'myWidget',
        loginText: 'myWidget__loginText',
        stateText: 'myWidget__stateText',
        sectionList: 'myWidget__sectionList',
        shortcutList: 'myWidget__shortcutList',
        shortcut: 'myWidget__shortcut',
    },
    EntitiesWidgetList: {
        root: 'myEntitiesWidgetList',
        entity: 'myEntitiesWidgetList__entity',
        entityText: 'myEntitiesWidgetList__entityText',
        iconWrapper: 'myEntitiesWidgetList__iconWrapper',
        icon: 'myEntitiesWidgetList__icon',
        iconClicked: 'myEntitiesWidgetList__icon--clicked',
    },
    WidgetCustomData: {
        root: 'myWidgetCustomData',
        label: 'myWidgetCustomData__label',
        value: 'myWidgetCustomData__value',
        isTrue: 'myWidgetCustomData__value--isTrue',
        isFalse: 'myWidgetCustomData__value--isFalse',
    },
};