---
title: "Part 6: Managing the Status Exclusion"
slug: "part-6-managing-the-status-exclusion"
updated: 2022-06-20T10:45:43Z
published: 2022-06-20T10:45:43Z
canonical: "developer.comm100.com/part-6-managing-the-status-exclusion"
---

> ## 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.

# Part 6: Managing the Status Exclusion

## Introduction

In this article we'll look at how to implement state-exclusive between chat and call in Vincall. In the beginning, the agent is in the **Online** state and Vincall is the **Available** state: ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%2885%29.png)

When a new chat starts, Vincall's status will be updated to **Do not disturb**: ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%2886%29.png)

When there is a call in progress, the status of the agent is updated to **away**: ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%2887%29.png)

## Step-by-Step Instructions

The interaction between Comm100 and Vincall is achieved through [app client API](https://developer.comm100.com/docs/app-api-reference). Let's step through the state mutually exclusives of chat and call:

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)

### Embedding the Agent Console in Vincall

Embed the following script inside the `body` of the `html` file：

```
<body>
  <div id="comm100-agentconsole"></div>
  <script src="https://static.comm100.io/sdk/comm100-embeddable-sdk-v1_0_0.js"></script>
  <script>
    var agentconsole = new EmbeddedAgentConsole({
      appId: "{YOUR_APPID}",
      siteId: "{YOUR_SITEID}",
      entry: "visitors",
      container: document.getElementById("comm100-agentconsole"),
    });
    agentconsole.init().then(function (appclient) {
      window.__appclient = appclient;
    });
  </script>
</body>
```

Note that we use `window.__appclient` to store `AppClient` instances. For more details, check out the [Embedding Live Chat Agent Console](/x2/docs/part-4-embedding-live-chat-agent-console) article.

### Updating the Vincall Agent Status

1. Listen for chat events.  

When a chat starts or ends, we need to update the vincall status.  

[app client API](https://developer.comm100.com/docs/app-api-agent-console-api-livechat#event) provides the ability to listen for chat events. We'll use `agentconsole.chats.chatStarted` and `agentconsole.chats.chatEnded` events.  

In **vincall-portal** project, we can listen for these two events like this:

```
const client = window.__appclient;
client.on("agentconsole.chats.chatStarted", function (args) {
  // Update the status of Vincall here
});
client.on("agentconsole.chats.chatEnded", function (args) {
  // Update the status of Vincall here
});
```

1. Update the Vincall status.  

When a chat starts, we need to set vincall's status to **Do not distrub**; When there is a chat ending and the current number of chats is **0**, we need to set the status of Vincall to **Available**:

```
const client = window.__appclient;
client.on("agentconsole.chats.chatStarted", function (args) {
  // Update the status of Vincall here
  setVinCallStatus("Do not distrub");
});
client.on("agentconsole.chats.chatEnded", function (args) {
  // Update the status of Vincall here
  client.get("currentAgent").then((args) => {
    const currentAgent = args.data;
    // the current number of chats is 0
    if (currentAgent.chats === 0) {
      setVinCallStatus("Available");
    }
  });
});
```

### Updating the Comm100 Agent Status

[App client API](https://developer.comm100.com/docs/app-api-reference) provides the ability to update the current agent state:

```
const client = window.__appclient;
client.set("currentAgent.status", "online");
// OR
client.set("currentAgent.status", "away");
```

In **vincall-portal** project, we can update the current agent state like this:

```
const client = window.__appclient;

const handleCallStateUpdate = (callState) => {
  if (
    callState.status === "incomingAccept" ||
    callState.status === "outingCallingAccept"
  ) {
    client.set("currentAgent.status", "away");
  } else if (callState.status === "end") {
    client.set("currentAgent.status", "online");
  }
};
```

### Bringing Them Together

Eventually, our code can be like this:

index.html file:

```
<body>
  <div id="comm100-agentconsole"></div>
  <script src="https://static.comm100.io/sdk/comm100-embeddable-sdk-v1_0_0.js"></script>
  <script>
    var agentconsole = new EmbeddedAgentConsole({
      appId: "{YOUR_APPID}",
      siteId: "{YOUR_SITEID}",
      entry: "visitors",
      container: document.getElementById("comm100-agentconsole"),
    });
    agentconsole.init().then(function (appclient) {
      window.__appclient = appclient;
    });
  </script>
  <script src="app.bundle.js"></script>
</body>
```

Your app file:

```
import React, { useEffect } from "react";
import { APPClient } from "@comm100/app-client";

const client = window.__appclient;

const VinCallApp = () => {
  const [vinCallStatus, setVinCallStatus] = useState("Available");

  const handleCallStateUpdate = (callState) => {
    if (
      callState.status === "incomingAccept" ||
      callState.status === "outingCallingAccept"
    ) {
      client.set("currentAgent.status", "away");
    } else if (callState.status === "end") {
      client.set("currentAgent.status", "online");
    }
  };

  useEffect(() => {
    client.on("agentconsole.chats.chatStarted", function (args) {
      // Update the status of Vincall here
      setVinCallStatus("Do not distrub");
    });
    client.on("agentconsole.chats.chatEnded", function (args) {
      // Update the status of Vincall here
      client.get("currentAgent").then((args) => {
        const currentAgent = args.data;
        // the current number of chats is 0
        if (currentAgent.chats === 0) {
          setVinCallStatus("Available");
        }
      });
    });
  }, []);

  return (
    <main>
      <header>
        <h1>Vincall</h1>
      </header>
      <details></details>
    </main>
  );
};
```

In **vincall-portal** project, we encapsulate all client API related operations in **src/Runtime/defaultRuntime.ts** and **src/Pages/CallPanelPageApp.ts** files. You can find all the sample code there.

## Next Steps

In this article we use the [app client API](https://developer.comm100.com/docs/app-api-reference) to implement Comm100 and Vincall interaction. Next, you can start more challenging advanced Topics.