Newstogram technologies are implemented by adding two or more snippets of HTML and script into the pages of your web site that display your articles or stories.

The first snippet activates the Newstogram Personal Prediction Engine which starts building Newstogram Personal Interest Profiles for your site visitors.  The Newstogram Personal Prediction Engine script uses your unique Newstogram Site Identifier and API Key to identify your site, and should be placed either in the <head> section of your content pages, or anywhere in your pages before any Newstogram Widgets are displayed.

The format of the Newstogram Personal Prediction Engine script is shown below.

<script type=’text/javascript’ src=’[your-site-identifier]/js/histogram.js’></script>


If you need your Newstogram Site Identifier or API Key, just contact us and we will be happy to send them to you.

One additional snippet is needed for each type of Newstogram Widget that will appear on your content pages.

Please note that the Newstogram Personal Prediction Engine generally needs to watch around two weeks of activity before any Widget can start making recommendations based on visitor activity.

Implementing the Newstogram Recommender Widget

The Newstogram Recommender Widget is implemented by placing an empty <div> tag with a unique id (‘ng-recommender’ by default) where the Widget should appear, followed anywhere in the page by a <script> tag that loads the Recommender script, and another <script> tag that identifies your site and configures the Widget to your preferences.

Below is a working example of the Newstogram widget.

Recommender Widget Markup / Script

<div class="ng-recommender" id="ng-recommender"></div>
<script src=""></script>
	var ngRec = new Newstogram.recommender({
	    adPosition: 'right',
	    apiKey: 'dailymedemo',
	    cssUrl: '',
	    limit: 6,
	    maxWidth: 400

Recommender Script Options

Name type default description
adPosition string 'left' Where to position the Ad. Possible values: left | right
apiKey string null API Key that was provided at time of setup
container string 'ng-recommender' The element ID that will be used as the widget container.
cssUrl string '' Allows you to use your own stylesheet. Possible values: null | URL
customParams string null Append query string parameters to the headlines URLs in the widget.
Posible values: 'source=dailyme' | 'some-param=value'
filter string null Activates a customer specific filter. Must be used only under Newstogram's team advice.
headlinesRotation boolean false Activates a special algorithm for headlines rotation.
Possible values: true | false
limit integer 5 Specifies how many headlines to be shown.
maxHeadlinesLength integer 48 Truncate headlines to specified number of chars.
maxWidth integer null Maximum width of the widget.
section string null Specifies which section of the site the service is being displayed. Must be numeric and 4 length digit.
Ex. '0001' | '5000' | '1500'
source string null Sends the API the domain where the widget is being rendered. This is useful for customers with one API and multiple domains.
title string 'Recommended for You' Widget title.

Default Recommender CSS Classes (Stylesheet)

.ng-recommender {}
.ng-recommender iframe {display: inline-block !important;width: 300px;height: 250px;margin: 0;}
.ng-recommender .ng-openx {display: inline-block; height: 250px;width: 300px; margin: 10px 0;}
.ng-recommender > .ng-headlines{display: inline-block;border: 4px solid #e4ecf2;font-family: "Helvetica Neue", Helvetica, Ubuntu, Arial, verdana, sans-serif;padding-bottom: 10px;vertical-align: top;margin: 10px;}
.ng-recommender > .ng-headlines > h1{background-color: #e4ecf2;font-size: 19px;padding-left: 20px;margin: 0;padding-bottom: 5px;}
.ng-recommender > .ng-headlines > ul {padding-left: 20px; line-height: 10px;margin: 10px 0 5px 0;padding: 0 20px 0 36px}
.ng-recommender > .ng-headlines > ul > li {list-style-image: url(; margin-bottom: 6px}
.ng-recommender > .ng-headlines > ul > li > a{font-size: 12px;font-weight: bold;text-decoration: none;color: #313c6a;}
.ng-recommender > .ng-headlines > .ng-sponsored-link {padding-left: 20px;}
.ng-recommender > .ng-headlines > .ng-sponsored-link > span {color:#cad0d0;display: block;font-size: 10px;font-weight: 400;margin-bottom: 5px;}
.ng-recommender > .ng-headlines > .ng-sponsored-link > {color: #313c6a;font-size: 12px;text-decoration: none;float: left;max-width: 200px;}
.ng-recommender > .ng-headlines > .ng-sponsored-link > > small{color: #cad0d0;font-size: 9px;}
.ng-recommender > .ng-headlines > .ng-sponsored-link >{float: right;margin-top: -5px;margin-right: 18px;}
.ng-recommender > .ng-headlines > .ng-sponsored-link > > img {border: none;}
.ng-recommender .ng-clear {clear: both;}

/* Large desktop */
@media (min-width: 1200px) {}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {}

/* Landscape phones and down */
@media (max-width: 480px) {
    .ng-recommender > .ng-headlines > h1 {font-size: 16px;}
    .ng-recommender > .ng-headlines > ul {padding-left: 20px}
    .ng-recommender > .ng-headlines > ul > li{list-style: none}
    .ng-recommender > .ng-headlines > ul > li > a{font-size: 10px;}
    .ng-recommender > .ng-headlines > .ng-sponsored-link > {font-size: 11px;}
    .ng-recommender > iframe {margin: 10px;}

Implementing the Newstogram Trending Widget

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Implementing the Newstogram Toolbar Widget

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.