Integrating Microsoft Teams Bot Framework into Your Webpage

Are you looking to enhance your help desk landing page or support webpage by integrating your Microsoft Teams Bot Framework application? Look no further – this guide will walk you through the process of creating an HTML button that opens your Teams bot, allowing your end users to access it without leaving your webpage.

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

1. Navigate to Chime > Admin > Dispatcher.
2. Locate the queue dispatcher that you want to expose to your webpage.
3. Copy the Bot ID associated with the chosen dispatcher.

Step 2: Create the Button HTML Element

Replace the BOT_ID string in the template below with the Bot ID obtained in Step 1.

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

Step 3: Add the HTML Button to Your Webpage and Test

1. After updating the HTML button template, copy and paste the button element into your webpage.
2. Click on the button.

View fullsize

3. If you are using Chrome, click on Open Microsoft Teams.
4. The Microsoft Teams desktop client should now direct you to your bot conversation.

View fullsize

Now, your users can access your Microsoft Teams Bot Framework application through your webpage, enhancing the overall user experience.