Embed contentfry displays

Contentfry display embed script is available for embedding with JS frameworks.

https://platform.contentfry.com/sdk/embed.js

Available demos with sample code

Display JS Demo Display Vue Demo Display Angular Demo

Usage

Main responsibility of the embed.js is to resize embedded display iframe when more contents are loaded and iframe size is changed.

Embed.js introduces a global cfLoader object for initalizing display loading in target document element(s).

Initialize single display element

<div id="contentfry-element" class='contentfry-wrapper' data-cf-display-id="150" data-cf-config="limit=3"></div>

cfLoader.init(document.getElementById("contentfry-element"));

Initialize multiple display elements

<div class='contentfry-wrapper' data-cf-display-id="150" data-cf-config="limit=3"></div>
<div class='contentfry-wrapper' data-cf-display-id="373" data-cf-config="limit=3"></div>

cfLoader.init(document.getElementsByClassName("contentfry-wrapper"));

Samples follow the same structure as in the live publish embed.js.

<!-- copy data-cf-display-id and data-cf-config from live embed  -->
<div class='contentfry-wrapper' data-cf-display-id="150" data-cf-config="limit=3"></div>

<!-- loader event handler, init Elements via class name -->
<script type="text/javascript">
    function contentfryReady() {
        cfLoader.init(document.getElementsByClassName("contentfry-wrapper"));
    }
</script>

<!-- loader async load -->
<script async src="https://platform.contentfry.com/sdk/embed.js" onload="contentfryReady()"></script>

Embed contentfry displays

Available demos with sample code

Usage

Recommended