Skip to main content

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>

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

Post a Comment

Popular posts from this blog

Export Group Membership From Active Directory Using Power Query

If you need to export a list of staff from an Active Directory Group, follow these steps.  Allows you to gather all the names & usernames of staff in a particular group and save the information into Excel.

Step By Step How To:
Open up Excel > Power Query TabClick From Other Sources > From Active Directory:(In Excel 2016 this is found under: Data Tab > New Query > From Other Sources > From Active Directory) screenshots from Excel 2016 on left, Excel 2010 w/ Power Query Add-on right A popup will ask you to enter your domain name.  It should already be populated with the correct information but if not, input your companies domain name & Click OK:
In the Navigator that opens up, expand your domain tree and double click group:

You should now see a list of all groups in Active Directory in the Power Query Editor:
In order to find & filter for a specific Group, Click the Down-Arrow for the 'distinguishedName' column > Text Filters > Contains...
Type the name…

HP Laserjet 1022 Printer - Can't Print on Windows 10

If you are having trouble getting your laserjet working on Windows 10, here's how I resolved the problem:

Go to Devices & PrintersFind your printer & go to Printer Properties > Advanced TabSet Driver to: HP LaserJet 1022 Class Driver & ApplyIf HP LaserJet 1022 Class Driver is not available.  download from this site: http://support.hp.com/us-en/drivers/selfservice/HP-LaserJet-1000-Printer-series/439424/model/439431Print a test page.


SharePoint Online - Branding with CSS

-----------------------------------------------------------------------------------------
This post is related to a larger group of posts called Migrate SharePoint to Office 365 - Planning & Steps
-----------------------------------------------------------------------------------------

I've gone with a Publishing Site Collection so that I can use the 'Alternate CSS URL' in Site Settings > Master Page.

First off, thanks to the following websites which helped get me started:
http://blog.sharepointexperience.com/2015/02/sptechcon-austin-february-2015/#more-2766http://blog.sharepointexperience.com/2015/01/to-brand-or-not-to-brand/ Here's what the end result will look like (if you have the same fonts):


Now for the CSS...

/* Design By : Brett Randall*/
/*     Design Colours: Greens/Greys/Blues */
/*     Last Modified : 28/02/2017*/
/*     Description: CSS to rebrand SharePoint Online Publishing Site Collection that is using seattle.master */

/* TABLE OF CONTENTS
-- -…