Type Alias MessagingUiTheme

The theme configuration for the Messaging UI.

type MessagingUiTheme = {
    actionButtons?: {
        attachmentsButton?: IconButtonConfig;
        emojiButton?: IconButtonConfig;
        locationButton?: IconButtonConfig;
        sendButton?: IconButtonConfig;
    };
    attachmentMenu?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        fileIconSource?: string;
        fontConfig?: FontConfig;
        imageIconSource?: string;
        itemHoverBackgroundColor?: CSSProperties["backgroundColor"];
    };
    brandDetails?: {
        fontFamily?: CSSProperties["fontFamily"];
        logoSource?: string;
    };
    brandPane?: {
        banner?: { fontConfig?: FontConfig };
        brandNameFont?: FontConfig;
    };
    connectionStatusBar?: {
        backgroundColors?: Partial<
            Record<ConnectionState, CSSProperties["backgroundColor"]>,
        >;
        borderColors?: Partial<
            Record<ConnectionState, CSSProperties["borderColor"]>,
        >;
        fontColors?: Partial<Record<ConnectionState, CSSProperties["color"]>>;
        iconSources?: { connected?: string; retryConnection?: string };
        show?: boolean;
    };
    endConversationDialog?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        border?: CSSProperties["border"];
        cancelButton?: ButtonConfig;
        cornerRadius?: CSSProperties["borderRadius"];
        description?: FontConfig;
        endConversationButton?: ButtonConfig;
        title?: FontConfig;
    };
    errorBoundary?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        iconSource?: string;
        subtitleFont?: FontConfig;
        titleFont?: FontConfig;
    };
    messageBubble?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        border?: CSSProperties["border"];
        borderRadius?: CSSProperties["borderRadius"];
        iconSource?: string;
        teaser?: {
            backgroundColor?: CSSProperties["backgroundColor"];
            closeButton?: { color?: CSSProperties["color"]; iconSource?: string };
            textColor?: CSSProperties["color"];
        };
    };
    messages?: {
        agent?: ParticipantMessage & {
            carousel?: {
                contentFont?: FontConfig;
                currentSlideIndicatorColor?: CSSProperties["backgroundColor"];
                headingFont?: FontConfig;
                linkButtons?: ButtonConfig;
                nextIconSource?: string;
                postBackButtons?: ButtonConfig;
                previousIconSource?: string;
                slideIndicatorColor?: CSSProperties["backgroundColor"];
            };
            composite?: {
                linkButtons?: ButtonConfig;
                locationRequest?: { button?: ButtonConfig; iconSource?: string };
                postBackButtons?: ButtonConfig;
                quickReplyButtons?: QuickReplyButtonConfig;
            };
        };
        common?: {
            attachment?: {
                attachmentIconSources?: Partial<Record<SupportedIconTypes, string>>;
                attachmentSizeFont?: FontConfig;
                discardAttachmentIconSource?: string;
                downloadIconSource?: string;
                failedIconSource?: string;
                fallbackAttachmentIconSource?: string;
                fontConfig?: FontConfig;
                uploadingSpinnerSource?: string;
            };
        };
        customer?: ParticipantMessage & {
            retrySendIconSource?: string;
            statusIndicators?: {
                deliveredSource?: string;
                failedSource?: string;
                pendingSource?: string;
                sentSource?: string;
            };
        };
        fontConfig?: FontConfig;
    };
    messagingWindow?: {
        accentColor?: CSSProperties["background"];
        backgroundColor?: CSSProperties["background"];
        borderRadius?: CSSProperties["borderRadius"];
        endConversationButton?: { iconSource: string; show?: boolean };
        minimizeButton?: { iconSource: string; show?: boolean };
        notificationsButton?: {
            iconSources?: {
                hasNotifications?: string;
                noNotifications?: string;
                viewingNotifications?: string;
            };
            show?: boolean;
        };
        scrollBarColor?: CSSProperties["backgroundColor"];
        title?: { fontConfig?: FontConfig };
    };
    notifications?: {
        fontConfig?: FontConfig;
        showParticipantJoined?: Partial<Record<ParticipantType, boolean>>;
        showParticipantLeft?: Partial<Record<ParticipantType, boolean>>;
    };
    notificationsPane?: {
        backgroundColors?: Partial<
            Record<NotificationType, CSSProperties["backgroundColor"]>,
        >;
        borderColors?: Partial<
            Record<NotificationType, CSSProperties["borderColor"]>,
        >;
        discardNotificationIconSource?: string;
        fontConfig?: FontConfig;
        iconSources?: Partial<Record<NotificationType, string>>;
        noNotificationsIconSource?: string;
        paneBackground?: CSSProperties["background"];
        paneBorder?: CSSProperties["border"];
    };
    participants?: {
        avatarSource?: Partial<Record<ParticipantType, ParticipantAvatar>>;
        participantList?: {
            backgroundColor?: CSSProperties["backgroundColor"];
            borderRadius?: CSSProperties["borderRadius"];
            iconBackground?: CSSProperties["backgroundColor"];
            iconHoverBackground?: CSSProperties["backgroundColor"];
            iconSource?: string;
            participantNameFont?: FontConfig;
            show?: boolean;
        };
    };
    postConversationActions?: {
        downloadTranscriptButton?: ButtonConfig;
        printConversationButton?: ButtonConfig;
        startNewConversationButton?: ButtonConfig;
    };
    textInput?: {
        activeBackgroundColor: CSSProperties["backgroundColor"];
        activeBorder?: CSSProperties["border"];
        backgroundColor?: CSSProperties["backgroundColor"];
        border?: CSSProperties["border"];
        borderRadius?: CSSProperties["borderRadius"];
        fontConfig?: FontConfig;
    };
    typingIndicator?: {
        animation?: { indicatorColor?: CSSProperties["backgroundColor"] };
        participantAvatars?: { show?: boolean };
        typingText?: {
            fontConfig?: FontConfig;
            participantNames?: { show?: boolean };
        };
    };
}

Index

Properties

actionButtons? attachmentMenu? brandDetails? brandPane? connectionStatusBar? endConversationDialog? errorBoundary? messageBubble? messages? messagingWindow? notifications? notificationsPane? participants? postConversationActions? textInput? typingIndicator?

Properties

`Optional`actionButtons

actionButtons?: {
    attachmentsButton?: IconButtonConfig;
    emojiButton?: IconButtonConfig;
    locationButton?: IconButtonConfig;
    sendButton?: IconButtonConfig;
}

`Optional`attachmentMenu

attachmentMenu?: {
    backgroundColor?: CSSProperties["backgroundColor"];
    fileIconSource?: string;
    fontConfig?: FontConfig;
    imageIconSource?: string;
    itemHoverBackgroundColor?: CSSProperties["backgroundColor"];
}

`Optional`brandDetails

brandDetails?: { fontFamily?: CSSProperties["fontFamily"]; logoSource?: string }

`Optional`brandPane

brandPane?: { banner?: { fontConfig?: FontConfig }; brandNameFont?: FontConfig }

`Optional`connectionStatusBar

connectionStatusBar?: {
    backgroundColors?: Partial<
        Record<ConnectionState, CSSProperties["backgroundColor"]>,
    >;
    borderColors?: Partial<
        Record<ConnectionState, CSSProperties["borderColor"]>,
    >;
    fontColors?: Partial<Record<ConnectionState, CSSProperties["color"]>>;
    iconSources?: { connected?: string; retryConnection?: string };
    show?: boolean;
}

`Optional`endConversationDialog

endConversationDialog?: {
    backgroundColor?: CSSProperties["backgroundColor"];
    border?: CSSProperties["border"];
    cancelButton?: ButtonConfig;
    cornerRadius?: CSSProperties["borderRadius"];
    description?: FontConfig;
    endConversationButton?: ButtonConfig;
    title?: FontConfig;
}

`Optional`errorBoundary

errorBoundary?: {
    backgroundColor?: CSSProperties["backgroundColor"];
    iconSource?: string;
    subtitleFont?: FontConfig;
    titleFont?: FontConfig;
}

`Optional`messageBubble

messageBubble?: {
    backgroundColor?: CSSProperties["backgroundColor"];
    border?: CSSProperties["border"];
    borderRadius?: CSSProperties["borderRadius"];
    iconSource?: string;
    teaser?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        closeButton?: { color?: CSSProperties["color"]; iconSource?: string };
        textColor?: CSSProperties["color"];
    };
}

Type Declaration

OptionalbackgroundColor?: CSSProperties["backgroundColor"]
Optionalborder?: CSSProperties["border"]
OptionalborderRadius?: CSSProperties["borderRadius"]
OptionaliconSource?: string
Optionalteaser?: {
    backgroundColor?: CSSProperties["backgroundColor"];
    closeButton?: { color?: CSSProperties["color"]; iconSource?: string };
    textColor?: CSSProperties["color"];
}
Visual configuration for the Bubble Teaser — the small message preview that animates next to the minimized chat bubble during proactive engagement.

Server values arrive via the /config themes payload as bubbleTeaserBackgroundColor / bubbleTeaserTextColor and are mapped into this teaser sub-config during the admin theme merge.
- OptionalbackgroundColor?: CSSProperties["backgroundColor"]
  Background color of the teaser bubble. Default: #FFFFFF.
- OptionalcloseButton?: { color?: CSSProperties["color"]; iconSource?: string }
  Close ("dismiss") affordance for the teaser. Client-side only — these are NOT part of the admin /config themes payload (the admin merge only maps bubbleTeaserBackgroundColor / bubbleTeaserTextColor). Consumers may override via a client theme.
  - Optionalcolor?: CSSProperties["color"]
    Color of the close icon. Defaults to the teaser textColor.
  - OptionaliconSource?: string
    Icon for the close button. Accepts a Neo icon class (e.g. neo-icon-close) or an image URL, matching CustomIcon. Default: neo-icon-close.
- OptionaltextColor?: CSSProperties["color"]
  Text color of the teaser bubble. Default: #1F3A68.

`Optional`messages

messages?: {
    agent?: ParticipantMessage & {
        carousel?: {
            contentFont?: FontConfig;
            currentSlideIndicatorColor?: CSSProperties["backgroundColor"];
            headingFont?: FontConfig;
            linkButtons?: ButtonConfig;
            nextIconSource?: string;
            postBackButtons?: ButtonConfig;
            previousIconSource?: string;
            slideIndicatorColor?: CSSProperties["backgroundColor"];
        };
        composite?: {
            linkButtons?: ButtonConfig;
            locationRequest?: { button?: ButtonConfig; iconSource?: string };
            postBackButtons?: ButtonConfig;
            quickReplyButtons?: QuickReplyButtonConfig;
        };
    };
    common?: {
        attachment?: {
            attachmentIconSources?: Partial<Record<SupportedIconTypes, string>>;
            attachmentSizeFont?: FontConfig;
            discardAttachmentIconSource?: string;
            downloadIconSource?: string;
            failedIconSource?: string;
            fallbackAttachmentIconSource?: string;
            fontConfig?: FontConfig;
            uploadingSpinnerSource?: string;
        };
    };
    customer?: ParticipantMessage & {
        retrySendIconSource?: string;
        statusIndicators?: {
            deliveredSource?: string;
            failedSource?: string;
            pendingSource?: string;
            sentSource?: string;
        };
    };
    fontConfig?: FontConfig;
}

`Optional`messagingWindow

messagingWindow?: {
    accentColor?: CSSProperties["background"];
    backgroundColor?: CSSProperties["background"];
    borderRadius?: CSSProperties["borderRadius"];
    endConversationButton?: { iconSource: string; show?: boolean };
    minimizeButton?: { iconSource: string; show?: boolean };
    notificationsButton?: {
        iconSources?: {
            hasNotifications?: string;
            noNotifications?: string;
            viewingNotifications?: string;
        };
        show?: boolean;
    };
    scrollBarColor?: CSSProperties["backgroundColor"];
    title?: { fontConfig?: FontConfig };
}

`Optional`notifications

notifications?: {
    fontConfig?: FontConfig;
    showParticipantJoined?: Partial<Record<ParticipantType, boolean>>;
    showParticipantLeft?: Partial<Record<ParticipantType, boolean>>;
}

`Optional`notificationsPane

notificationsPane?: {
    backgroundColors?: Partial<
        Record<NotificationType, CSSProperties["backgroundColor"]>,
    >;
    borderColors?: Partial<
        Record<NotificationType, CSSProperties["borderColor"]>,
    >;
    discardNotificationIconSource?: string;
    fontConfig?: FontConfig;
    iconSources?: Partial<Record<NotificationType, string>>;
    noNotificationsIconSource?: string;
    paneBackground?: CSSProperties["background"];
    paneBorder?: CSSProperties["border"];
}

`Optional`participants

participants?: {
    avatarSource?: Partial<Record<ParticipantType, ParticipantAvatar>>;
    participantList?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        borderRadius?: CSSProperties["borderRadius"];
        iconBackground?: CSSProperties["backgroundColor"];
        iconHoverBackground?: CSSProperties["backgroundColor"];
        iconSource?: string;
        participantNameFont?: FontConfig;
        show?: boolean;
    };
}

`Optional`postConversationActions

postConversationActions?: {
    downloadTranscriptButton?: ButtonConfig;
    printConversationButton?: ButtonConfig;
    startNewConversationButton?: ButtonConfig;
}

`Optional`textInput

textInput?: {
    activeBackgroundColor: CSSProperties["backgroundColor"];
    activeBorder?: CSSProperties["border"];
    backgroundColor?: CSSProperties["backgroundColor"];
    border?: CSSProperties["border"];
    borderRadius?: CSSProperties["borderRadius"];
    fontConfig?: FontConfig;
}

`Optional`typingIndicator

typingIndicator?: {
    animation?: { indicatorColor?: CSSProperties["backgroundColor"] };
    participantAvatars?: { show?: boolean };
    typingText?: {
        fontConfig?: FontConfig;
        participantNames?: { show?: boolean };
    };
}

Type Alias MessagingUiTheme

Index

Properties

Properties

`Optional`actionButtons

`Optional`attachmentMenu

`Optional`brandDetails

`Optional`brandPane

`Optional`connectionStatusBar

`Optional`endConversationDialog

`Optional`errorBoundary

`Optional`messageBubble

Type Declaration

`Optional`backgroundColor?: CSSProperties["backgroundColor"]

`Optional`border?: CSSProperties["border"]

`Optional`borderRadius?: CSSProperties["borderRadius"]

`Optional`iconSource?: string

`Optional`teaser?: {
    backgroundColor?: CSSProperties["backgroundColor"];
    closeButton?: { color?: CSSProperties["color"]; iconSource?: string };
    textColor?: CSSProperties["color"];
}

`Optional`backgroundColor?: CSSProperties["backgroundColor"]

`Optional`closeButton?: { color?: CSSProperties["color"]; iconSource?: string }

`Optional`color?: CSSProperties["color"]

`Optional`iconSource?: string

`Optional`textColor?: CSSProperties["color"]

`Optional`messages

`Optional`messagingWindow

`Optional`notifications

`Optional`notificationsPane

`Optional`participants

`Optional`postConversationActions

`Optional`textInput

`Optional`typingIndicator

Settings

On This Page

Type Alias MessagingUiTheme

Index

Properties

Properties

OptionalactionButtons

OptionalattachmentMenu

OptionalbrandDetails

OptionalbrandPane

OptionalconnectionStatusBar

OptionalendConversationDialog

OptionalerrorBoundary

OptionalmessageBubble

Type Declaration

OptionalbackgroundColor?: CSSProperties["backgroundColor"]

Optionalborder?: CSSProperties["border"]

OptionalborderRadius?: CSSProperties["borderRadius"]

OptionaliconSource?: string

Optionalteaser?: { backgroundColor?: CSSProperties["backgroundColor"]; closeButton?: { color?: CSSProperties["color"]; iconSource?: string }; textColor?: CSSProperties["color"];}

OptionalbackgroundColor?: CSSProperties["backgroundColor"]

OptionalcloseButton?: { color?: CSSProperties["color"]; iconSource?: string }

Optionalcolor?: CSSProperties["color"]

OptionaliconSource?: string

OptionaltextColor?: CSSProperties["color"]

Optionalmessages

OptionalmessagingWindow

Optionalnotifications

OptionalnotificationsPane

Optionalparticipants

OptionalpostConversationActions

OptionaltextInput

OptionaltypingIndicator

Settings

On This Page

`Optional`actionButtons

`Optional`attachmentMenu

`Optional`brandDetails

`Optional`brandPane

`Optional`connectionStatusBar

`Optional`endConversationDialog

`Optional`errorBoundary

`Optional`messageBubble

`Optional`backgroundColor?: CSSProperties["backgroundColor"]

`Optional`border?: CSSProperties["border"]

`Optional`borderRadius?: CSSProperties["borderRadius"]

`Optional`iconSource?: string

`Optional`teaser?: {
backgroundColor?: CSSProperties["backgroundColor"];
closeButton?: { color?: CSSProperties["color"]; iconSource?: string };
textColor?: CSSProperties["color"];
}

`Optional`backgroundColor?: CSSProperties["backgroundColor"]

`Optional`closeButton?: { color?: CSSProperties["color"]; iconSource?: string }

`Optional`color?: CSSProperties["color"]

`Optional`iconSource?: string

`Optional`textColor?: CSSProperties["color"]

`Optional`messages

`Optional`messagingWindow

`Optional`notifications

`Optional`notificationsPane

`Optional`participants

`Optional`postConversationActions

`Optional`textInput

`Optional`typingIndicator