In this article, we will work on an integration for Microsoft Teams and the Voiceflow Dialog Manager API.
Before you start
The first this you will have to do is to add the Developer Portal app to your Teams:
After the install you will find the app on the left sidebar:
Go to the Apps tab and click on + New app
The next steps are pretty straight forward as you just need to fill the required fields.
Click Save to create the app.
Now, create a Bot for your app.
Form the Tool tab, click on + New Bot
We want to create a new Bot so click on the Create a new bot link
Keep that page open as we will need it later to fill the Bot endpoint address and generate a client secret:
For the following step, we are assuming that your dev environment is already setup
In a directory, clone the following Git repository and install the dependencies: https://github.com/voiceflow-gallagan/api-integration-msteams
git clone https://github.com/voiceflow-gallagan/api-integration-msteams.git cd api-integration-msteams && npm i
Open the .env.template file in the editor of your choice:
MicrosoftAppId='<your bot id>' MicrosoftAppPassword='<your bot secret>' VOICEFLOW_VERSION='development' VOICEFLOW_API_KEY='<Voiceflow Chat project API>' VOICEFLOW_RUNTIME_ENDPOINT='https://general-runtime.voiceflow.com' TUNNEL_SUBDOMAIN='voiceflow-teams' PORT=3978
Update the TUNNEL_SUBDOMAIN with the subdomain of your choice. Try to use something “unique” as we will use it to generate a tunnel so you will be able to test your Bot in Teams.
For the VOICEFLOW_API_KEY, simply copy/paste it form your Voiceflow’s project.
- open your Chat project in Voiceflow
- click on the Integrations button in the sidebar (shortcut: 4)
- copy your Dialog API key
- paste it in the .env.template file
If you want to, you can also change the port you want to use. Here we will keep 3978.
Now, we will need to grab the MicrosoftAppId et MicrosoftAppPassword from the Developer app on Teams.
But first, let’s finish to setup our Bot, in the Endpoint address field, type the following URL:
Click on Save
To generate the MicrosoftAppPassword, click on Client secrets on the left:
Then click on Add a client secret for your bot:
Copy the generated secret and paste it in your .env.template for the MicrosoftAppPassword value.
For the MicrosoftAppId, go back to the previous screen:
and copy the Bot ID
Paste the id in your .env.template for the MicrosoftAppId.
Go back to the Apps tab and click on the app you’ve created
From the left panel, click on App features and select Bot in the App features list:
Select your bot, check the last 3 boxes and click on Save
The Teams setup is done, you will be able to Publish your App to your Org store when you will be ready and/or on a production stage.
You are ready to test your bot, rename the .env.template to .env and launch the node app.
he console should give the following output:
Microsoft share a test tool to help you debugging your Bot, to start testing, download the version for your platform here:
Install the Bot Framework Emulator and open it to create a Bot configuration
For the endpoint URL, we are testing locally so use (edit the port if you choose another one):
Use the Application Id and Password (secret) info from your .env file
Give the test bot a name and save your configuration.
Congratulations, you are now able to test your bot in the tool and/or Teams!
Updated about 1 month ago