Chatbot Builder

Define your chatbot theme, try it in the preview, then copy the CSS to your career site.
Theme settings

Colours
Primary
Links, launcher, prompts and focus rings
Secondary
Text and sent messages
Background
Received messages and input area
Surface
Chat window and sent-message text
Line
Borders and dividers
Muted
Placeholder and supporting text
Typography
Body fontHeading font
Web fonts include a Google Fonts import in the CSS. Arial and Georgia use installed fonts.
Messages & prompt buttons
Message text size15pxMessage corners16pxPrompt button corners24pxPrompt vertical padding8pxPrompt horizontal padding14px
Live preview

Generated CSS

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* Reusable chatbot theme. Set colours and fonts here for each site. */
:root, :host {
    --chat-secondary: #140F33;
    --chat-primary: #0A7CAE;
    --chat-background: #EEF6FB;
    --chat-line: #E2E6F0;
    --chat-muted: #4A4868;
    --chat-surface: #FFFFFF;
    --chat-body-font: 'Figtree', Arial, sans-serif;
    --chat-heading-font: 'Outfit', Arial, sans-serif;
    --chat-message-size: 15px;
    --chat-message-radius: 16px;
    --chat-prompt-radius: 24px;
    --chatbot-launcher-bg: var(--chat-primary);
    --chatbot-header-bg: var(--chat-surface);
    --chatbot-header-text: var(--chat-secondary);
    --chatbot-body-bg: var(--chat-surface);
    --chatbot-message-received-bg: var(--chat-background);
    --chatbot-message-received-color: var(--chat-secondary);
    --chatbot-message-sent-bg: var(--chat-secondary);
    --chatbot-message-sent-color: var(--chat-surface);
    --chatbot-input-bg: var(--chat-background);
    --chatbot-input-text: var(--chat-secondary);
    --chatbot-prompt-btn-padding: 8px 14px;
    --chatbot-prompt-btn-border: 1px solid var(--chat-primary);
    --chatbot-prompt-btn-bg: var(--chat-surface);
    --chatbot-prompt-btn-color: var(--chat-primary);
    --chatbot-prompt-btn-hover-bg: var(--chat-background);
    --chatbot-prompt-btn-hover-border-color: var(--chat-secondary);
    --chatbot-prompt-btn-hover-color: var(--chat-secondary);
    --candidate-assistant-surface: var(--chat-surface);
}

/** Custom Career Site CSS **/
.candidate-assistant, .chatbot-chat-window {
    font-family: var(--chat-body-font);
    color: var(--chat-secondary);
}

.candidate-assistant-header {
    padding: 0.25rem;
    background: var(--chatbot-header-bg);
    border-bottom: 1px solid var(--chat-line);
}

.candidate-assistant .candidate-assistant-header-name {
    font-family: var(--chat-heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--chatbot-header-text);
}

.candidate-assistant-actions button {
    color: var(--chatbot-header-text);
}

.chatbot-message-text {
    border-radius: var(--chat-message-radius);
    font-family: var(--chat-body-font);
    font-size: var(--chat-message-size);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.chatbot-message-content.received .chatbot-message-text {
    background: var(--chatbot-message-received-bg);
    color: var(--chatbot-message-received-color);
    border-bottom-left-radius: min(4px, var(--chat-message-radius));
}

.chatbot-message-content.sent .chatbot-message-text {
    background: var(--chatbot-message-sent-bg);
    color: var(--chatbot-message-sent-color);
    border-bottom-right-radius: min(4px, var(--chat-message-radius));
}

.chatbot-message-text p { color: inherit; }
.chatbot-message-text p:last-child { margin-bottom: 0; }
.chatbot-message-avatar .fa-circle { color: var(--chat-secondary); }
.chatbot-message-content.sent a[href] { color: var(--chat-surface); }
.chatbot-message-content.received a[href] { color: var(--chat-primary); }

.chatbot-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chatbot-body-frame .chatbot-body .chatbot-prompts .chatbot-prompt { margin: 0; max-width: 100%; }
.chatbot-body-frame .chatbot-body .chatbot-prompts .chatbot-prompt button {
    padding: var(--chatbot-prompt-btn-padding);
    border: var(--chatbot-prompt-btn-border);
    border-radius: var(--chat-prompt-radius);
    background: var(--chatbot-prompt-btn-bg);
    color: var(--chatbot-prompt-btn-color);
    font-family: var(--chat-body-font);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    white-space: normal;
    text-align: left;
    box-shadow: none;
    transition: transform 0.15s ease-out, border-color 0.15s ease-out;
}

.chatbot-body-frame .chatbot-body .chatbot-prompts .chatbot-prompt button:is(:hover, :focus-visible) {
    background: var(--chatbot-prompt-btn-hover-bg);
    color: var(--chatbot-prompt-btn-hover-color);
    border-color: var(--chatbot-prompt-btn-hover-border-color);
}

.chatbot-body-frame .chatbot-body .chatbot-prompts .chatbot-prompt button:active {
    transform: translateY(1px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-body-frame .chatbot-body .chatbot-prompts .chatbot-prompt button {
        transition: none;
    }
    .chatbot-body-frame .chatbot-body .chatbot-prompts .chatbot-prompt button:active {
        transform: none;
    }
}

.chatbot-prompts .chatbot-prompt .btn:focus-visible,
.candidate-assistant-actions button:focus-visible,
.chatbot-user-input-text:focus-visible {
    outline: 2px solid var(--chat-primary);
    outline-offset: 3px;
}

.chatbot-footer {
    border-top: 1px solid var(--chat-line);
    background: var(--chat-background);
    --bs-progress-bar-bg: var(--chat-primary);
}

.chatbot-user-input-text {
    font-family: var(--chat-body-font);
    background: var(--chatbot-input-bg);
    color: var(--chatbot-input-text);
    font-size: var(--chat-message-size);
}

.chatbot-user-input-text::placeholder { color: var(--chat-muted); opacity: 1; }
.chatbot-user-input-send-icon { fill: var(--chat-primary); }
.chatbot-input-disclaimer {
    padding: 0.5rem 0.75rem;
    margin: 0;
    background: var(--chat-surface);
    color: var(--chat-muted);
    font-family: var(--chat-body-font);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* Job recommendations returned inside the conversation. */
.job-details-overview-content,
.job-details-overview-content p {
    font-size: 0.9375rem;
    color: var(--chat-muted);
}

.job-details-overview-content h1,
.job-details-overview-content h2,
h3.job-title {
    font-family: var(--chat-heading-font);
    font-size: 1.25rem;
    color: var(--chat-secondary);
}

h3.job-details-overview-title {
    font-family: var(--chat-heading-font);
    font-size: 1.0625rem;
    color: var(--chat-secondary);
}

.message-turbo-frame .job-message {
    border: 1px solid var(--chat-line);
    border-radius: 15px;
    padding: 17px 20px;
}