How to use Dashboard Apps?

With Dashboard apps, you can integrate an app within the Karzoun dashboard for agents' use. This feature enables you to create an application independently, which can then be embedded to provide customers' information, orders, past payment history, etc.

When embedded in Karzoun's dashboard, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.

Step Go to Settings → Integrations → Dashboard apps. Click on the “Configure” button corresponding to the Dashboard Apps.

Step Add your app name and the URL on which your app is hosted.

Once you are done, a new tab with the name you gave to the app will appear in the conversation window. In this case, it is “Customer Orders”.
When you click on the new tab, you will be able to see your application fetching data on the Karzoun dashboard.

Receiving data from Karzoun into your app

Karzoun will deliver the conversation and contact context as a window event. This can be accessed within your app by implementing a listener for the event, as shown here:

window.addEventListener("message", function (event) {
  if (!isJSONValid(event.data)) {
    return;
  }

  const eventData = JSON.parse(event.data);
});

On-demand request for data from Karzoun

If you need to request the conversation data on demand from Karzoun, you can send a message to the parent window using the javascript postMessage API.

Karzoun will be listening to this key: Karzoun-dashboard-app:fetch-info.

Example
The following code can be used to query the dashboard app. Karzoun will respond to this request by providing the updated conversation payload promptly.

window.parent.postMessage('Karzoun-dashboard-app:fetch-info', '*')

// You would get a message in the on message listener with the appContext payload.

Event Payload

conversation object

{
  "meta": {
    "sender": {
      "additional_attributes": {
        "description": "string",
        "company_name": "string",
        "social_profiles": {
          "github": "string",
          "twitter": "string",
          "facebook": "string",
          "linkedin": "string"
        }
      },
      "availability_status": "string",
      "email": "string",
      "id": "integer",
      "name": "string",
      "phone_number": "string",
      "identifier": "string",
      "thumbnail": "string",
      "custom_attributes": "object",
      "last_activity_at": "integer"
    },
    "channel": "string",
    "assignee": {
      "id": "integer",
      "account_id": "integer",
      "availability_status": "string",
      "auto_offline": "boolean",
      "confirmed": "boolean",
      "email": "string",
      "available_name": "string",
      "name": "string",
      "role": "string",
      "thumbnail": "string"
    },
    "hmac_verified": "boolean"
  },
  "id": "integer",
  "messages": [
    {
      "id": "integer",
      "content": "Hello",
      "inbox_id": "integer",
      "conversation_id": "integer",
      "message_type": "integer",
      "content_type": "string",
      "content_attributes": {},
      "created_at": "integer",
      "private": "boolean",
      "source_id": "string",
      "sender": {
        "additional_attributes": {
          "description": "string",
          "company_name": "string",
          "social_profiles": {
            "github": "string",
            "twitter": "string",
            "facebook": "string",
            "linkedin": "string"
          }
        },
        "custom_attributes": "object",
        "email": "string",
        "id": "integer",
        "identifier": "string",
        "name": "string",
        "phone_number": "string",
        "thumbnail": "string",
        "type": "string"
      }
    }
  ],
  "account_id": "integer",
  "additional_attributes": {
    "browser": {
      "device_name": "string",
      "browser_name": "string",
      "platform_name": "string",
      "browser_version": "string",
      "platform_version": "string"
    },
    "referer": "string",
    "initiated_at": {
      "timestamp": "string"
    }
  },
  "agent_last_seen_at": "integer",
  "assignee_last_seen_at": "integer",
  "can_reply": "boolean",
  "contact_last_seen_at": "integer",
  "custom_attributes": "object",
  "inbox_id": "integer",
  "labels": "array",
  "muted": "boolean",
  "snoozed_until": null,
  "status": "string",
  "timestamp": "integer",
  "unread_count": "integer",
  "allMessagesLoaded": "boolean",
  "dataFetched": "boolean"
}

contact object

{
  "additional_attributes": {
    "description": "string",
    "company_name": "string",
    "social_profiles": {
      "github": "string",
      "twitter": "string",
      "facebook": "string",
      "linkedin": "string"
    }
  },
  "availability_status": "string",
  "email": "string",
  "id": "integer",
  "name": "string",
  "phone_number": "+91 9000000001",
  "identifier": "string || null",
  "thumbnail": "+91 9000000001",
  "custom_attributes": {},
  "last_activity_at": "integer"
}

currentAgent object

{
  "email": "string",
  "id": "integer",
  "name": "string"
}

Final Payload

{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Conversation Attributes>
    },
    "contact": {
      // <...Contact Attributes>
    },
    "currentAgent": {
      // <...Current agent Attributes>
    }
  }
}

Dashboard APP

How to use Dashboard Apps?#

Receiving data from Karzoun into your app#

On-demand request for data from Karzoun#

Event Payload#

contact object#

currentAgent object#