Use webhooks to integrate Backlog with external services
Nulab
February 24, 2015
As introduced in the latest update, we’ve started to provide webhooks in Backlog. Webhooks will send notification of various events on Backlog projects to a specified URL in real-time and enable you to integrate Backlog with external services.
The following are example integrations:
- When an issue is added, add its description to Evernote as a note
- When a file is uploaded, send its link to chat
- When a Wiki is added, copy its content to WordPress
Since you usually have to prepare a server to receive a webhook and program it to work with an external service, you may think it’s difficult to use it if you are not a developer. However, Zapier will help you do such tasks without any programming.
What is Zapier?
Zapier is a tool that helps non-technical users get their applications to work together without writing any code. You can create your own automated task(s) by combining any of the 300 online applications they support. You can also get a 14-day free trial, or sign up for one of their free or paid plans. See their pricing page for more.
How to make a “Zap”
For this tutorial, I’ll show you how to make a Zap that sends messages to Slack when an issue is added on Backlog. The overview of the Zap looks like this.
1. Sign up for Zapier
Create an account for Zapier. After submitting your information, you will receive a confirmation email. Click the verification link inside to validate your account. After that, go to “Make a Zap!”
2. Choose a trigger and action
First, you have to choose a trigger and action to define your Zap. Choose Web Hook as the trigger application and then set Catch Hook as the actual trigger. Choose Slack and Send New Message for the action. Then click Continue.
3. Add Webhook on Backlog
In the next step, Zapier will automatically generate a webhook URL as follows.
Go to the Webhook page within the project settings on Backlog. Clicking “Add Webhook” takes you to the form shown in the figure below to configure the new Webhook. Put the URL generated by Zapier (above) in for the Webhook URL and check Issue Created in the Issue Event category. Then, save it with your preferred name.
You should run test in this screen so that it will send test data to Zapier.
4. Connect your Slack account
Next, select a Slack account. If this is your first time selecting a Slack account on Zapier, you have to allow Zapier to access your Slack information.
After the authorization is successfully completed, you can see the following display.
5. Filter Webhook triggers
Next, you will see a “Filter Webhook triggers” section. You can skip this.
6. Configure message sent to Slack
This is the most important part of this Zap. Configure Channel and Text as they’re required and Username and Icon URL to make it clear that the message is sent from Backlog via WebHook.
- Channel : #general
- Text: New issue created <https://Your Space ID.backlogtool.com/view/Project Project Key–Content Key ID|Project Project Key–Content Key ID Content Summary> by Created User Name
- Username: backlog
- Icon URL: https://nulab.com/download/backlog/png/glyph.png
The bold texts in the Text section (except Your Space ID) can be chosen from the field list shown by clicking the Insert fields button in each input form. In the example below, we use those fields to build Backlog’s issue URL (e.g., https://example.backlogtool.com/view/EXAMPLE-1234).
7. Run a test and save your Zap
Finally, run a test to make sure everything works well, and then save it.
With this Zap enabled, every time an issue is added on the project in Backlog, you will receive a message like this.
Note: While I used “Issue Created” as the example in this post, you can also make Zaps to send messages when a file is uploaded or a Wiki is added. Of course, you can integrate Backlog with other services than Slack, as long as they are supported by Zapier. Enjoy making your own Zap for Backlog Webhook!
If you come up with an interesting idea of using Webhook, feel free to drop it in the comment section below or mention to @backlogtool on Twitter.
Acknowledgement
Cover image “Everything Is Connected” by Richard P J Lambert, available on Flickr.
