In this article, I am going to show you how to use incoming WebHooks of Slack API. Before I show you how to use incoming webhooks, first let us explore what incoming webhook of Slack really is.
Incoming WebHooks of Slack API
According to the official API documentation of Slack, incoming WebHooks are defined as:
Incoming Webhooks are a simple way to post messages from external sources into Slack. They make use of normal HTTP requests with a JSON payload that includes the message text and some options. Message Attachments can also be used in Incoming Webhooks to display richly-formatted messages that stand out from regular chat messages.
Now that we know what incoming webhooks are by definition, let us do some practical work. Without further ado, let’s get started!
Step 1
Go to the following link after logging to the WorkSpace of Slack:
Note: Here {your-workspace-name} is the workspace that you have created and logged into. If you have not created the workspace yet, I would highly recommend you to read the article titled “Slack Manual” before going further into this article because you would require the Slack workspace to follow this article. Anyway, I would suppose that you have already created the Slack workspace.
Step 2
Click on the menu and then select “Configure Apps” from the menu as shown below:
Step 3
Search “Incoming Webhooks” as shown below, and click the one result that shows with the name “Incoming WebHooks” and caption “Send data into Slack in real time.”
Step 4
Click on the “Add Configuration” button shown below:
Step 5
Select the Channel to which you want to post, and click “Add incoming Webhooks integration” as shown below. If you do not have any channel, create a new one. I have explained how to create “Channel” in the article titled “Slack manual.” Do refer to that article, if you want to know how to create a Channel in Slack.
Step 6
Now you need to copy Webhook URL and paste it in some TextDocument, as we would require this in our JavaScript code. The Webhook URL would look like this:
Now go back to your WorkSpace and select the Channel that you have created. I have already created “webhookchannel” shown below:
Now let us jump to the JavaScript part.
Connecting WebHooks using JavaScript and JSON
Write the following script and save it as html file.
<!DOCTYPE html>
<html>
<head>
<title>Slack Webhook</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function send() {
//I have used the “WebHook URL” which I instructed above to copy and paste in a separate TextDocument.
var url = "https://hooks.slack.com/services/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";
// There is a message that we would get from the text input from browser.
var jsonSendingData={"text":document.getElementById("message").value};
$.post(url, JSON.stringify(jsonSendingData));
document.getElementById("result").innerHTML = "Message has been sent successfully!";
}
</script>
</head>
<body>
<input type="text" id="message"></input>
<button onclick="send()">Send</button>
<div id="result"></div>
</body>
</html>
Code in image form:
Open the above HTML Webpage page having script. If you open the above HTML page in your favourite browser, you would see the following page:
Sending Message from Webpage
Let us send the message from Webpage to Slack Channel!
As you can see we have sent the message via webpage. And in return we get the notification below. Let us see the WorkSpace to check whether we have received our message or not.
The WorkSpace looks like:
Woohoo! We have received the message!
Summary
In this article, I have discussed how to use WebHooks of SlackAPI. We have also sent messages from our webpage to the Slack WorkSpace using WebHooks API. That’s it for this article.
