@inbox-components/conversation NPM

Inbox Components - Conversation

The Conversation component is part of the Inbox Components (https://inboxcomponents.com) library, a set of UI components designed to help you implement your own messaging inbox into your own software stack.

This component is framework-agnostic and can be used in any frontend framework, including React, Vue, Angular, or plain JavaScript.

Installation

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

NPM: npm i @inbox-components/conversation
CDN: https://unpkg.com/@inbox-components/conversation@1.0.0/index.js (replace the version with the desired version e.g. 1.0.5-rc)

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

<script type="module" src="https://unpkg.com/@inbox-components/conversation@1.0.0/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

Our components are flexible and can be customized to match your needs.

Properties

Example:

<inbox-components-conversation property="value">

Name	Type	Description	Default
token (required)	string	Authentication token. Obtain a token at: https://inboxcomponents.com	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
hide-list-single	boolean	Hide list when only 1 conversation is available	false

Event Listeners

Example:

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