Create Injected Content

Content injection provides the ability to update a website directly via the API. Learn more below

Duda offers three different types of content that can be injected.

TypeKeyValueRefsimportant
INNERHTMLThe value of the data-inject attribute on the targeted elements. For example, <div data-inject="my-key-email"> has a key of my-key-email.The content you want to be placed within the HTML element. Can be text or HTMLN/AN/A
DOMATTRThe value of the data-inject attribute on the targeted elements. For example, <div data-inject="my-key-email"> has a key of my-key-email.The value of the attribute you are wanting to add. For example, if you want to change the src of an image, you would place the direct URL of the image as the value.The keys of the attributes you want to add or replace. For example, both an href and title attribute can be updated at the same timeN/A
CSSThe value of the data-inject attribute within a CSS rule. For example, data-inject:display-background has a key of display-background.The CSS value you want to update. This could be none for the display property, a URL for background-image or a color code (HEX or RGB) for color values, for example.The property of the css selector you want to update. For example, a property of margin and padding would add a css rule for eachBy default, CSS properties are automatically injected with '!important' exception. Use "important": false flag if you wish to opt-out of this default behavior.

📘

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

See the example below of each type:

# If you have this HTML & CSS block within the website:
#
# <a class="u_1454453128 dmNewParagraph email-css" data-inject="my-key-email" id="1454453128" href="mailto:[email protected]">[email protected]</a>
#
# .email-css {
#   data-inject: email-css;
#   color: #474747;
# }
#
# And run this:

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": "my-key-email",
                "value": "[email protected]"
            },
            {
                "type": "DOMATTR",
                "key": "my-key-email",
                "value": "mailto:[email protected]",
                "refs": [
                    "href"
                ]
            },
            {
                "type": "CSS",
                "key": "email-css",
                "value": "#000000",
                "refs": [
                    "color"
                ],
                "important": false
            }
        ]'
        
# The code will be updated to:
# <a class="u_1454453128 dmNewParagraph email-css" data-inject="my-key-email" id="1454453128" href="mailto:[email protected]">[email protected]</a>
#
# .email-css {
#   data-inject: email-css;
#   color: #000000;
# }

📘

The inject content API only updates the development version of the website. If you'd like to see these changes on the live website, make sure that you publish the website after making these updates.

Language