How to create a Microsoft Teams HTML button?

Written By Fikri Ghazi

Updated 10/26/2023 - A lot of this content is still valid, but it is now much easier to create chat first service desk that is integrated into Microsoft Teams (here is our link in MS Teams AppSource) - including features to create and deploy a private (based on your FAQS) instance of ChatGPT. Take a look at Chime V5 for our integration with AI, FAQ system, and great looking web client - with deployment options for buttons.

Read this blog post from our public wiki page.

Objective

The objective of this post is to show how to create an HTML button that opens a Microsoft Teams Bot Framework application.

You will find this guide helpful if you would like to add a feature into your help desk landing page or support webpage by exposing your Microsoft Teams bot as a button. So that your end users can go to your Teams bot one click away, without leaving your webpage.

Step 1 - Get your Chime Dispatcher Bot ID (Bot Framework ID)

  • Go to Chime > Admin > Dispatcher

  • Navigate to the queue dispatcher that you would like to expose to your webpage

  • Copy its Bot ID

Items.png

Step 2 - Create the button HTML element

  • Replace the BOT_ID string from the template below with the Bot ID that you just copied from the previous step

<button onclick="window.open('msteams:/l/chat/0/0?users=28:'+'BOT_ID', '_parent')">IT Service Desk</button>

Step 3 - Add the HTML button into your webpage and test

  • Once you've updated the HTML button template, copy and paste the button element into your webpage

  • Click on the button

  • If you are using Chrome, click Open Microsoft Teams

  • Finally, Microsoft Teams desktop client should directs you to your Bot conversation

addchime-support-page.png
microsoft-teams-pop-up.png
microsoft-teams-bot.png
Fikri Ghazi
Previous

What should you do after a Chime update to restore your UI?
Next

Chime Reporting API