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>

No comments:

Post a Comment