> For the complete documentation index, see [llms.txt](https://docs.iadvize.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iadvize.dev/~/changes/39J6v2tWi3Ms7Me1qEFP/apps/build-your-app/app-plugins.md).

# App Plugins

Use plugins to enhance the iAdvize interface by adding or editing predefined features.

Plugins are basically HTTP endpoints whose json responses fit the plugin json-schema. For each plugin one or more endpoint have to be defined. When a plugin is used on user interface, we will make a GET http call to endpoint with documented query parameters. Your http response have to comply with plugin json-schema. You can find a link of the json schema below each plugin route. It can be used to validate your http responses on your side.

The plugins already available are:

* The product List (on the discussion panel)
* The customer information (on the discussion panel)
* The conversation closing form (on the discussion panel) - only for Chat/Call/Video channels
* The bot (add an external bot within iadvize chatbox)

## Product list <a href="#product-list" id="product-list"></a>

The integration of the product list enables iAdvize's Console panel users to browse a product catalog from the iAdvize discussion panel. Agents can look for a product while they are chatting and send it in just a click within their conversation.

Products are displayed in a popup window just over the conversations view: When shared, visitors can see their image, title, availability and price. By clicking on the "view product" button, visitors are redirected to the product page on your website.

![Product list](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/interactions-product-list-feature.png)

**Add the Product list plugin**

To make sure your connector uses the Product list plugin correctly, all you have to do is to declare:

* The product list URL - this is your catalog’s URL
* The categories url - this is where your connector will get the list of your product categories

**Categories data**

**Request - GET method**

| Query parameter    | Description                                                           | Values                                                   |
| ------------------ | --------------------------------------------------------------------- | -------------------------------------------------------- |
| idConnectorVersion | Connector version id                                                  | ?idConnectorVersion=c008849d-7cb1-40ca-9503-d6df2c5cddd8 |
| idParent           | Unique identifier of the parent category                              | ?idParent=123                                            |
| idWebsite          | Unique identifier of the website on which your connector is installed | ?idWebsite=ha-123                                        |
| idOperator         | Unique identifier of the operator loading the categories              | ?idOperator=9999                                         |
| limit              | Maximum number of resources per page                                  | ?limit=10                                                |
| offset             | Number of resources skipped before beginning to return resources      | ?offset=10                                               |

**Response - Array of categories**

```json
[
    {
        "id": "123",
        "idParent": "123",
        "label": "category",
        "products": [
            "123",
            "456"
        ],
        "productsCount": 3
    },
    {
        "id": "456",
        "idParent": null,
        "label": "category",
        "products": null,
        "productsCount": 7
    }
 ]
```

| Field         | Description                              | Values           | Required |
| ------------- | ---------------------------------------- | ---------------- | -------- |
| id            | Unique identifier                        | Integer          | ✓        |
| idParent      | Unique identifier of the parent category | Integer          |          |
| label         | Label                                    | String           | ✓        |
| products      | products                                 | Array of strings |          |
| productsCount | Number of products                       | Integer          | ✓        |

You can validate your response data format with the associated [json schema](https://developers.iadvize.com/json-schemas/product-list/category.json)

**Products data**

**Request - GET method**

| Query parameter    | Description                                                           | Values                                                   |
| ------------------ | --------------------------------------------------------------------- | -------------------------------------------------------- |
| idConnectorVersion | Connector version id                                                  | ?idConnectorVersion=c008849d-7cb1-40ca-9503-d6df2c5cddd8 |
| idCategory         | Category id                                                           | ?idCategory=123                                          |
| idWebsite          | Unique identifier of the website on which your connector is installed | ?idWebsite=ha-123                                        |
| idOperator         | Unique identifier of the operator loading the products                | ?idOperator=9999                                         |
| limit              | Maximum number of resources per page                                  | ?limit=10                                                |
| offset             | Number of resources skipped before beginning to return resources      | ?offset=10                                               |
| searchQuery        | Product search query                                                  | ?searchQuery=query                                       |

**Response - Array of products**

```json
[
    {
        "id": "123",
        "title": "Product's title",
        "productUrl": "http://www.e-commerce.com/url-product",
        "brand": "brand",
        "description": "product's description",
        "shortDescription": "shrot description",
        "available": true,
        "imageUrl": "http://www.e-commerce.com/url-product-image.jpg",
        "reference": "reference",
        "priceCatalog": "99.9 €",
        "pricePromotion": "90 €",
        "priceSpecial": "80 €"
    },
    {
        "id": "456",
        "title": "Product's title",
        "productUrl": "http://www.e-commerce.com/url-product",
        "brand": null,
        "description": "product's description",
        "shortDescription": null,
        "available": true,
        "imageUrl": "http://www.e-commerce.com/url-product-image.jpg",
        "reference": null,
        "priceCatalog": "9.9 €",
        "pricePromotion": null,
        "priceSpecial": null
    }
]
```

| Field            | Description       | Values  | Required |
| ---------------- | ----------------- | ------- | -------- |
| id               | Unique identifier | Integer | ✓        |
| title            | Title             | String  | ✓        |
| productUrl       | Product's url     | String  | ✓        |
| brand            | Brand             | String  |          |
| description      | Description       | String  | ✓        |
| shortDescription | Short description | String  |          |
| available        | Availability      | Boolean |          |
| imageUrl         | Image's url       | String  | ✓        |
| reference        | Reference         | String  | ✓        |
| priceCatalog     | Price catalog     | String  | ✓        |
| pricePromotion   | Price promotion   | String  |          |
| priceSpecial     | Price special     | String  |          |

You can validate your response data format with the associated [json schema](https://developers.iadvize.com/json-schemas/product-list/product.json).

## Customer information <a href="#customer-information" id="customer-information"></a>

The customer information plugin enables iAdvize's Console panel users to access to customer information in a single click. Agents can overview the customer information in a new window while they are chatting. Operators can then edit it or simply look for information.

To be able to retrieve the customer information, iAdvize must be able to identify the visitor thanks to an email and/or an external ID.

![Customer information](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/visitorprofilefeature@2x.png)

**Add the customer information plugin** In order to set the right plugin parameters, all you have to do is to declare:

* The customer information URL - this is your customer information URL (mandatory).
* The customer information action URL - This URL will be triggered, if agent click on ACTION type field. This field is not mandatory.

**Customer information data**

**Request - GET method**

| Query parameter    | Description                                                           | Values                                                         |
| ------------------ | --------------------------------------------------------------------- | -------------------------------------------------------------- |
| emailVisitor       | Visitor email                                                         | ?emailVisitor=<email@iadvize.com>                              |
| idConnectorVersion | Connector version id                                                  | ?idConnectorVersion=c008849d-7cb1-40ca-9503-d6df2c5cddd8       |
| idVisitorExternal  | Visitor external id                                                   | ?idVisitorExternal=123                                         |
| idVisitorUnique    | Visitor unique id                                                     | ?idVisitorUnique=a7b94266db827c5b8f04586e8e543abd4b7e976e9a723 |
| idWebsite          | Unique identifier of the website on which your connector is installed | ?idWebsite=ha-123                                              |
| operatorLocale     | Operator locale                                                       | ?operatorLocale=en                                             |
| idOperator         | Unique identifier of the operator loading the visitor profile         | ?idOperator=9999                                               |

**Response - Array of fields**

```json
[
    {
        "id":"crm_profile_link",
        "label": "CRM profile",
        "value": "https://www.crm.fr/customer-information",
        "fieldType":"URL"
    },
    {
        "id":"crm_visitor_tag",
        "label": "CRM tag",
        "value": "tag",
        "fieldType": "TEXT"
    },
    {
        "id":"crm_create_case_action",
        "label": "Create a case",
        "value": "OPEN_CASE",
        "fieldType": "ACTION"
    }
]
```

| Field     | Description       | Values                    | Required |
| --------- | ----------------- | ------------------------- | -------- |
| id        | Unique identifier | String                    | ✓        |
| label     | Label             | String                    | ✓        |
| value     | Value             | String                    | ✓        |
| fieldType | Field type        | `ACTION`, `TEXT` or `URL` | ✓        |

You can validate your response data format with the associated [json schema](https://developers.iadvize.com/json-schemas/customer/information.json).

**Customer information action URL**

**Request - POST method**

| Body parameters    | Description                                                           | Values                                        |
| ------------------ | --------------------------------------------------------------------- | --------------------------------------------- |
| action             | Action to execute on the connector                                    | OPEN\_CASE                                    |
| idConnectorVersion | Connector version id                                                  | c008849d-7cb1-40ca-9503-d6df2c5cddd8          |
| idVisitorUnique    | Visitor unique id                                                     | a7b94266db827c5b8f04586e8e543abd4b7e976e9a723 |
| idWebsite          | Unique identifier of the website on which your connector is installed | ha-123                                        |
| idConversation     | Identifier of the current conversation                                | ha-123                                        |
| idOperator         | Operator identifier who has clicked on the action                     | ha-12345                                      |

**Response - Array of fields**

```json
{
    "success": true,
    "message": "Case created with success"
}
```

| Field   | Description                  | Values  | Required |
| ------- | ---------------------------- | ------- | -------- |
| success | Result of the action         | Boolean | ✓        |
| message | Result message of the action | String  |          |

You can validate your response data format with the associated [json schema](https://developers.iadvize.com/json-schemas/customer/action.json).

## Conversation closing form <a href="#conversation-closing-form" id="conversation-closing-form"></a>

The conversation closing form plugin enables iAdvize's Console panel users to provide additional information manually at the end of conversation. **This plugin is only available for Chat / Call and Video channels**. 3rd part channels are not supported.&#x20;

![Conversation closing form plugin](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/close_conversation@2x.png)

**Add the conversation closing form plugin**

In order to set the right plugin parameters, all you have to do is to declare:

* The connector URL - this is your form's url

**Conversation Closing Form data**

**Request - GET method**

| Query parameter    | Description                                                              | Values                                                   |
| ------------------ | ------------------------------------------------------------------------ | -------------------------------------------------------- |
| idConnectorVersion | Connector version id                                                     | ?idConnectorVersion=c008849d-7cb1-40ca-9503-d6df2c5cddd8 |
| idWebsite          | Unique identifier of the associated website (assigned to you by iAdvize) | ?idWebsite=ha-123                                        |
| operatorLocale     | Operator locale                                                          | ?operatorLocale=en                                       |
| idOperator         | Unique identifier of the operator loading the form                       | ?idOperator=9999                                         |

**Response - Array of inputs**

| Field         | Description                                   | Values                                                           | Required |
| ------------- | --------------------------------------------- | ---------------------------------------------------------------- | -------- |
| id            | Unique identifier                             | string                                                           | ✓        |
| idParent      | Parent identifier, if the field depends on it | string                                                           |          |
| label         | Label                                         | string                                                           | ✓        |
| fieldType     | Field type                                    | `TEXT`, `CHECKBOX`, `SELECT`, `TEXTAREA`, `INTEGER` or `DECIMAL` | ✓        |
| isRequired    | Required                                      | Boolean                                                          | ✓        |
| options       | List of options object for `SELECT` type      | array                                                            |          |
| options.label | Label displayed for this option               | string                                                           | ✓        |
| options.value | Value saved when option is selected           | string                                                           | ✓        |

```json
[
    {
        "id": "create_crm_ticket",
        "label": "Create a CRM ticket",
        "fieldType": "CHECKBOX",
        "isRequired": true
    },
    {
        "id": "brand_name",
        "label": "Brand name",
        "fieldType": "TEXT",
        "isRequired": true
    },
    {
        "id": "brand_description",
        "label": "Brand name brings a totally new concept \n to their customers.",
        "fieldType": "TEXTAREA",
        "isRequired": true
    },
    {
        "id": "ticket_priority",
        "idParent": "create_crm_ticket",
        "label": "Priority",
        "fieldType": "SELECT",
        "isRequired": true,
        "options": [
            {
                "label": "Major",
                "value": "MAJOR"
            },
            {
                "label": "Minor",
                "value": "MINOR"
            },
            {
                "label": "Trivial",
                "value": "TRIVIAL"
            }
        ]
    },
    {
        "id": "order_id",
        "label": "The order id related to the claim",
        "fieldType": "INTEGER",
        "isRequired": false
    },
    {
        "id": "order_discount",
        "label": "The discount granted to the customer",
        "fieldType": "DECIMAL",
        "isRequired": false
    }
]
```

You can validate your response data format with the associated [json schema](https://developers.iadvize.com/json-schemas/conversation-closing-form/field.json).

⚠️ iAdvize can save up to 1024 characters in each field

#### &#x20;<a href="#conversation-panel-app" id="conversation-panel-app"></a>

## Conversation panel app <a href="#conversation-panel-app" id="conversation-panel-app"></a>

Conversation panel apps extends the capabilities of the Desk by allowing our clients to embed their own apps in a dedicated panel.

**General guidelines**

A complete breakdown of our guidelines for Conversation Panel Apps can be found in [our knowledge base](https://help.iadvize.com/hc/en-gb/articles/4404351307026-Conversation-Panel-Apps-Guidelines).

**App development**

The apps that can be embedded in the Desk are web apps coded in any web compliant technology - static web page, dynamic web pages such as php or jsp generated, single page applications written in Angular or React, etc...

These apps will be embedded in an `iframe` element in the Desk, and the web server serving these apps must allow them to run in an iframe on the iAdvize domains: [https://sd.iadvize.com](https://sd.iadvize.com/) or [https://ha.iadvize.com](https://ha.iadvize.com/). This is done by configuring the `X-FRAME-OPTIONS` header.

The app can communicate with the desk by using a library provided by iAdvize.

Please note that one iframe is created per conversation in order to keep a context for an app for each conversation. It is recommended to keep the app very lightweight and avoid heavy processing or streaming updates.

**Library quick start**

To use the library an app must include a javascript bundle in the html with the following code.

```html
<script src="https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.umd.production.min.js"></script>
```

Then in the javascript code of the app the library can be used as follows.

```javascript
window.idzCpa.init().then(client => {
    client.insertTextInComposeBox('Hello world!');
});
```

⚠️ CPAs available on the iAdvize iOS and Android apps must use the version 2.0.3 or greater.

**API reference**

**idzCpa**

`idzCpa` is a global variable used as the entry point of the CPA library.

**init**

```javascript
function init(): Promise
```

The client is obtained via the `idzCpa.init` function that returns a Promise.

```javascript
const clientPromise = idzCpa.init();
clientPromise.then(client => { / do something /});
```

**Client context**

```typescript
client.context // => Context

type Context = {
    conversationId: string;
    projectId: string;
    channel: Channel;
    language: string;
}

// list of available channels:
enum Channel {
  AppleBusinessChat = 'APPLE_BUSINESS_CHAT',
  Call = 'CALL',
  Chat = 'CHAT',
  Facebook = 'FACEBOOK',
  FacebookBusinessOnMessenger = 'FACEBOOK_BUSINESS_ON_MESSENGER',
  GoogleBusinessMessages = 'GOOGLE_BUSINESS_MESSAGES',
  Instagram = 'INSTAGRAM',
  MobileApp = 'MOBILE_APP',
  Sms = 'SMS',
  Twitter = 'TWITTER',
  Video = 'VIDEO',
  Whatsapp = 'WHATSAPP',
}
```

The `context` property on the client returns the conversation context: conversation ID and project ID.

```
client.context.conversationId // => '5701a92f-a8e3-49ad-81dc-ac801171f799'
client.context.projectId // => '3103'
client.context.channel // => 'CHAT'
client.context.language // => 'fr'
```

**List of commands available**

| Command                                          | Description                                                                                         |
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
| `insertTextInComposeBox`                         | Allows the CPA to send some text to the active thread compose zone.                                 |
| `pushCardInConversationThread`                   | Allows the CPA to send a card to the active conversation thread.                                    |
| `pushCardBundleInConversationThread`             | Allows the CPA to send a card carousel to the active conversation thread.                           |
| `pushApplePayPaymentRequestInConversationThread` | Allows the CPA to send an Apple Pay Payment request in the conversation thread.                     |
| `getJWT`                                         | Allows the CPA to get a JWT token signed with the secret token defined in the connector of the CPA. |

**How to use each command**

`insertTextInComposeBox`

Allows the CPA to send some text to the active thread compose zone.

*Signature*

```typescript
function insertTextInComposeBox(value: string): void
```

⚠️ value field is required

*Example*

```javascript
client.insertTextInComposeBox('Hello world!');
```

*Result*

![insertTextInComposeBox](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/cpa-insertTextInComposeBox.png)

`pushCardInConversationThread`

Allows the CPA to send a card to the active conversation thread.

*Signature*

```typescript
type Action = {
    type: 'LINK';
    title: string;
    url: string;
}

type Card = {
    title?: string;
    text?: string;
    actions: Action[],
    image?: {
        url: string;
        description: string;
    }
}

function pushCardInConversationThread(value: Card): void
```

⚠️ *actions* field is required and must contain at least one action of LINK type ⚠️ *title*, *text* and *image* fields are optional

*Example*

```typescript
const card: Card = {
    title: "Card 1 title",
    text: "Card 1 description",
    actions: [
        {
          type: 'LINK',
          title: "Click here",
          url: "https://..."
        },
    ],
    image: {
        url: "https://...",
        description: "Image description add to alt img attribute",
    }
}

client.pushCardInConversationThread(card)
```

*Result*

![pushCardInConversationThread](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/cpa-pushCardInConversationThread.png)

`pushCardBundleInConversationThread`

Allows the CPA to send a card carousel to the active conversation thread.

*Signature*

```typescript
type Carousel = {
    title?: string;
    cards: Card[]; // See pushCardInConversationThread command for more information of Card type
}

function pushCardBundleInConversationThread(value: Carousel): void
```

⚠️ *title* field of Carousel is optional ⚠️ *cards* field of Carousel is required

*Example*

```typescript
const card1: Card = {
    title: "Card 1 title",
    text: "Card 1 description",
    actions: [
        {
          type: "LINK",
          title: "Click here",
          url: "https://...",
        }
    ],
    image: {
        url: "https://...",
        description: "Image description add to alt img attribute"
    }
}

const card2: Card = {
    title: "Card 2 title",
    text: "Card 2 description",
    actions: [
        {
          type: "LINK",
          title: "Click here",
          url: "https://...",
        }
    ],
    image: {
        url: "https://...",
        description: "Image description add to alt img attribute"
    }
}

const carousel: Carousel = { cards: [ card1, card2 ] }

client.pushCardBundleInConversationThread(carousel)
```

*Result*

![pushCardBundleInConversationThread](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/cpa-pushCardBundleInConversationThread.png)

`getJWT`

* Allows the CPA to get a secured JWT token. This JWT is signed with the secret token defined in the connector of the CPA.

*Signature*

```typescript
function getJWT(): Promise
```

*Example*

```typescript
// use jwtToken on CPA for secure request
client.getJWT().then((jwtToken: string) => { / use JWT token / })
```

`pushApplePayPaymentRequestInConversationThread`

* Allows the CPA to send an Apple Pay Payment request to the active conversation thread.
* The CPA can only send an Apple Pay Payment request to a conversation from an Apple channel.

*Signature*

```typescript
type ApplePayPaymentRequestType = {
    requestIdentifier: UUID;
    payment: ApplePayPaymentRequest;
    receivedMessage: ApplePayReceivedMessage;
}

// Detail for payment field type
type ApplePayPaymentRequest = {
  currencyCode: string;
  lineItems: PaymentItem[];
  requiredBillingContactFields: ApplePayContactField[];
  requiredShippingContactFields: ApplePayContactField[];
  shippingMethods: ShippingMethod[];
  total: PaymentItem;
}

type PaymentItem = {
  amount: string;
  label: string;
  type: ApplePayLineItemType;
};

enum ApplePayLineItemType {
  final,
  pending,
}

type ShippingMethod = {
  amount: string;
  detail: string;
  identifier: string;
  label: string;
};

enum ApplePayContactField {
  email = 'email',
  name = 'name',
  phone = 'phone',
  postalAddress = 'postalAddress',
  phoneticName = 'phoneticName',
}

// type for receivedMessage field
type ApplePayReceivedMessage = {
  type: 'CARD';
  data: CardType;
}

type CardType = {
  title?: string;
  text?: string;
  image?: CardImage;
  actions: LinkAction[];
};

type CardImage = {
  url: string;
  description: string;
};

type LinkAction = {
  type: 'LINK';
  title: string;
  url: string;
};

// Error
type ActionError = {
    message: string;
    details?: string[];
}

function pushApplePayPaymentRequestInConversationThread(applePayPaymentRequest: ApplePayPaymentRequestType): Promise
```

**Note**

If the request of payment is not sent, you may have an error in your request payload. To help you fix your payload, you can catch the error Promise: an ActionError is available with more details on what's happening.

More details about the `ApplePayPaymentRequest` type are provided in the [official Apple developer documentation.](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest)

*Example*

```typescript
const applePayPaymentRequest: ApplePayPaymentRequestType = {
    requestIdentifier: "83f86edb-XXXXX", // UUID
    payment: {
        currencyCode: "USD",
        lineItems: [
            {
                amount: "45",
                label: "Earpods",
                type: "final"
            },
            {
                amount: "955",
                label: "iPhone 12 mini",
                type: "final"
            }
        ],
        requiredBillingContactFields: ["email"],
        requiredShippingContactFields: ["email"],
        shippingMethods: [
            {
                amount: "10",
                detail: "Available within an hour",
                identifier: "in_store_pickup",
                label: "In-StorePickup"
            }
        ],
        total: {
            amount: "1000",
            label: "TOTAL",
            type: "final"
        }
    },
    receivedMessage: {
        type: "CARD",
        data: {
            title: "Please check this payment request",
            text: "Check this payment request and choose your shipping method",
            actions: [],
            style: "icon"
        }
    }
}

client.pushApplePayPaymentRequestInConversationThread(applePayPaymentRequest)
    .then(() => /* success apple pay payment request */)
    .catch((error: ActionError) =>
        /* error.message -> Error on command request */
        /* error.details (if exists) -> More details about the error if it exists */
    )
```

*Result*

* *Message for an operator in the conversation thread when the CPA pushes an Apple Pay Payment Request:*

![applePaymentRequest](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/cpa-apple-payment-request.png)

* *Success payment:*

![applePaymentSuccess](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/cpa-apple-payment-success.png)

* *Failed payment:*

![applePaymentFailed](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/cpa-apple-payment-failed.png)

**Style sheet**

The library also provides a standalone stylesheet with CSS variables built-in to fit iAdvize's design guidelines.

An app can include it either in its HTML:

```html
<link rel="stylesheet" src="https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.base.css">
```

Or as a top-level import inside a preprocessed-stylesheet:

```css
@import 'https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.base.css';
```

A complete description of the provided variables can be found in [our knowledge base](https://help.iadvize.com/hc/en-gb/articles/4404351307026-Conversation-Panel-Apps-Guidelines#5-how-to-easily-style-your-custom-app-for-a-consistent-user-interface-integration-in-the-desk).

*Library Change log*

| Version | Description                                                                                                                                                                                                                     |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1.0.0   | Initial version with support for inserting text in the compose box via `insertTextInComposeBox`.                                                                                                                                |
| 1.2.0   | Add Conversation Panel App style sheet.                                                                                                                                                                                         |
| 2.0.3   | Add mobile apps support - from this version apps hosted in the iAdvize iOS and Android apps can use this library.                                                                                                               |
| 2.1.0   | Return the conversation context in the client.                                                                                                                                                                                  |
| 2.3.1   | Support for inserting image type card and carousel of image type cards in the conversation thread via `insertCardInConversationThread` and `insertCarouselInConversationThread`                                                 |
| 2.4.0   | Replace command name and signature of each command: `insertCardInConversationThread` is replaced by `pushCardInConversationThread` and `insertCarouselInConversationThread` is replaced by `pushCardBundleInConversationThread` |
| 2.6.0   | Add new action `getJWT` to get a secured JWT token                                                                                                                                                                              |
| 2.7.0   | Add new command `pushApplePayPaymentRequestInConversationThread` to send Apple Pay Payement request in the conversation thread                                                                                                  |
| 2.9.0   | Add channel on init context                                                                                                                                                                                                     |

**Configuration**

Under the Plugins section create a Conversation Panel App and then edit the following fields:

**App name**

This is the name that will show in the toolbar button that starts your app. The name must be provided as a json object that contains a `default` name and then names for each language the app needs to support.

For instance `{"default": "Orders", "EN": "Orders", "FR": "Commandes"}`.

**Icon name**

The icon name refers to a set of predefined icons provided by iAdvize that will appear in the button that starts the app.

A live preview of each icon can be found [here](https://front.storybook.iadvize.net/icons/master/iframe.html?id=special-icons-for-conversation-panel-apps--page\&viewMode=story)

Here is the list of available options by domain - the name must be entered in upper case.

```
Coupon
COUPON, DOLLAR, PERCENTAGE, TICKETS
Qualify lead
STAMP
Segmentation
TARGET, CARD
Delivery
DELIVERY, PACKAGE
Orders
ORDER, BOXES
Stock
STOCK, WAREHOUSE
Knowledge base
RECOMMENDATION, FILES, FOLDERS, SEARCH
User account
PROFILE, TARGETING, PROFILECARDS
Invoicing
INVOICING
Payment
PAYMENT
Shopping cart
SHOPPINGCART, SEARCHSHOPPINGCART
Product availability
BAGQUESTION, BAGSEARCH, PACKAGESEARCH
Stores
STORE
Location
LOCATION, POSITION, LOCATIONPIN
Assistance
TOOLS, TOOLING, HELP
Note
NOTE
Booking
BOOKING
Tags
TAG
Hotels & Services
HOTELS, HOTELOFFER, SERVICES
Generic/Random
NOTEBOOK, DIAMOND, BOUSSOLE, SHIRT, GEAR, FRAME45, TARGETING
```

![Conversation panel app icons](https://raw.githubusercontent.com/iadvize/documentation/master/docs/assets/images/conversation-panel-app.png)

**iFrame URL**

This field provides the URL that the Desk will use to start your app. It must be a public URL that can be targeted by the browser that runs the desk and available via https.

For instance: `https://mycompany.com/ordersapp`

**Enable for operators**

Check this checkbox to make the app available for operators.

**Enable for experts**

Check this checkbox to make the app available for ibbü experts.

**Use authentication**

Check this checkbox if your app requires a proof that the CPA is loaded within the desk or if you want the ID of the operator. You will receive a JWT in the url parameters that is signed with the secret token defined in the connector of the CPA. For instance a URL with a JWT will look like this:

<https://app.iadvize.com/order.html?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9>...

The JWT can be decoded and validated by standard JWT libraries, for instance the jsonwebtoken library from auth0 <https://github.com/auth0/node-jsonwebtoken>

The code to decode a JWT looks like this:

```typescript
const inputToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...";
const secrettoken = '97db6bc85144af406a0e0040ad6f354b';
try {
const verifiedToken = jwt.verify(    inputToken,     secretToken,     { algorithms: ['HS256'] });// do something with verifiedToken// example token// {//     iss: 'iadvize',//     sub: '270586',//     aud: 'https://app.iadvize.com/order.html',//     exp: 1644502986,//     iat: 1644502926,//     email: 'operator@company.com'// }
} catch(err) {
// handle the error by returning an unauthorised response
}
```

The JWT contains the following properties:

* `iss` the issuer is always `iadvize`
* `sub` the subject, it is the operator ID
* `aud` the audience is the url of the targeted CPA
* `iat` the issue time, unix timestamp in number of seconds
* `exp` the expiry time, unix timestamp in number of seconds
* `email` the operator email address

## External bots <a href="#external-bots" id="external-bots"></a>

Bots are an important part of iAdvize integration ecosystem. That's why they have their [own dedicated documentation](/~/changes/39J6v2tWi3Ms7Me1qEFP/technologies/bots.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iadvize.dev/~/changes/39J6v2tWi3Ms7Me1qEFP/apps/build-your-app/app-plugins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
