Inbox iFrame

How to use

The iFrame implementation of the Inbox application differs from regular iFrame usage in that you don't include an <iframe> tag in your HTML directly. Instead, the setup is managed through JavaScript.

This approach is designed to accommodate the extensive customization options provided by the Inbox application. With numerous configuration parameters available, passing them through URL parameters to the iframe would be impractical.

Using this method, you can provide all necessary configuration parameters to the InfobipInboxIframe component. This component takes responsibility for creating the iframe element and establishing secure cross-origin communication between the window object (your application) and the iframe. This is achieved using window.postMessage() API.

Releases of Inbox iFrame 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/iframe/v0/infobip-inbox.js"></script>

After inserting the script tag, you need to call InfobipInboxIframe function with configuration object passed as a parameter.

<!-- Somewhere in HTML -->
<div id="display-iframe-here"></div>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    window.InfobipInboxIframe({
      iframeUrl: 'https://cdn-embeddings.infobip.com/inbox/iframe/<version>/index.html',
      authToken: '<auth-token>',
      senders: [], // list of senders
      destinations: [], // list of destinations
      filter: {}, // filter object
      uiConfig: {}, // UI config object
      onConversationSelected: (conversationId) => {
        console.log('Selected conversation:', conversationId);
      },
      onConversationCreated: (conversationId) => {
        console.log('Created conversation:', conversationId);
      },
    }).render('#display-iframe-here');
  });
</script>

Note

• The iframeUrl parameter should point to the same path where infobip-inbox.js is hosted.
• The render method can be called with either the selector of the element (selector that can be resolved with document.querySelector) or reference to resolved DOM node where the iframe should be rendered. You are responsible for configuring the size of this element (e.g., using CSS or using element's style attribute to set its width and height). If no element is specified, the iframe will default to rendering within document.body.

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.