How to Create a Microsoft Teams HTML Button

Overview

This guide walks through how to build a simple HTML button that launches a Microsoft Teams Bot Framework conversation in a single click. It is especially useful if you want to add a “contact the help desk” entry point on a landing page, SharePoint site, or company intranet — users click the button and land directly in a chat with your Teams bot.

The technique relies on Microsoft’s msteams: deep-link URL scheme, so it works without any custom backend code. You only need the Bot ID of the Teams bot you want to expose.

Step 1: Obtain your Chime dispatcher Bot ID

If you are running Chime for Teams, every dispatcher (queue) has an associated Bot ID. To find it:

1. Sign in to your Chime admin console and open Chime › Admin › Dispatcher.
2. Select the queue dispatcher that you want exposed through the button (for example, your IT or HR help desk queue).
3. Copy the dispatcher’s Bot ID. It looks like a GUID, e.g. 00000000-0000-0000-0000-000000000000.

If you are not running Chime, you can use the App ID of any Teams bot registered in your tenant — the deep link will work the same way.

Step 2: Create the HTML button

Drop the snippet below into any HTML page and replace BOT_ID with the value from step 1:

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

The 28: prefix in front of the Bot ID tells Teams that the target is a bot, not a regular user account. The _parent target lets the deep link replace the current page so the browser can hand off to the Teams desktop client (or prompt the user to install it).

Step 3: Deploy and test

Paste the button HTML into your landing page or portal:

Open the page in Chrome or Edge and click the button. The browser prompts with “Open Microsoft Teams?” — approve it:

Teams launches and navigates directly into a one-on-one conversation with the bot, ready for the user to send their first message:

If the user does not have the Teams desktop client installed, the browser falls back to the Teams web client.

Styling the button

The example above intentionally uses an unstyled <button> so you can drop your own CSS class on top of it. A minimal branded version looks like this:

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

<style>
  .cta {
    background: #b7d21e;
    color: #18181b;
    border: 0;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
  }
  .cta:hover { background: #a4bd1a; }
</style>

Looking for something more modern?

The deep-link button is a great quick win, but it only works for users who already have Teams. If you want to embed a chat experience directly inside the browser — with AI answers, FAQs, and a customizable web client — take a look at Chime V5, which ships a web chat widget alongside the Teams bot.