ContentGems Developer Documentation

Developer documentation home

API documentation

Website widget documentation

ContentGems web app

API info page

Welcome to the ContentGems Website Widget V1 documentation

The ContentGems Website Widget lets you embed curated content from ContentGems into your website.

Getting started

Copy and paste the code below into your web page where you want the curated news to appear:

<div id="ContentGemsWidget"></div>

<script>
window.ContentGemsWidgetOptions = {
  feed_id: 'YOUR_FEED_ID'
}

!function(){function t(){var t=a.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://assets.contentgems.com/website-widget/1.1.0/website-widget.js";var e=a.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}var e=window,a=document;e.attachEvent?e.attachEvent("onload",t):e.addEventListener("load",t,!1)}();
</script>

Configuration parameters

Below is an example of the website widget’s optional configuration parameters. Please note that the feed_id parameter is always required.

window.ContentGemsWidgetOptions = {
  // enabled or disable debug mode
  debug: false,

  // max number of items to display
  max: 50,

  // breakpoint sizes in pixels
  breakpoints: {
    large: 1200,
    medium: 992,
    small: 768
  },

  // use widget stylesheet
  stylesheet: true,

  // default initial view mode, 'grid', 'compact', 'list'
  view: 'grid',

  // id selector for the widget, where to place the widget
  selector: 'ContentGemsWidget',

  // show or hide the contentgems powered by logo
  poweredby: true,

  // classes for widget
  classes: {
    loading: 'cgw-loading',
    loaded: 'cgw-loaded',
    done: 'cgw-done',

    columnPrefix: 'cgw-col',

    container: 'cgw-container',

    viewToggle: 'cgw-view-toggle',
    viewPrefix: 'cgw-view',

    list: 'cgw-list',

    item: 'cgw-item',
    itemContent: "cgw-item--content",
    itemTitle: 'cgw-item--title',
    itemSource: 'cgw-item--source',
    itemImage: 'cgw-item--image',
    itemExcerpt: 'cgw-item--excerpt'
  }
};

Configuration details

Name Type Default Description
debug boolean false

Enable or disable debug mode.

max integer 50

Max number of items to display.

breakpoints object
{
  large: 1200,
  medium: 992,
  small: 768
}

The widget layout adapts at these width thresholds.

stylesheet boolean true Whether to use the default widget stylesheet. Set to false to provide your own stylesheet.
view string grid

Default initial view mode, 'grid', 'compact', 'list'

selector string "ContentGemsWidget"

ID selector for the widget, where to place the widget

<div id="ContentGemsWidget"></div>
poweredBy boolean true

Show or hide the ContentGems powered by logo.

classes object
{
  loading: "cgw-loading",
  loaded: "cgw-loading",
  done: "cgw-done",
  columnPrefix: "cgw-col",
  container: "cgw-container",
  viewToggle: "cgw-view-toggle",
  viewPrefix: "cgw-view",
  list: "cgw-list",
  item: "cgw-item",
  itemContent: "cgw-item--content",
  itemTitle: "cgw-item--title",
  itemSource: "cgw-item--source",
  itemImage: "cgw-item--image",
  itemExcerpt: "cgw-item--excerpt"
}

Classes used by the widget, you can override them here.

cgw-container will have the classes cgw-done when load is done, cgw-loading and when the widget is loading.

cgw-view-grid, cgw-view-list, cgw-view-compact will be toggle on cgw-container for the different view modes

cgw-item--image the img will be loaded in, and have the class cgw-loading once the image has been loaded it will have the class cgw-loaded. You can see this below.

<div class="cgw-container">
  <div class="cgw-list">

    <div class="cgw-item cgw-col-3">
      <a>
        <div class="cgw-item--image">
          <img class="cgw-loaded"></div>
        <div class="cgw-item--title"></div>
        <div class="cgw-item--source">
          <img/>
          <span></span>
        </div>
        <div class="cgw-item--excerpt"></div>
      </a>
    </div>

    ...

  </div>
</div>