infeedl/infeedl-js

INFEEDL JS library

Infeedl JS

Integration

Simple

Add code of INFEEDL creative block to the specific place on a page:

<div data-infeedl-placement="YOUR PLACEMENT ID"></div>

Include INFEEDL library at the end of a page:

<script src="//cdn.infeedl.com/js/infeedl.min.js" crossorigin></script>

Advanced

Creative instead of content

Add following style to a page:

<style type="text/css">
.infeedl--placement {
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;

  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
}

.infeedl--loaded {
  filter: alpha(opacity=1);
  -moz-opacity: 1;
  opacity: 1;
}
</style>

Add class and data-infeedl-placement attributes to your content block:

<div class="infeedl--placement" data-infeedl-placement="YOUR PLACEMENT ID">
  Your content is here
</div>

Include INFEEDL library at the end of a page:

<script src="//cdn.infeedl.com/js/infeedl.min.js" crossorigin></script>

This way INFEEDL will replace your content with creative or display original content in case there is no creative at the moment.

API

Placement

Initialize placement with an id and a node to render in:

var node = document.getElementById("infeedl-placement-node-id")
var placement = new Infeedl.Placement("YOUR PLACEMENT ID", node)

Fetch the creative, optionally passing the callbacks:

placement.fetch({
  onSuccess: function(placement_id) {},
  onFailure: function(placement_id) {}
})

Iframe

Include INFEEDL library at the end of a page:

<script src="//cdn.infeedl.com/js/infeedl.min.js" crossorigin></script>

Initialize iframe optionally passing the selector to start height broadcasting:

var infeedl = new Infeedl.Iframe("body");

Call the action when it has been performed:

infeedl.action();

Development

• Install NPM dependencies: npm install
• Install grunt-cli: npm install -g grunt-cli
• Build: grunt build
• Build and test: grunt test