---
url: https://talkjs.com/docs/UI_Components/Web_Components/t-inbox
title: '<t-inbox>'

minidoc-source: js
minidoc-lib: components
---

The `<t-inbox>` web component combines a
[Chatbox](/UI_Components/Web_Components/t-chatbox/) with a
[ConversationList](/UI_Components/Web_Components/t-conversation-list/) into a
single responsive UI.

It is a thin wrapper around these two components, and accepts a combination of
attributes from both. For example:

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
></t-inbox>
```

This will show an inbox with all conversations of `sample_user_alice` listed on
the left, and the selected conversation on the right.

The inbox is responsive, and by default switches to a mobile-friendly layout
when the width is less than 700px. You can change the mobile breakpoint by
passing a different value to the
[`mobile-break-point`](#InboxProps__mobileBreakPoint) attribute.

## InboxProps
/** The Inbox takes all prop from Chatbox and all props from ConversationList. */
export declare interface InboxProps extends BaseChatboxProps, BaseConversationListProps  {
/** A filter to apply to the inbox's conversation list.
Only conversations matching this filter are included in the conversation list panel.
Updating this prop re-subscribes to the conversation list with the new filter.
Show only support conversations
```ts<Inbox
appId="<APP_ID>"
userId="<USER_ID>"
conversationFilter={{ custom: { category: ["==", "support"] } }}
/>```
Hide conversations that have no messages yet
```ts<Inbox
appId="<APP_ID>"
userId="<USER_ID>"
conversationFilter={{ hasMessages: true }}
/>``` */
conversationFilter?: ConversationFilter;
/** The container width at which the Inbox switches to mobile mode.
When the container is less wide than this amount of pixels, the inbox will only show a chatbox or a conversation list, and the chatbox header will show a back button to move back to the conversation list.
When the inbox is in mobile mode, the inbox element will get a `t-mobile-inbox` attribute. This attribute is used in e.g. the CSS of the ChatHeader theme component to determine whether or not to show the back button. */
mobileBreakPoint?: number;
}

{/* 
We don't expose InboxController as a class in our WC build, but we also
don't want to document all HTMLElement methods, so below I unpack MType a bit 
to document one class and make it seem like another. Also, I'm using
"InboxController" as the id prefix so that SDK links (eg `{@link
InboxController.selectConversation}` type references) can find this page.
*/}
<MSection name="InboxController">
<MTypeHeading kind="class" name="InboxElement" id="InboxController" />

The `t-inbox` element is a custom element that extends the `HTMLElement` class.
It exposes the following methods:

<MMethodOverview methods={useMinidoc("InboxController").methods} />
<MProperties properties={useMinidoc("InboxController").properties} />
<MMethodList methods={useMinidoc("InboxController").methods} />
</MSection>

## Examples

The following gives some examples of how to use the `t-inbox` component.

### Create an inbox with an existing user

Create an inbox and pass it an existing user and the default theme:

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
/>
```

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
/>
```

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
></t-inbox>
```

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
></t-inbox>
```

### Create an inbox with a new user and a new conversation

Install the [`@talkjs/core` package](https://www.npmjs.com/package/@talkjs/core), which lets you read, subscribe to, and update your chat data:

```shell
npm install @talkjs/core
```

```shell
yarn add @talkjs/core
```

Import the `@talkjs/core` package into the component where you want to use it:

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

Then create the session, user, and conversation:

```ts
appId = '<APP_ID>';
userId = 'sebastian';
conversationId = 'new_conversation';
session: TalkSession | null = null;

ngOnInit() {
  this.session = getTalkSession({
    appId: this.appId,
    userId: this.userId,
  });
  this.session.currentUser.createIfNotExists({ name: 'Sebastian' });
  const conversation = this.session.conversation(this.conversationId);
  conversation.createIfNotExists();
}
```

```js
const appId = '<APP_ID>';
const userId = 'sebastian';
const conversationId = 'new_conversation';

const session = getTalkSession({ appId, userId });
session.currentUser.createIfNotExists({ name: 'Sebastian' });
const conversation = session.conversation(conversationId);
conversation.createIfNotExists();
```

```js
const appId = '<APP_ID>';
const userId = 'sebastian';
const conversationId = 'new_conversation';

const session = getTalkSession({ appId, userId });
session.currentUser.createIfNotExists({ name: 'Sebastian' });
const conversation = session.conversation(conversationId);
conversation.createIfNotExists();
```

Pass the new user and conversation to your inbox:

```html
<t-inbox
  [app-id]="appId"
  [user-id]="userId"
  [selected-conversation-id]="conversationId"
/>
```

```html
<t-inbox
  :app-id="appId"
  :user-id="userId"
  :selected-conversation-id="conversationId"
/>
```

```js
<t-inbox
  app-id={appId}
  user-id={userId}
  selected-conversation-id={conversationId}
></t-inbox>
```

If you're using web components without a package manager, [see the following guide](/UI_Components/JavaScript/#create-new-users-and-conversations).

### Hide the chat header

Control chatbox layout by eg hiding the chat header:

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  chat-header-visible="false"
/>
```

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  chat-header-visible="false"
/>
```

```js
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  chat-header-visible="false"
></t-inbox>
```

```html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  chat-header-visible="false"
></t-inbox>
```

### Respond to events

Respond to a sent message event by printing details to the console:

```txt
// inbox.component.html
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  (sendMessage)="onSendMessage($event)"
></t-inbox>

// inbox.component.ts
onSendMessage(event: any): void {
  console.log("Message sent:", event.message);
}
```

```html
<script setup>
  // ...

  function onSendMessage(event) {
    console.log('Message sent:', event.message);
  }
</script>

<template>
  <main>
    <t-inbox
      app-id="<APP_ID>"
      user-id="sample_user_alice"
      @send-message="onSendMessage"
    />
  </main>
</template>
```

```js
<t-inbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  on:sendMessage={onSendMessage}
></t-inbox>

<script>
  function onSendMessage(event) {
    console.log("Message sent:", event.message);
  }
</script>
```

```html
<t-inbox
  id="inbox"
  app-id="<APP_ID>"
  user-id="sample_user_alice"
></t-inbox>

<script>
  const inbox = document.getElementById('inbox');

  inbox.addEventListener('send-message', (event) => {
    console.log('Message sent:', event.message);
  });
</script>
```