Customizing the Customer AI Assistant chat

The chat comes with a neutral look and English texts. This article explains what you can change on the website side: the header name and avatar, the texts of the interface, the colors and fonts, the size of the message input, and where action buttons appear. Developers can also replace whole parts of the chat with their own elements.

What the assistant says - its name in conversation, tone of voice, greeting, and suggested questions - is configured in AI Hub, not here. See Configuring Customer AI Assistant in the Synerise platform.

All settings below are options passed to init() (or props of the React component). Add them next to rootElementId in the snippet from Implementing the Customer AI Assistant on your website.

Header name and avatar

init({
  rootElementId: "synerise-assistant",
  header: "John, your shopping assistant",
  avatar: "https://example.com/assets/assistant-avatar.png",
});

• header - the title in the chat header. Plain text; the default is AI Assistant.
• avatar - the address of the image shown next to the assistant's messages and the typing indicator. The default is the Synerise AI icon.

Texts of the interface

The interface texts are in English by default. Override the ones you need under texts:

init({
  rootElementId: "synerise-assistant",
  texts: {
    loadingMessage: "Looking for the best options…",
    tryAgain: "Try again",
    startNewConversation: "Start a new conversation",
    rating: {
      commentPlaceholder: "Tell us more",
      cancel: "Cancel",
      submit: "Send",
      thanks: "Thank you for your feedback!",
    },
    errorMessage: {
      NETWORK_ERROR: "We couldn't connect with the assistant.",
      SERVER_ERROR: "The assistant is currently unavailable.",
      THREAD_NOT_FOUND: "This conversation is not available anymore.",
    },
  },
});

The placeholder of the message input (Type a message...) can be changed only by replacing the input with a slot; see Replacing parts of the chat.

Colors, fonts, and corners

Every visual property of the chat is a variable that you can override under the theme.variables option. Set only the ones you want to change; the rest keep their defaults.

init({
  rootElementId: "synerise-assistant",
  theme: {
    variables: {
      "chat-container-text-family": "'Inter', Arial, sans-serif",
      "chat-header-bg": "#111827",
      "chat-header-text-color": "#f9fafb",
      "chat-prompt-bg": "#111827",
      "chat-submit-button-bg-default": "#e11d48",
      "chat-submit-button-bg-hover": "#be123c",
      "chat-input-border-color-default": "#e5e7eb",
      "chat-input-border-color-focus": "#e11d48",
    },
  },
});

Window

Header

Customer's messages

Assistant's messages

Message input

Buttons in messages

Send button

Size of the message input

The input grows as the customer types, up to three lines by default, and then scrolls. Change the limit with textAreaMaxRows:

init({ rootElementId: "synerise-assistant", textAreaMaxRows: 5 });

Where action buttons appear

Buttons and follow-up suggestions of the latest answer can be shown in two layouts:

• "inline" (default) - inside the answer, right under its text and product cards.
• "dock" - gathered in a full-width row below the last message, closer to the input, like quick replies in messaging apps. The row empties itself when the customer sends the next message.

init({ rootElementId: "synerise-assistant", actionsLayout: "dock" });

Links (buttons that open a page) always stay inside the answer they belong to.

Fine-tuning with CSS

The chat marks its main parts with class names you can target from your stylesheet, for example the ai-assistant-header, ai-assistant-close-button, ai-assistant-actions-dock, and ai-assistant-message-suggestion classes. Prefer theme variables for colors and fonts, and use CSS only for spacing and layout details, so your styles keep working across releases of the chat.

Replacing parts of the chat

Developers can replace individual elements of the chat - the header title, the close button, the avatar, the typing indicator, the error row, the message input, the send button, and each type of message element, including product cards - with their own HTML. Each replacement is a function under slots that returns a DOM element (or a React node in the React package). Returning null hides the element; returning undefined keeps the default.

init({
  rootElementId: "synerise-assistant",
  slots: {
    header: {
      closeButton: ({ onClose }) => {
        const button = document.createElement("button");
        button.className = "my-store-icon-button";
        button.setAttribute("aria-label", "Close the assistant");
        button.innerHTML = "×";
        button.onclick = onClose;
        return button;
      },
    },
    textArea: {
      input: ({ value, onChange, disabled, ref }) => {
        const textarea = document.createElement("textarea");
        textarea.placeholder = "Ask about products, sizes, delivery…";
        textarea.value = value;
        textarea.disabled = disabled;
        textarea.oninput = (event) => onChange(event.target.value);
        ref.current = textarea;
        return textarea;
      },
    },
  },
});

The list of slots and their parameters is in the SDK reference.

What's next

• Configuring Customer AI Assistant in the Synerise platform
• Conversation context and history
• AI Assistant SDK