Tutorial: Integrate Comm100 into a VoIP Solution

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

The standard features about integrating Comm100 Live Chat into a VoIP solution is clearly described at the above Integration Features article. We continue to use Vincall as the example to demonstrate how to add Comm100 into an VoIP solution.

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 the applications properly.
• Understand the Oauth2 workflow and finish the development with Comm100 Oauth service.
• Get authenticated and access Comm100 Restful APIs
• Embed Comm100 Control Panel or Agent Control pages into you own system

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

At the first step, you should prepare the local development environment and you may skip it if everything is ready. You still need to get a Comm100 account and create a Comm100 app. The Step 2, 3 and 4 are the required steps and we strongly suggest you complete these steps. The Step 5 and 6 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. Creating a Comm100 Account
4. Creating an App in Comm100

Part 2: Connecting to a Comm100 account 12 hours

1. Creating OAuth Client in Comm100 Site
2. Adding Tab and Button in Frontend
3. Logging in Comm100 and Redirecting to Vincall Backend Callback Service
4. Requesting Token and Redirecting to the Vincall Frontend
5. Checking Parameter Success and Displaying the Mapping Page

Part 3: Mapping the Agents 12 hours

1. Creating a New Page for Agent Mapping
2. Accessing Comm100 Agents API
3. Providing additional API for Agent Mapping
4. Adding Agents List from Frontend
5. Adding the Operation to Map Comm100 Agent
6. Adding the Operation to Remove a Mapping

Part 4: Embedding Live Chat Agent Console 12 hours

1. Adding Chat Tab in Vincall
2. Embedding Comm100 Agent Console via Emabeddable SDK
3. Enabling JWT Authentication for Comm100
4. Connecting to Comm100

Part 5: Adding Install Code and Chat Volume 12 hours

1. Adding the New Page in Vincall
2. Embedding Comm100 Control Panel vir Embeddable SDK
3. Adding the Chat Volume Page

Part 6: Managing the Status Exclusion 4 hours

1. Embedding the Agent Console in Vincall
2. Updating the Vincall Agent Status
3. Updating the Comm100 Agent Status
4. Bringing Them Together