Integrating Unblu with Microsoft Teams

If your organization uses Microsoft Teams, you can integrate Unblu to provide your agents with a seamless experience when communicating with visitors. The Unblu MS Teams app gives your agents access to the Agent Desk from within MS Teams, so they can chat with visitors, take part in Unblu audio or video calls, and run co-browsing sessions from within MS Teams.

You must complete four steps to integrate an Unblu account into MS Teams:

Define an MS Teams bot for the Unblu account
Define the manifest for the account’s Unblu MS Teams app
Create the app archive and upload it to MS Teams
Configure the Unblu Collaboration Server

Each step is described in detail below.

If you want to integrate multiple Unblu accounts into MS Teams, you must repeat the steps for each Unblu account.

Define an MS Teams bot

The first step to integrate Unblu into MS Teams is to create a new bot for the Unblu account at https://dev.teams.microsoft.com/bots or https://dev.botframework.com.

Give your bot a display name.

Make a note of the bot ID. You need it when defining the manifest for the MS Teams app in the next step.

You can find the bot ID in the bot management overview.
Specify the messaging endpoint that points to your Unblu Collaboration Server. The endpoint is <unbluBaseUrl>/webhook/msteams?accountId=<accountId>.

Replace the parts in brackets as follows:
- <unbluBaseUrl> is the value of the configuration property com.unblu.identifier.internalServerBaseUrl.
- <accountId> is the ID of the Unblu account you want to integrate into MS Teams.
  
  To find the account ID through the Account Configuration interface, click Edit account on the Overview page and copy the part of the new page’s URL after the last / separator. Alternatively, you can retrieve the ID of the current account by calling the web API endpoint /accounts/getCurrentAccount.
Enable the MS Teams channel.

Create a client secret and make a note of it. You need it when you configure the Unblu Collaboration Server.

In the settings of your bot at https://dev.botframework.com, you can also add a description and an icon for the bot if you want.

Define the manifest for the MS Teams app

Before you can define the manifest for the app, generate a GUID to act as a unique ID for the app. Once you’ve generated a GUID, make a note of it. You must add it to the manifest, and you need it when configuring the Collaboration Server in the final step.

Now you’ve got everything you need to define the manifest. Download the template manifest manifest-template.jsonc and open it in your editor of choice.

Make the following changes to the template:

Replace <unique ID for the app> with the GUID you generated above.
Replace <botID> with the bot ID you noted in the previous step.
Replace all other values in brackets--<com.unblu.app>, for example—with the correct values. The changes you have to make are detailed in the template for the manifest.
Remove all the comments from the file.

When you’ve finished editing the manifest, save it as a file called manifest.json.

Create the app archive and upload it to MS Teams

The next step is to create an app archive. This is a ZIP file that must contain the following files:

manifest.json
color.png
outline.png

color.png and outline.png are used as icons in MS Teams. You can create your own PNG files for icons or use the files linked below:

You’re now ready to upload your app to MS Teams.

Go to https://admin.teams.microsoft.com/policies/manage-apps
Click Upload new app and select the app archive you created in the previous step.

Don’t install the app for any users yet! Installing the app triggers webhooks that are sent to the Collaboration Server. You must configure the Unblu Collaboration Server before you install the app for users.

Configure the Unblu Collaboration Server

The final step is to configure the Collaboration Server to communicate with MS Teams. For that, you must set the following configuration properties:

com.unblu.msteams.enableTeamsIntegration: set the property to true. This configuration property can be set in the GLOBAL scope or the individual ACCOUNT scopes.
com.unblu.msteams.unbluAppId: enter the app ID you noted down earlier, when defining the manifest for your MS Teams app.
com.unblu.msteams.botApiClientSecret: enter the client secret you made a note of in the first step, when defining the MS Teams bot.

Using the Unblu MS Teams app

Once you’ve added the Unblu MS Teams app to your agents' MS Teams accounts, they have an icon for the app in the side panel on the left. Clicking the icon opens the app on the Chat tab, which displays the latest notifications MS Teams received from Unblu.

Clicking the Conversation button on one of the notifications opens the conversation in app’s Desk tab, which displays the Unblu Agent Desk within MS Teams. Agents can also access the Agent Desk directly by clicking the Desk tab.

The About tab displays some basic information about the app, such as the description.

If an agent’s in a different part of MS Teams when a customer sends them a message, MS Teams displays a notification, provided you’ve configured it to do so. Clicking the Conversation button on this notification also takes the agent straight to the conversation in the Desk tab.

Agents also receive notifications for Unblu audio and video calls. Again, they can open the Desk tab by clicking Conversation on the notification and then accept or decline the call.