This feature is available in private preview mode and accessible only on selected workspaces. To get access, contact your account manager or Synerise Support.
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](/docs/ai-hub/ai-assistant/configuring-customer-ai-assistant-in-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](/docs/ai-hub/ai-assistant/implementing-the-ai-assistant-on-your-website).
## Header name and avatar
```js
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`:
```js
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.",
},
},
});
```
| Text | Where it appears | Default |
| --- | --- | --- |
| `loadingMessage` | Next to the typing indicator while the assistant is preparing an answer | Indicator only, no text |
| `tryAgain` | The retry button under an error | *Try Again* |
| `startNewConversation` | The button shown when a saved conversation is no longer available | *Start new conversation* |
| `rating.commentPlaceholder` | Placeholder of the comment field after a thumbs down | *Tell us more* |
| `rating.cancel` | Dismiss button of the comment field | *Cancel* |
| `rating.submit` | Send button of the comment field | *Submit* |
| `rating.thanks` | Confirmation shown for a moment after a comment is sent | *Thanks for feedback* |
| `errorMessage.NETWORK_ERROR` | The chat cannot reach Synerise (offline, blocked request) | *Connection error* |
| `errorMessage.SERVER_ERROR` | Synerise returned a server error | *Connection error* |
| `errorMessage.CLIENT_ERROR` | The request was rejected (for example, authentication failed) | *Connection error* |
| `errorMessage.THREAD_NOT_FOUND` | The requested conversation does not exist or belongs to another profile | *Connection error* |
| `errorMessage.STREAM_ERROR` | The assistant refused to answer and did not provide its own message | *Connection error* |
| `errorMessage.UNKNOWN_ERROR` | Any other error | *Connection error* |
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](#replacing-parts-of-the-chat).
When the assistant declines a request, the message shown to the customer is written by the assistant itself in the language and tone you configured in AI Hub. The `errorMessage` texts are used only for technical errors.
Variables that accept a color also accept a CSS gradient, as the defaults of the window border and the input border show. Keep the contrast between text and background colors high enough to stay readable on mobile screens.
## 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`:
```js
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.
```js
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.
```js
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](/developers/web/ai-assistant-sdk#slots).
## What's next
- [Configuring Customer AI Assistant in the Synerise platform](/docs/ai-hub/ai-assistant/configuring-customer-ai-assistant-in-synerise-platform)
- [Conversation context and history](/docs/ai-hub/ai-assistant/conversation-context-and-history)
- [AI Assistant SDK](/developers/web/ai-assistant-sdk)