Content Injection

Content Injection provides the ability to update site content from outside the editor. This is a great option when you want to push content, but aren't concerned with storing the content in a site's Content Library.

How It Works

The first step is adding a data-inject attribute in the markup of the HTML element you want to target. See an example below.

<h4 data-inject="mytarget"></h4>

Once this is done you can make API calls that target all HTML elements with this data-inject attribute.

📘

data-inject attributes added to a site template are preserved when used to create a new site

Inject Content API

The Inject Content API endpoint allows you to target all HTML elements with a specific data-inject attribute. The example below uses an INNERHTML type. The next section will go through the details of all support content types.

curl -X POST -k 'https://api.duda.co/api/sites/multiscreen/inject-content/b4ra2g' \
    -u 'APIusername:APIpassword' \ 
    -H 'Content-Type: application/json' \
    -d '[
            {
                "type": "INNERHTML",
                "key": "mytarget",
                "value": "My Title"
            }
        ]'

Learn more about the Content Injection API.

Content Types

The API supports three types of content to inject. Each is listed below. They all use the same API endpoint documented above.

innerHTML

The setup below allows the innherhtml of the h4 to be updated.

<h4 data-inject="mytarget"></h4>
curl -X POST -k 'https://api.duda.co/api/sites/multiscreen/inject-content/b4ra2g' \
    -u 'APIusername:APIpassword' \ 
    -H 'Content-Type: application/json' \
    -d '[
            {
                "type": "INNERHTML",
                "key": "mytarget",
                "value": "My Title"
            }
        ]'
<h4 data-inject="mytarget">My Title</h4>

The example above illustrates how to set the innerhtml to a new string. This string can contain HTML as well.

DOM Attribute

Any DOM attribute of an HTML element can be targeted with content injection. See the example below.

<a data-inject="my-key-email" href="mailto:[email protected]">Email Me</a>
curl -X POST -k 'https://api.duda.co/api/sites/multiscreen/inject-content/b4ra2g' \
    -u 'APIusername:APIpassword' \ 
    -H 'Content-Type: application/json' \
    -d '[
            {
                "type": "DOMATTR",
                "key": "my-key-email",
                "value": "mailto:[email protected]",
                "refs": [
                    "href"
                ]
            }
        ]'
<a data-inject="my-key-email" href="mailto:[email protected]">Email Me</a>

The refs property allows for multiple attributes to be updated at the same time.

CSS Rule

Any CSS rule can be targeted and updated with Content Injection. There is an example below showing how to update a background-image and color.

📘

By default all CSS rules added with content injection are given the !important rule. If you don't want !important added, then provide the important: false property in the API call.

*#dm *.dmbody div.u_1340759176 {
  data-inject: inject-hero-image;
  background-image: url(‘http://cdn.com/placeholder.png’);
  data-inject: inject-color;
  color: #333;
}
curl -X POST -k 'https://api.duda.co/api/sites/multiscreen/inject-content/b4ra2g' \
    -u 'APIusername:APIpassword' \ 
    -H 'Content-Type: application/json' \
    -d '[
            {
                "type": "CSS",
                "key": "inject-hero-image",
                "value": "url(\'http://cdn.com/newimage.png\')",
                "refs": [
                    "background-image"
                ]
            },
            {
                "type": "CSS",
                "key": "inject-color",
                "value": "#12345f",
                "refs": [
                    "color"
                ],
                "important": false
            }
        ]'
*#dm *.dmbody div.u_1340759176 {
  data-inject: inject-hero-image;
  background-image: url(‘http://cdn.com/newimage.png’);
  color: #12345f;
}

Other Notes

Upload API

As always it's best to use Duda's Upload API when changing the source of an image. This pushes the content to the Duda CDN and optimizes it for various device types.

Find all Values

The Content Values API will search a site for all references of the data-inject value, either in the HTML or CSS of the website.

Publishing

The inject content API only updates the development version of the site. If you'd like to see these changes on the live site, then a site publish must be made.

Uniqueness

It is not required that keys be unique across a site. Duda allows any number of HTML elements to have the same data-inject value. The same goes for a CSS rule


Did this page help you?