Part 7: Adding the Call Report

Introduction

In the previous tutorial, you have created an App and have authenticated Comm100 Agent in Vincall. Then you can log in to the Vincall system through Agent mapping. In this tutorial, You will learn how to add Vincall Call Panel into Comm100 Agent Console Nav Bar.

Step-by-Step Instructions

The tutorial covers the following tasks:

1. Add Definition in the App Manifest
2. Authenticating and Redirect to the Page

Add Definition in the App Manifest

Add the following definition to the manifest.json file (/src/assets/manifest.json) in vincall-app:

  "controlPanel": {
    "pages": [
      {
        "id": "vincall-report",
        "path": "reporting/vincallreport",
        "url": "https://www.vincall.net/#/reports",
        "icon": "./images/vincall.svg",
        "label": "Vincall Report"
      }
    ]
  }

• id: vincall-report. We just have to make sure it's unique in the app.
• path: reporting/vincallreport. In Comm100 system, the path of this page.
• url: https://www.vincall.net/#/reports. When accessing the page through the above path, the url of the loaded page.
• icon: ./images/vincall.svg. In Comm100 system, the icon of this page.
• label: Vincall Report. The browser's tab when accessing the page through the above path.

Authenticating and Redirect to the Page

On the login page of Vincall, you must authenticate the user according to the agent mapping, confirm the Vincall agent corresponding to the current Comm100 agent, and return the corresponding Vincall call panel that needs to be loaded. For details, see Authenticating with Comm100 Agent.

After the configuration is completed and loaded correctly, The call report will display successfully.

Next Steps

This article has taught you how to add Vincall Call Report into Comm100 Reports, and after setting, you can access the embedded Vincall page in the Comm100 system, so you don't have to jump between the two systems.

Next, you can follow the tutorial of Managing the status exclusion.