Component

How to add and configure the Conversation component

The Conversation web component offers you a complete inbox UI with configuration options. The component is framework-agnostic and can be used in any front-end framework, including React, Vue, Angular, or plain JavaScript.

Installation

In your JavaScript application, you can use the following to install the Conversation component:

We always recommend installing our component via NPM when used in production environments.

<body>
  <inbox-components-conversation></inbox-components-conversation>
</body>

<script type="module" src="https://unpkg.com/@inbox-components/conversation@latest/index.js"></script>

This component is responsive. Add this "meta" tag inside the "head" section to ensure the component adapts well to different screen sizes, particularly mobile devices.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

Customization

Customization is in development and expected in Q2 '25. Please check the roadmap for updates.

Customization will contain:

  • Localization

  • Styling

  • Customer loader

Properties

Filter and display properties enable you to tailor the components to your needs and get the correct data on the right spot.

  • Get the right account(s)

  • Filter by number, handle and/or ID

  • Style as full inbox or 1-on-1 chat

Example:

<inbox-components-conversation property="value">
Name
Type
Description
Default

token (required)

string

Authentication token. Obtain a token here

None

filter-phone-number

string

Filter your messages by (multiple) phone number(s). Comma-separated list without spaces (e.g., 31612345678,13125556789). Ensure numbers include the country code.

None

Event Listeners

With event listeners, your components can interact with your app in real time.

Example:

document
    .querySelector("inbox-components-conversation")
    .addEventListener("onOpen", (event) => {
    let { detail } = event;
    console.log("Opened conversation: ", detail[0].id);
});
Name
Type
Description

onOpen

string

Return the UUID of the opened conversation

PreviousQuickstartNextWebhooks

Last updated

Was this helpful?