Add Microsoft Teams Chat to your Wix Website

Do you use Microsoft Teams and Wix?  In this article, we'll show you how to embed Microsoft Teams Live Chat in your Wix website so you can answer live chats from your Wix website visitors right from Microsoft Teams.

Step 1:  Add Live Chat to Microsoft Teams

If you have not yet added the Live Chat app to your Team in Microsoft Teams, just click the '+' button at the end of the tab list from within Teams.

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

Once you save the settings, you are all set with Step 1.  Chat requests will be sent to the shared Team channel for every Live Chat.

You can reply to chats from the Team conversation or the dedicated ‘Live Chat’ tab.

Next, mention our ‘@Live Chat’ bot in your posts of this channel to make sure we see your messages. 

Step 2. Next, to access your Chat Settings and Agent Settings, add the Live Chat app to your personal workspace.

Click on the 3 dots in the left sidebar and search for ‘Live Chat’. 

If you have not yet added your app to your Team, FIRST choose the option ‘Add to a Team’ and select the Team that you have added your Live Chat tab to. THEN, select ‘Add’ to add Live Chat to your personal workspace. 

(Note: If you don't see it in the left sidebar when selecting the horizontal dots icon, search for ‘Live Chat’ and select it.)

Each Team member should also add your Live Chat app to their workspace individually, as this is how your Team members can change their Agent Settings, such as their photo and nickname.

* If you aren't receiving chat requests to your team:

If you are not receiving Live Chat request notifications to your Team, you may not have added the app to a Team when originally installing. You can always uninstall and re-install the app to your workspace in the following article. See this article on how to uninstall and reinstall the app to your personal workspace.

3. Turn on your Channel Notifications.

By default, new Post Notifications are turned off. To make sure you never miss a Live Chat request, turn on your Channel Notifications. Just click the 3 dots next to your Team’s ‘General’ channel. Then, on the popup, choose ‘All New Posts’: 'Banner and feed': then ‘Save’.

You can also choose to display notifications 'Only in feed'. Either will option work.

4. Copy your code snippet for inclusion in Wix

Go to the Live Chat app settings and select the ‘Code Snippet’ option to find your code snippet.   

You can access the Live Chat app settings from the left-hand navigation by clicking the horizontal 3 dots, then choosing Live Chat. 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 ‘Chat Settings’ tab, then choose 'Install Code Snippet'.

Copy this code for use below in your Wix website custom code.

Step 5.  Add your Custom Live Chat code snippet to Wix

Now we will show you how to add your code snippet directly to your Wix website. Go to your Wix Dashboard:

And scroll down to the Settings link:

Step 6.  Select the Custom Code option under the Advanced Settings

Next, scroll to the bottom of the Settings page to the Advanced section and choose Custom Code link.

Once here, choose a section to add your Javascript code snippet to.  In our case we'll select the Head section and choose 'Add Code'

Step 7.  Copy your Live Chat Javascript Code to your Wix website

Now grab the code snippet you copied in step 4 into the Edit Custom Code section in your Wix Settings as follows: 

Step 8.  Enable your Custom Javascript Code snippet on your website

Finally, make sure to enable the custom code snippet you entered above once you Apply the snippet by turning on the toggle button for the snippet.

Step 9.  Disable the Wix Chat that is already there

For our case, we want to use the 3rd Party Live Chat application instead of the built in Wix chat because we already use Microsoft Teams and want to continue to use it to chat with visitors.  

To disable the built in chat, just go to the website editor, select the Wix Chat element and click your delete button.  Now Publish your app and your custom code snippet will be active.

Step 10.  Preview your Live Site that includes your embedded Microsoft Teams Live Chat

That's it.  After publishing your Wix changes, simply view your live site to verify your Live Chat for Microsoft Teams is now active on your Wix website!

Once you start a chat from your Wix website, you'll receive live chat notifications right within Teams and can answer all the chats from your Teams desktop or mobile apps.