Inbox Web Component

How to use

Releases of Inbox Web Component are hosted on a CDN and can be included directly in your web application using a <script> tag.

<script src="https://cdn-embeddings.infobip.com/inbox/web-component/v0/infobip-inbox.js"></script>

Using this method script will create and define custom Web Component called infobip-inbox which you can use in the following (declarative) way:

<infobip-inbox
  authToken="<auth-token>"
  senders="<list-of-senders>"
  destinations="<list-of-destinations>"
  filter="<filter-object>"
  uiConfig="<ui-config-object>"
/>

or programmatically:

const infobipInbox = document.createElement('infobip-inbox');
infobipInbox.setAttribute('authToken', '<auth-token>');
infobipInbox.setAttribute('senders', '<list-of-senders>');
infobipInbox.setAttribute('destinations', '<list-of-destinations>');
infobipInbox.setAttribute('filter', '<filter-object>');
infobipInbox.setAttribute('uiConfig', '<ui-config-object>');
document.body.appendChild(infobipInbox);

Note

Attributes must be provided as strings, so if you are providing array or object you need to call JSON.stringify() on the array/object you are passing.

For example if you are passing the following "senders" array: [{ number: '<number>', channel: "SMS" }] you need stringify it before passing it to the Web Component:

const infobipInbox = document.createElement('infobip-inbox');
...
infobipInbox.setAttribute('senders', JSON.stringify([{ number: '<number>', channel: "SMS" }]));
...
document.body.appendChild(infobipInbox);

Attributes

Please visit: https://github.com/infobip/infobip-inbox/wiki/Attributes

Events

The following are descriptions of the events that can be listened to on the component:

• onConversationSelected: An event that is fired when a conversation is selected in the Inbox. The event contains the ID of the selected conversation.
• onConversationCreated: An event that is fired when a new conversation is created in the Inbox. The event contains the ID of the created conversation.

Note

All attributes are strings, so any non-string value should be stringified before passing them to the Web Component.

<infobip-inbox 
  senders='[{"number":"sender-number","channel":"WHATSAPP"}]'
/>

Subscribing to these events has to be done programmatically.

Here is an example how to do it if you use the web component declaratively:

<infobip-inbox
  authToken="<auth-token>"
  senders="<list-of-senders>"
  destinations="<list-of-destinations>"
/>
<script>
  const infobipInbox = document.querySelector('infobip-inbox');
  infobipInbox.addEventListener('onConversationSelected', (event) => {
    console.log('Conversation selected: ' + event.detail.conversationId);
  });
</script>

Or programmatically:

const infobipInbox = document.createElement('infobip-inbox');
infobipInbox.setAttribute('authToken', '<auth-token>');
infobipInbox.addEventListener('onConversationSelected', (event) => {
  console.log('Conversation selected: ' + event.detail.conversationId);
});
document.body.append(infobipInbox);