Integrate Microsoft Teams Chat with Webflow

In this article, we'll show you how to add Live Chat for Microsoft Teams to your Webflow website so you can easily talk to your website visitors in real-time right from Teams. Quickly answer customer questions to provide great customer service and get more sales.

Step 1: Add the Live Chat App to Microsoft Teams

First add our Live Chat app for Microsoft Teams to a Team and Channel in Teams. To do this, click the '+' button at the top of any Team and Channel in Teams.

You can also use this link: Add Live Chat to Teams.

Then search for 'Live Chat' in the popup and select it. It will look simliar to this:

Once you save the settings, live chat requests will be sent to this Team and Channel for every new website Live Chat.

new live chat requests

Step 2. Grab your Live Chat code snippet you will include in Webflow

Next, access the Live Chat Settings from the left-hand navigation in Teams by clicking the horizontal 3 dots, then search for the 'Live Chat' app. If you don't see your Live Chat listed here, add it by selecting the ‘Browse all apps’ button, then adding Live Chat.

Once in the app settings, choose the ‘Live Chat Settings’ tab, then choose 'Install Code Snippet'.

Copy this code snippet for use below in your Webflow website.

Step 3. Add your Custom Live Chat code snippet to Webflow

Now add your code snippet directly to your Webflow Embed element. Go to your Webflow Designer for the website you want to add the live chat to.

Click on the '+' button to open the elements and scroll down to select the Embed element. Note that you must be on a paid plan to be able to use this element.

Then paste the code snippet you copied in Step 2 into the HTML Embed Code Editor.

Click Save & Close, then Publish to activate Microsoft Teams Live chat on your Webflow website. You can see the live chat now.

Notice that you can move the location of the chat button and chat widget above the 'Made in Webflow' icon if you want by also adding this style to the embed code:

<style>
#si-wrapper .silc-btn {
bottom: 55px !important;
right: 25px !important;
}

#siWidget-chat {
   bottom: 120px !important;
}
</style><br>

That's it. Now you can answer Webflow live chat requests right within Microsoft Teams.