Troubleshooting Webhooks in Contentful

A few weeks ago, I saw a video on Youtube from my friend Shy called How to post to Twitter using Contentful webhooks and IFTTT and it piqued my interest.

I use Contentful as the headless CMS for this very blog site and tweeting definitely adds traffic to your site, it certainly does for me as I am the most active on Twitter. This made me decide to try and copy what Shy is teaching in this video!

It was really straight forward to set up however I wasn't getting the right data back so my tweets had blanks in. I wasn't sure where to start at first but now I have solved it, I wanted to share with you the steps I took and hopefully it will provide some help to you should you face issues with your webhooks too! So let's get started..

One website that I learned about while troubleshooting is webhook.site. It will give you a URL you can point your Contentful webhook to in its settings and when it triggers, webhook will show you what data was sent.

This was useful for me because I needed to understand why the data wasn't making it to my tweets.

In order to be able to trigger the webhook on publish, I decided not to mess with an existing post but instead write a new post that was literally to tell readers to ignore as it is a test post. This way I could leave my actual posts published and visible at all times should anyone visit my website during this, but I had a post I could unpublish and publish everytime I wanted to trigger the webhook.

The first time I triggered it, I saw that it was receiving {}, an empty object, which suggested the issue was with the custom JSON payload I set in the webhook settings in the Contentful Web App.

This is the custom JSON payload I had originally in my webhook settings:

{
  "value1": "{/payload/fields/title/en}",
  "value2": "{/payload/fields/slug/en}"
}

This is exactly what Shy had added for his payload so I wasn't totally sure what was going on.

One theory I had at first was that maybe my custom payload values were wrong. In order to check this, I went to my Content Model in the Web App, selected my blog post model and then switched to the JSON preview tab in the page that loads.

This gave me a JSON view of how my data is structured so I could check that /payload/fields/title and /payload/fields/slug were correct. They were, damn! One theory disproved! 🧪

I then wondered if I needed the language code aka 'en' at the end of the URL. After all, Contentful gives you full control over how you set up your content models so that it suits your needs, so maybe Shy's was set up differently. I removed it but according to webhook.site, the issue remained. I also remembered what Shy mentioned in his video, that without the language code in, it returns an object not the string which is not what we want! Another theory disproved! 🧪

My next idea was to see what was returned from the default payload. Maybe it would reveal something!

In order to change to the default payload, select the radio button under the Payload section on your webhook settings.

Once it was set to the default payload, I went ahead and triggered the webhook again. This time, we had far more data back in the response which gave me something to work with!

This is what I saw for my title and slug fields:

"title": {
      "en-US": "Zoom Zoom for Streamers - How to zoom in on just the code in VS Code"
    },
    "slug": {
      "en-US": "zoom-zoom-for-streamers-how-to-zoom-in-on-just-the-code-in-vs-code"
    },

Interesting! It has en-US rather than just en, maybe that means something! So to test the theory, I went ahead and switched back to my custom payload from the default in settings then changed my custom payload from earlier to have /en-US at the end. I then unpublished -> published a post again to trigger it to see what information appears in webhook.site and guess what came back?!

Woooooooo!! 🎉

The final step was to change the webhook URL in Contentful back to the IFTTT url for this trigger and enjoy the feeling of success!