---
url: https://talkjs.com/docs/Guides/Web_Components/Welcome_Messages
---

# Welcome messages

Ask a question Copy for LLM [View as Markdown](/docs/Guides/Web_Components/Welcome_Messages.md)
Welcome messages are pre-written messages that appear at the top of a conversation before any real messages are sent. They are a common pattern in marketplace and support apps — for example, a seller greeting a potential buyer when they open a chat for the first time.

Welcome messages are purely visual and they are not stored in the conversation as real message objects.

## Conversaton welcome messages

The simplest way to show welcome messages is to set `welcomeMessages` on the conversation object, via the [Data API](/docs/Data_APIs/JavaScript/Conversations/) or the [REST API](/docs/REST_API/Conversations/#setting-conversation-data). The default [`<BeforeMessages>`](/docs/UI_Components/Theme/Theme_components/BeforeMessages/) theme component renders these automatically as system messages.

For example:

```js
import { getTalkSession } from "@talkjs/core";

const session = getTalkSession({ appId: "<APP_ID>", userId: "betty_buyer" });
session.conversation("my_conversation").createIfNotExists({
  welcomeMessages: ["You are chatting with a verified seller."],
});
```

## Custom welcome messages

For more control, override your theme's [`<BeforeMessages>`](/docs/UI_Components/Theme/Theme_components/BeforeMessages/) component and use [`<VirtualMessage>`](/docs/UI_Components/Theme/System_components/VirtualMessage/). For example, this lets you attribute a message to a specific user (showing their name and avatar), or to use rich text formatting.

Virtual messages are purely visual and are never stored or sent through TalkJS.

### Single message

The following shows a welcome message attributed to a seller:

```js
import { html, VirtualMessage } from "@talkjs/web-components";
import "@talkjs/web-components/default.css";

const theme = {
  BeforeMessages: () => html`
    <${VirtualMessage}
      text="Hi! Let me know if you have any questions about this item."
      sender="pete_seller"
    />
  `,
};
```

Then, set your `<t-chatbox>` element's `theme` property to `theme`.

Setting `sender` to the seller's user ID causes the message to appear as if it came from that user, complete with their name and avatar. Omitting `sender` renders the message as a system message instead.

### Multiple messages

When rendering more than one `<VirtualMessage>`, you need to list them in reverse order in the DOM. This is because the message list uses [`flex-direction: column-reverse`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) to keep the newest messages anchored at the bottom.

Additionally, when rendering multiple virtual messages from the same sender, we recommend you wrap them in a `<div class="t-message-group">` so that the default CSS for grouping behavior (eg spacing, avatar visibility, etc.) applies correctly.

For example:

```js
import { html, VirtualMessage } from "@talkjs/web-components";
import "@talkjs/web-components/default.css";

const theme = {
  BeforeMessages: () => html`
    <div class="t-message-group">
      <${VirtualMessage}
        text="Feel free to ask about pricing or availability!"
        sender="pete_seller"
      />
      <${VirtualMessage}
        text="Hi! Thanks for your interest in my shop."
        sender="pete_seller"
      />
    </div>
  `,
};
```

Then, set your `<t-chatbox>` element's `theme` property to `theme`.