Implement Inline Content

  • 1 minute(s) read
Prev Next

For basic overview of Enhanced Content (Inline/Hero): https://help.syndigo.com/hc/en-us/articles/360044492794-Understand-Enhanced-Content-Types

How to Implement In-Line Content

Import the Syndigo enhanced content SyndiTag anywhere in your web page:

SyndiTag

<script type="text/javascript"> 
      (function (s, y, n, di, go) { 
        di = s.createElement(y); 
        di.type = 'text/java'+y; 
        di.async = true; 
        di.src = n + Math.floor(Date.now() / 86400000); 
        go = s.getElementsByTagName(y)[0]; 
        go.parentNode.insertBefore(di,go); 
      }(document,'script', "https://content.syndigo.com/site/siteid/tag.js?cv=")); 
</script>
JavaScript

Wherever you'd like the In-Line content (referred to as the "Powerpage") to show, add this HTML element:

<syndigo-powerpage pageid="Page-ID-HERE"> </syndigo-powerpage>
HTML

You can declare the script tag and html in any order, it won't affect anything.

There are a variety of methods available in the service to customize the implementation.

Name Description Default Required (?)
pageid The content to display; a product SKU or product identifier (content ID). YES
hidden whether or not In-Line (powerpage) should be visible FALSE NO

Updating Content

You can set the pageid (The content to display; a product SKU or product ID) attribute, which will cause the In-Line (powerpage) to load new content:

const p = document.querySelector('syndigo-powerpage')

p.setAttribute('pageid', '12345') // replace 12345 with the new pageid you want to show content for
JavaScript

Detecting Content Presence

If you want to determine if content has loaded, you can attach a custom event listener:

const p = document.querySelector('syndigo-powerpage')

p.addEventListener('content', function (ev) {
    if (ev.detail.hasContent) {
        // content was loaded
    } else {
        // no content was loaded
    }
})
JavaScript

You can also check the content load status via property:

const p = document.querySelector('syndigo-powerpage')
if (p.hasContent) {
    // content is loaded
}
JavaScript

Simply remove it from the document, and it will be cleaned up automatically:

const p = document.querySelector('syndigo-powerpage')
p.remove() // destroy the powerpage and cleanup it's internals
JavaScript

If looking to keep In-Line content hidden(determines whether or not the mosaic should be visible), add this:

p.setAttribute('hidden', '') // hides the powerpage
p.removeAttribute('hidden')  // un-hides the powerpage
JavaScript
Example of Inline Content

Inline - Swiffer @ CVS