---
title: "Tutorial: Integrate Comm100 into a VoIP Solution"
slug: "integrate-comm100-into-a-voip-solution"
updated: 2022-06-20T10:45:45Z
published: 2022-06-20T10:45:45Z
canonical: "developer.comm100.com/integrate-comm100-into-a-voip-solution"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.comm100.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/docs/part-1-preparation) `4 hours`

1. [Installing the Development Tools](/docs/part-1-preparation#installing-the-development-tools)
2. [Running the Vincall Project](/docs/part-1-preparation#running-the-vincall-project)
3. [Creating a Comm100 Account](/docs/part-1-preparation#creating-a-comm100-account)
4. [Creating an App in Comm100](/docs/part-1-preparation#creating-an-app-in-comm100)

## [Part 2: Connecting to a Comm100 account](/docs/part-2-connecting-to-a-comm100-account) `12 hours`

1. [Creating OAuth Client in Comm100 Site](/docs/part-2-connecting-to-a-comm100-account#creating-oauth-client-in-comm100-site)
2. [Adding Tab and Button in Frontend](/docs/part-2-connecting-to-a-comm100-account#adding-tab-and-button-in-frontend)
3. [Logging in Comm100 and Redirecting to Vincall Backend Callback Service](/docs/part-2-connecting-to-a-comm100-account#logging-in-comm100-and-redirecting-to-vincall-backend-callback-service)
4. [Requesting Token and Redirecting to the Vincall Frontend](/docs/part-2-connecting-to-a-comm100-account#requesting-token-and-redirecting-to-the-vincall-frontend)
5. [Checking Parameter Success and Displaying the Mapping Page](/docs/part-2-connecting-to-a-comm100-account#checking-parameter-success-and-displaying-the-mapping-page)

## [Part 3: Mapping the Agents](/docs/part-3-mapping-the-agents) `12 hours`

1. [Creating a New Page for Agent Mapping](/docs/integrate-comm100-into-a-voip-solution#creating-a-new-page-for-agent-mapping)
2. [Accessing Comm100 Agents API](/docs/integrate-comm100-into-a-voip-solution#accessing-comm100-agents-api)
3. [Providing additional API for Agent Mapping](/docs/integrate-comm100-into-a-voip-solution#providing-additional-api-for-agent-mapping)
4. [Adding Agents List from Frontend](/docs/integrate-comm100-into-a-voip-solution#adding-agents-list-from-frontend)
5. [Adding the Operation to Map Comm100 Agent](/docs/integrate-comm100-into-a-voip-solution#adding-the-operation-to-map-comm100-agent)
6. [Adding the Operation to Remove a Mapping](/docs/integrate-comm100-into-a-voip-solution#adding-the-operation-to-remove-a-mapping)

## [Part 4: Embedding Live Chat Agent Console](/docs/part-4-embedding-live-chat-agent-console) `12 hours`

1. [Adding Chat Tab in Vincall](/docs/part-4-embedding-live-chat-agent-console#adding-chat-tab-in-vincall)
2. [Embedding Comm100 Agent Console via Emabeddable SDK](/docs/part-4-embedding-live-chat-agent-console#embedding-comm100-agent-console-vir-embeddable-sdk)
3. [Enabling JWT Authentication for Comm100](/docs/part-4-embedding-live-chat-agent-console#enabling-jwt-authentication-for-comm100)
4. [Connecting to Comm100](/docs/part-4-embedding-live-chat-agent-console#connecting-to-comm100)

## [Part 5: Adding Install Code and Chat Volume](/docs/part-5-adding-install-code-and-chat-volume) `12 hours`

1. [Adding the New Page in Vincall](/docs/part-5-adding-install-code-and-chat-volume#adding-the-new-page-in-vincall)
2. [Embedding Comm100 Control Panel vir Embeddable SDK](/docs/part-5-adding-install-code-and-chat-volume#embedding-comm100-control-panel-vir-embeddable-sdk)
3. [Adding the Chat Volume Page](/docs/part-5-adding-install-code-and-chat-volume#adding-the-chat-volume-page)

## [Part 6: Managing the Status Exclusion](/docs/part-6-managing-the-status-exclusion) `4 hours`

1. [Embedding the Agent Console in Vincall](/docs/part-6-managing-the-status-exclusion#embedding-the-agent-console-in-vincall)
2. [Updating the Vincall Agent Status](/docs/part-6-managing-the-status-exclusion#updating-the-vincall-agent-status)
3. [Updating the Comm100 Agent Status](/docs/part-6-managing-the-status-exclusion#updating-the-comm100-agent-status)
4. [Bringing Them Together](/docs/part-6-managing-the-status-exclusion#bringing-them-together)