Changelog

Easy Cosmic Browser Example

Tony Spiro

January 04, 2016

It's now faster and easier to make the content on your webpages dynamic. The Official Cosmic JavaScript Client now comes with a minified browser version that allows you to add the power of Cosmic cloud-hosted content into your HTML page with a single file. Download the Cosmic 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 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://www.cosmicjs.com/uploads/' + metafield.value + '"/>';
    images += '<br><br>';
  })
  document.getElementById('metafields').innerHTML = images;
});
</script>
</body>
</html>

Sign in to your Cosmic 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.

Back to changelog

You might also like