How to add a Microsoft Teams chat link to your Libguides profile box

Last week I added my Microsoft Teams chat link to my Libguides profile box. Since this required some different code than just adding a Teams chat link to a general guide, I thought I would share it here. Maybe you’ll find it helpful.

The code

<style>
#teamschat {
  background: #FFFFFF;
  border: 1px solid #545AAA;
  border-radius: 4px;
  color: #333333;
  font-size: 18px;
  font-family: 'Barlow', 'Trebuchet MS', Arial, Helvetica, sans-serif;
  padding: 8px 20px;
  cursor: pointer;
}
</style>

<div id="teamschat"><a href="https://teams.microsoft.com/l/chat/0/0?users=boeninge@ohio.edu&message=Hi%20Chad%20I%20have%20a%20question"><img alt="Click to Chat with Chad in Microsoft Teams" src="https://libapps.s3.amazonaws.com/accounts/7927/images/teamslogosmall.png" style="border: 0px; vertical-align: middle; float: left;" /></a>

<a href="https://teams.microsoft.com/l/chat/0/0?users=boeninge@ohio.edu&message=Hi%20Chad%20I%20have%20a%20question" target="_blank">Microsoft Teams Chat</a> 
</div>

<br />

How to customize

1. Copy the code above.
2. Navigate to your LibApps profile.
3. Scroll down to the “Other Widget Code” box and paste in the code.
4. Change users=boeninge@ohio.edu to your Teams email account. You will need to change this in two places . As much as I love your students, faculty, and patrons, I am sure they would rather talk to you. 😉
5. Change the “Chad” to your name. You’ll need to change this in two places (unless your name is “Chad”) . My other Teams post has more details about changing your introductory chat text.
6. If you know a little CSS, you can modify anything within the <style> section at the top of the code to change font, size, etc.

Let me know if this was helpful and if it worked for you.

Good luck!