jQuery and the Slack API

Disclaimer: You should think twice about interacting with the Slack API using client facing JavaScript like jQuery on a public website because your webhook (the special URL that Slack generates for you) will be public. This means that anyone could post anything in your Slack channel without being authenticated.

It is possible to interact with the Slack API securely using Node.js but the following tutorial is just provided for demonstrative purposes.

 

Slack is pretty great for teams, I use it all the time for work and just for groups of friends. At one point I was asked to provide a proof of concept for posting a message in Slack when a form was submitted through Contact Form 7 on a WordPress site.

In order to prototype this quickly without spending time to create a plugin and do it the ‘right’ way by using cURL with PHP, I decided to go the JavaScript route for a quick and dirty example.

This example assumes you have Contact Form 7 installed on your WordPress site.

Posting to Slack with Contact Form 7

The actual code that we need to use is going to look pretty messy because we need to minify it to make it work with Contact Form 7, so I’m going to explain it first.

var name = jQuery('.slack-name').val();
var email = jQuery('.slack-email').val();
var occ = jQuery('.slack-occupation').val();

var requestBody = "A request was made to join the Slack channel by: Name: " + name + ", Email: " + email + ", Occupation: " + occ + ".";

jQuery.post(
	'{{ WEBHOOK URL }}',
	'payload={"channel ": "#{{ CHANNEL TO POST TO }}","text ": "' + requestBody + '" }'
);

We start out by defining our variables and what we want to send to Slack. Because of the way Contact Form 7 creates it’s forms, we can’t just use the handy $.serialize() method that jQuery provides. Instead we need to manually grab the values.

Then in requestBody we form our text message that we want to send to Slack.

Finally using $.post() (a facade of $.ajax()) we make our request using the webhook URL that Slack gave us when we created the integration.

1. Log into your Slack account in your browser and configure a new ‘Incoming Webhook’ integration. Choose a channel you want it to post to and change the name if you want, but for these purposes it isn’t necessary. When it gives you an Incoming Webhook URL, copy it somewhere safe.
2. In your WordPress admin area, open the Contact Form 7 plugin and open the form you want to post to Slack from.
3. Select the ‘Additional Settings’ tab.
4. In your Additional Settings textarea, paste the following:

   on_sent_ok: "var name = jQuery('.slack-name').val();var email = jQuery('.slack-email').val();var occ = jQuery('.slack-occupation').val();var requestBody = "A request was made to join the Slack channel by: Name: " + name + ", Email: " + email + ", Occupation: " + occ + ".";jQuery.post('{{ WEBHOOK URL }}', 'payload={"channel": "#{{ CHANNEL TO POST TO }}","text": "' + requestBody + '" }');"

One important thing to note here is the on_sent_ok variable that we put before all of our custom code. This means that that JavaScript will only be processed after the form has sent, meaning we don’t necessarily need to worry about validating the field itself, if we’ve already handled that in the form.

After you’ve saved your form, you should see any form submissions pop up in the Slack channel until you remove the integration!