Tutorial: Integrate a VoIP Solution into Comm100

This tutorial show you how to integrate a VoIP solution into Comm100 platform.

The standard features about integrating a VoIP solution into Comm100 is clearly described at the above Integration Features article. We continue to use Vincall as the example to demonstrate how to add Vincall's call feature into Comm100 platform.

The tutorial assumes that you are a frontend developer or a backend developer or a full stack developer. You have got the basic frontend or backend technology knowledge and development skills.

After completing this tutorial, you'll be able to:

• Initialize your local development environment, develop and debug your app package properly.
• Create the app, initialize the app package and develop the settings page
• Embed page into Comm100 Agent Console and Control Panel
• Understand the extended authentication settings and complete the authentication process

Now we are going to begin the journey. There are 8 steps in the below list.

At the first step, you should prepare the local development environment. You could skip it if everything is ready. The Step 2, 3, 4 and 5 are the required steps and we strongly suggest you complete these steps. The Step 6, 7 and 8 are optional steps based on your business needs.

We add the estimated the work effort at each step for your reference.

Part 1: Preparation 4 hours

1. Installing the Development Tools
2. Running the Vincall Project
3. Getting the Projects of Integraiton
4. Creating a Comm100 Account

Part 2: Setting up the App 12 hours

1. Creating an App in Comm100
2. Adding Settings Page
3. Creating Comm100 OAuth Client
4. Authenticating with Comm100 Agent via OAuth 2

Part 3: Connecting with Vincall Account 8 hours

1. Preparing Vincall OAuth 2 Credentials
2. Creating APIs for Querying or Saving State of Connection
3. Displaying the Connection State Page
4. Connecting to Vincall for Getting Authorization
5. Refreshing the Connection State Page

Part 4: Mapping the agents 12 hours

1. Creating a New Page for Agent Mapping
2. Get the Agent of the Current Site Through the Restful API of Comm100
3. Providing Additional API Interfaces for Mapping

Part 5 Embedding the Call Panel 12 hours

1. Adding New Tab in Nav Bar
2. Authenticating with Comm100 Agent

Part 6 Embedding the Dial Pad 8 hours

1. Adding a Phone Button in Agent Console
2. Developing a Dial Pad Page in Vincall
3. Add Event Handling for Call Events in Vincall

Part 7 Adding the Call Report 4 hours

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

Part 8 Managing the status exclusion 4 hours

1. Updating the Vincall Status
2. Updating the Comm100 Agent Status
3. Bringing Them Together