Back to blog
Blog

How to add an editable news feed widget to your website

Tony Spiro's avatar

Tony Spiro

March 22, 2016

cover image

Cosmic is great for hosting content for an entire website or application, but can also be used to add quick, dynamic content elements to any existing website.  In this short tutorial, I'll show you how you can add a news feed widget to your website in a few short steps.  Let's get to it:

1. Sign in to your Cosmic account.

2. After signing in, select "Add object type" in the left side nav of your bucket's dashboard and create a "News" object type.  Call the object type "News" (plural) and "Article" (singular).  Then add your articles (you can add content or metafields later, they're not required for this example).


3. In your HTML file add a div that will receive the news feed then add the Cosmic browser client to get your bucket's content.  You can download the Cosmic Browser Client on GitHub.  Next, in only a few lines of code, you can get the articles from your bucket.  Here is a quick JS Fiddle of everything you will need:

You can see how powerful this is.  A developer can add these dynamic areas to any portion of an existing site and enjoy the benefits of a CMS API.  Any non-dev team member can be invited to edit this content in the Cosmic admin dashboard quickly and easily with no database or server-side installation necessary!