Monday, 12 February 2018

How To Embed Slack On A SharePoint Page

This isn't going to be my cleanest blog post or code...


  • Here's where you go to get the URL for the 'Get Messages' section of the code: https://api.slack.com/methods/channels.history/test
  • Here's where you go to get the URL for the 'Get User' section of the code: https://api.slack.com/methods/users.info/test
  • CompanyName is the name you signed up for in your Slack URL

The rest you should be able to paste into a Script Editor web part

--------------------------------------------------

<link rel="stylesheet" type="text/css" href="https://a.slack-edge.com/edd25/style/rollup-slack_kit_legacy_adapters.css">
<link rel="stylesheet" type="text/css" href="https://a.slack-edge.com/a225c/style/rollup-client_base.css">
<link rel="stylesheet" type="text/css" href="https://a.slack-edge.com/4944c/style/rollup-client_primary.css">
<link rel="stylesheet" type="text/css" href="https://a.slack-edge.com/b1c2e/style/rollup-client_general.css">
<link rel="stylesheet" type="text/css" href="https://a.slack-edge.com/50a1e/style/rollup-client_secondary.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="SlackFeed"></div>

<script> 
//Get User
$.ajax({ url: "https://slack.com/api/users.info?token=[InsertToken]&user=[InsertUser]&pretty=1" }).then(function (data) {  
if (data["ok"] && data["ok"] === true) {
UserInfo = data["user"]; 
//alert(UserInfo.name);
//alert(UserInfo.profile.image_32);
    }
});

//Get Messages
$.ajax({ url: "https://slack.com/api/channels.history?token=[InsertToken]&channel=[InsertChannel&count=10&pretty=1" }).then(function (data) {
if (data["ok"] && data["ok"] === true) {
slackMessages = data["messages"];       
$.each( slackMessages, function( key, value ) {
//document.getElementById("SlackFeed").append(key);
//document.getElementById("SlackFeed").append(value.text);     
            
$("#SlackFeed").append('<div class="message" style="overflow:hidden;width:300px;">' + 
'<div class="message_pic" style="float:left;">' + '<a href="https://[CompanyName].slack.com/team/'+ UserInfo.name+'" target="https://[CompanyName].slack.com/team/'+ UserInfo.name +'"><img src="'+UserInfo.profile.image_48+'"/> </a>' + '</div>' + 
'<div class="message_text" style="float:left;padding-left:5px;width:200px;">' + '<span class="message_body"><b>'+ UserInfo.real_name +'</b></span><br/>' + '<span class="message_body">'+ value.text +'</span>' + '</div></div>');    
}); } });       
     
</script>

2 comments:

  1. Great post but when I implement it I only get the name of the bot in the posts and not the actual post author or the image of the author. Any ideas why.

    ReplyDelete
    Replies
    1. Gday Alan, not sure sorry. I plan on expanding this post but just havent gotten around to it yet. My guess is that they've potentially changed the UserInfo object name since this post?

      Delete