How to Post a Slack Message from SharePoint

How to Post a Slack Message from SharePoint

Posted by on Thursday, June 2nd, 2016  


Slack is an incredibly powerful team collaboration tool that has gained a lot of enterprise speed over the last few years. The ability to quickly message and collaborate on information would be an incredibly useful addition to SharePoint and Office 365. Unfortunately, there just aren’t any good SharePoint to Slack integration apps out there. In this post, we’ll cover the basics for making a simple messaging call from SharePoint to Slack where we post a link to the current SharePoint page.

To do this, we’ll go through the following steps:

  • Create the Slack WebHook – we need an entry point into our team’s Slack Channel
  • Add a button to the SharePoint page – we need to provide a simple way to trigger the Slack message posting action
  • Wire it all up – Lastly, we’ll wire up the button to make the call to Slack

Create the Slack Integration WebHook

Slack, being the incredibly open platform that it is, conveniently provides a way for us to send messages to their system using their API. All that we will need to send these messages is a URL endpoint and a properly formed HTTP ‘POST’ call. That’s it, no authentication necessary. Wait, no authentication? Yup, using the Slack web site, you can build a custom integration WebHook endpoint that that you can just wire up and pump messages to.

Generating the custom web hook URL is simple with the following procedure:

  1. Navigate to the Custom Integrations page for your Slack team at
  2. Select the Incoming WebHooks option.
  3. On the Incoming WebHooks page, select the proper channel in the Post to Channel field or create a new channel to post to, then click the Add Incoming WebHooks Integration button.
  4. Once the new WebHook is created, take note of the WebHook URL that Slack provides. We’ll need this later when setting up our code.

Note: For the sake of simplicity of this article, we’ll be hardwiring the generated URL into our source code. This is NOT good practice for a production system and it’s only intended for our demo purposes here.

That’s all there is to it. We now have a Slack generated URL for posting our messages. Again, and I can’t stress this enough, protect this URL in a real world situation. Otherwise, anyone can just start ‘bot posting’ to your channel if they have this URL.

Add a button to SharePoint

Now that we have our entry point to send our Slack messages to, it’s time to get this into SharePoint to make it useful. What we want to do is add a button to a page (ideally every page in the site collection) and when this button is clicked, we make a post to our Slack channel with context information of the current page. To do this, we’ll add a Promoted Action link to the top right corner of the page which triggers the call to Slack.

Adding the Promoted Action link can be done using a little snippet of JavaScript after the page is loaded to inject the button in the right place. To do this, we can use a little bit of jQuery after the SharePoint JavaScript Object Model (JSOM) is loaded. This will ensure that all our necessary SharePoint metadata is where it needs to be before we get going. The following code snippet will wait for the SharePoint JSOM to load and will then inject the button into the page where we need it.

function initPostToSlack() {
    // Create the new Promoted Link structure
    var promLink = '<a class="ms-rtefocus-invalid ms-promotedActionButton" id="s7_post_to_slack" href="javascript:" onclick="javascript:postPageToSlack();">';
    promLink += '<span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-promotedActionButton-icon">';
    promLink += '<img src="/_layouts/15/images/spcommon.png?rev=43#ThemeKey=spcommon" alt="Post to Slack" style="position: absolute; left: -218px; top: -48px;">';
    promLink += '</span><span class="ms-promotedActionButton-text">Post to Slack</span></a>';
    // Add the new button to the Promoted Actions set

// Ensure the SP JSOM is loaded before we worry about our stuff
jQuery( document ).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(initPostToSlack, "sp.js");

That’s all there is to it for the button. Once the page loads, you should see the the Post to Slack button appear within the Promoted Actions links of the page.

Wire Up the Button

Now that we have the Slack WebHook created and a button on our page, all that’s left to do is to wire it up so that on button click, the current page information is posted to the Slack channel that we chose. To do this, add the following JavaScript to the page:

function postPageToSlack() {
    // Keep this URL private - Only hardcoded for sample purposes
    var slackUrl = "";
    // Build the Slack Message Payload
    var payload = 'payload=' + JSON.stringify({
            "text": "<"+document.location.href+"|"+document.title+">",
            "username": _spPageContextInfo.userLoginName
    // Post the message
        url: slackUrl,
        method: "POST",
        data: payload,
        processData: false,
        async: true,
        dataType: 'json'
    }).done(function() {
        console.log('Slack Post Success!')

In the code above, we’re doing two things, creating the web request’s payload and then making the call to Slack. In the payload creation, we’re using some page specific metadata such as the page URL and Title. We’re also grabbing some SharePoint page context metadata from the _spPageContextInfo object to get the current user. This will give our Slack post more context to who’s actually making the post to the Slack Channel. Check out my other blog post on the full listing of _spPageContextInfo metadata that you can use when creating your Slack post. Don’t forget, in the code snippet above, you will have to replace the sample slackURL with the full WebHook URL that you created in the Create the Slack Integration WebHook above.

Once you’re done adding the code snippets to the page, you should be able to load the page, click the Post to Slack button and have your message appear within Slack. A quick click of the new button and you should be posting to your Slack Channel.

There you have it, that’s all it takes to get a message to post from SharePoint to the Slack Channel of your choosing. Keep in mind, the sample above is intended to be quick and dirty sample for a single page in SharePoint. If you wanted to move a solution like this to the entire site collection, you would use a more robust approach to injecting JavaScript into your site collection but that is out of the bounds of what we’re trying show here. Hit me up in the comments below if you have any questions on how to expand this sample further.

You can find the full source code in an HTML format here. To add it to your SharePoint page, simply download the HTML, update the WebHook URL to your generated URL, upload the HTML to a common location in your SharePoint site (i.e. Site Assets), then connect the HTML file to a Content Editor Web Part. This will quickly get you up and running with the sample above.

Subscribe to RSS Feed

Sign Up for Newsletter




    Jul 08


    Hi Jason,
    I tried integrated slack to SharePoint online I followed above steps I stacked Add a button to SharePoint I added above share point script editor web part ,webpart display something like this below

    function initPostToSlack() { var promLink = ”; promLink += ”; promLink += ‘Post to Slack’; promLink += ‘Post to Slack’; jQuery(‘#RibbonContainer-TabRowRight’).prepend(promLink); } jQuery( document ).ready(function() { ExecuteOrDelayUntilScriptLoaded(initPostToSlack, “sp.js”); });
    It would be great to share information step by step

      Jul 08

      Jason Cribbet

      Hey Sridhar,

      It sounds like you’re having issues with the Script Editor Web Part. Rather than focusing on using the Script Web Part, in the example above, I used the Content Editor Web Part. Try using the CEWP along with the HTML that is provided here (

      To do this, you would have to do the following:

      1. Download the slack.htm from here ->
      2. Edit the downloaded slack.htm file and update the web hook URL with the web hook URL for your Slack team
      3. Upload the slack.htm file to your Site Assets library.
      4. In your page, edit the page then add a Content Editor Web Part
      5. Edit the properties of the CEWP and in the Content Link property of the web part, add the URL of the slack.htm file that you uploaded to Site Assets
      6. Click Ok to save the web part properties then Save the page.

      Hopefully this will get you where you need to be. If you have any more questions or comments, feel free to keep them coming.


    Jul 11


    Thank you Jason,
    Now I can get Slack Script in home page( when I click Slack Script shire point URL and title is display in slack tool),My goal is how we can post feeds SharePoint to slack and Slack to shire point where I need to change java script , I need to post feeds vis versa SharePoint slack

    I would be appreciated if you share Information


Leave a Reply