Attributes

The following are descriptions of the attributes that can be passed to the iFrame or Web Component component:

• authToken (required): The authentication token used to access the Inbox API. This token should be generated and injected by the backend as part of a more secure authentication flow (after a PAR request).

• apiBaseUrl: Optional configuration for providing custom Infobip API base URL - useful if you have "personalized base URL" in form of https://xxxxx.api.infobip.com.

• senders (required): A list of senders to use when starting new conversation where each item has the following shape:

  /**
   * Represents a sender in a conversation.
   */
  export type SenderConfig = {
      /**
       * The sender's phone number or identifier.
       *
       * @example
       * number: "3851234567"
       */
      number: string;
  
      /**
       * The communication channel used by the sender.
       * Must match one of the supported channels: SMS, WHATSAPP.
       *
       * @example
       * channel: "SMS"
       */
      channel: keyof typeof MessageChannel;
  
      /**
       * An optional label for the sender. Can include placeholders for dynamic values.
       *
       * @example
       * label: "Purchase department sender"
       */
      label?: string;
  
      /**
       * Additional metadata associated with the sender.
       * Can be used for dynamic labeling using placeholders in `label`.
       * Will be persisted as part of conversation metadata once new conversation is started.
       *
       * @example
       * metadata: {
       *     name: "Support Team"
       * },
       * label: "Name: {metadata.name}"
       */
      metadata?: Record<string, string>;
  };

• destinations (required): A list of destinations to use when starting new conversation where each item has the following shape:

  /**
   * Represents a destination in a conversation.
   */
  export type DestinationConfig = {
      /**
       * The destination's phone number or identifier.
       *
       * @example
       * number: "385987654321"
       */
      number: string;
      
       /**
       * An optional label for the destination. Can include placeholders for dynamic values.
       *
       * @example
       * label: "User: {metadata.userId}"
       */
      label?: string;
      
       /**
       * Additional metadata associated with the destination
       * Can be used for dynamic labeling using placeholders in `label`.
       * Will be persisted as part of conversation metadata once new conversation is started.
       *
       * @example
       * metadata: {
       *     type: "Business Phone"
       * }
       * label: "Type: {metadata.type}"
       */
      metadata?: Record<string, string>;
  };

• filter: An object that can be used to filter list of conversations that are shown in the component. The object has the following shape:

  /**
   * Filter criteria for conversations.
   */
  export type ConversationFilterConfig = {
      /**
       * Filter conversations by a specific agent's ID.
       */
      agentId?: string;
      
      /**
       * Filter conversations by a specific queue's ID.
       */
      queueId?: string;
      
      /**
       * Filter conversations by one or more statuses.
       * Possible values: OPEN, WAITING, SOLVED or CLOSED
       */
      status?: string[];
      
      /**
       * Filter conversations by priority level.
       * Possible values: URGENT, HIGH, NORMAL or LOW
       */
      priority?: string;
      
      /**
       * Filter conversations by a specific tag name.
       */
      tag?: string;
  };

• uiConfig: An object that can be used to configure the appearance of the component.

  Click here to check the details