Cosmic JS Blog Stay tuned for community news, company announcements and updates from the Cosmic JS team.

Adding Webhooks in 4 Steps


by Carson Gibbons on September 26, 2016

At Cosmic JS, we get questions every day about adding Webhooks to an application for better team & product management. Cosmic JS is an API-first cloud-based content management platform that allows you to easily integrate a CMS to your deployed or emerging application for content updates. Cosmic JS works by decoupling content from code, allowing you to build applications in your desired language since Cosmic JS can be integrated with any application, regardless of its programming language.

Cosmic JS makes it easy to add Webhooks that trigger a POST request to the endpoint of your choice when there is activity on your bucket. 


Let's insert Webhooks into your web application:


1. Go to your Bucket Dashboard



2. Go to the Webhooks tab



3. Add the Webhooks bucket upgrade - refer to Cosmic JS Pricing for bucket breakdowns




4. Use the Webhooks table to select an event and trigger a POST request to the API endpoint



Now this will post to the endpoint of your choice whenever the event signified occurs. This is great for static websites & great for the build process whenever content is changed. You can send a message on Slack to your team whenever you’ve added a new piece of content for draft review. Cosmic JS builds collaboration between developers & content editors in everything we do, because we work content-first.


Watch the Webhooks Tutorial: 

 


Read More:

  1. New: Track Your API Requests
  2. Build a Blog in 4 Steps
  3. The Cosmic Stack
  4. Three Ways to use The Cosmic Stack
  5. How to Create an Intuitive Website Navigation Menu


You may also like


In this tutorial I'm going to show you how to create an "Events" app using a little bit of Node, Angular JS and Cosmic JS. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic JS API in order to retrieve, update, and delete data in our Cosmic JS Buckets.

The Developer Hero returns in this latest installment of the Cosmic JS Developer Spotlight Series.

We are excited to introduce the all-new Cosmic JS content editor which is a huge improvement over our old editor.  We think you'll agree it makes adding API-powered content to your websites and apps easier and more enjoyable.  Here’s a list of some of the new functionality...

The Cosmic CLI is a great way to use all of the powerful features of the Cosmic API from the comfort of your command-line tool.  With this release, you now have some powerful capabilities to demo and deploy Cosmic Apps for faster development and collaboration.

It's now faster and easier to make the content on your webpages dynamic.  The Official Cosmic JS JavaScript Client now comes with a minified browser version that allows you to add the power of Cosmic JS cloud-hosted content into your HTML page with a single file.  Download the Cosmic JS browser file then copy and paste this real-working browser example into an html file to check it out:

<!DOCTYPE html>
<html>
<head>
  <title>Cosmic JS Easy Browser Example</title>
</head>
<body>
<h1 id="title">If you see this, something isn't working...</h1>
<div id="content"></div>
<div id="metafields"></div>
<script src="cosmicjs.browser.min.js"></script>
<script>
var config = {
  bucket: {
    slug: 'easy-browser-example'
  },
  object: {
    slug: 'home'
  }
};
Cosmic.getObject(config, config.object, function(err, res) {
  var object = res.object;
  document.getElementById('title').innerHTML = object.title;
  document.getElementById('content').innerHTML = object.content;
  var metafields = object.metafields;
  var images = '';
  metafields.forEach(function(metafield){
    images += '<h2>' + metafield.title + '</h2>';
    images += '<img width="300" src="https://cosmicjs.com/uploads/' + metafield.value + '"/>';
    images += '<br><br>';
  })
  document.getElementById('metafields').innerHTML = images;
});
</script>
</body>
</html>

Sign in to your Cosmic JS account and connect this example to one of your buckets to see how easy it is to create powerful CMS-powered websites and app with Cosmic JS.


In this installment of the Cosmic JS Developer Spotlight Series, we sat down with John Leider, the founder of Vuetify who recently spoke at the Cosmic JS Vuetiful Holiday Meetup following his presentation at VueConf in Toronto. To see the slides from the Vuetiful Meetup Presentation "The Path to Vuetify 2.0", you can click here. Otherwise, follow John on Twitter, LinkedIn or GitHub, and enjoy the Q/A.