---
title: "Implement Inline Content"
slug: "implement-inline-content"
updated: 2024-02-13T05:43:57Z
canonical: "docx.syndigo.com/implement-inline-content"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docx.syndigo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Implement Inline Content

For basic overview of Enhanced Content (Inline/Hero): [https://help.syndigo.com/hc/en-us/articles/360044492794-Understand-Enhanced-Content-Types](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>
```

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>
```

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.

## Available Attributes

| 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
```

## 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
    }
})
```

You can also check the content load status via property:

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

## Unloading

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
```

## Hiding/Unhiding

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
```

              **Example of Inline Content**

              

[Inline - Swiffer @ CVS](https://www.cvs.com/shop/swiffer-sweeper-dry-sweeping-pad-multi-surface-refills-for-dusters-floor-mop-with-febreze-lavender-16-ct-prodid-1010345?skuId=125985)