How to Setup Pages for Content Injection

In this article, you will learn how to set up a page to inject content into using Duda's API. To do this, you will update the innerHTML, add a custom DOM attribute, and change a style property.

NOTE: You can use an existing site to follow along or create a site using the same template "Online Education" (1202068).

Prerequisites

  • API credentials
  • Access to Developer Mode
  • Familiarity with HTML

1. Access Developer Mode for the site

Log into the Duda web interface and access developer mode for the site you're working on.

2. Add the data-inject attribute to target elements

Specify an identifier in the data-inject attribute for each target element. The below code sample uses title and subtitle for the identifiers.

<h1 class="m-text-align-left" style="letter-spacing: initial;" localization_key="templates.custom.b3duQNe.33">
  <!-- set 'title' as the data-inject value -->
  <span data-inject="title" style="display: initial;" no_space_b="true" no_space_e="true">
    Start your career with a leap
    <br/>
  </span>
</h1>

<p class="m-text-align-left" no_space_b="true" no_space_e="true" localization_key="templates.custom.OUuWUgS.34">
  <!-- set 'subtitle' as the data-inject value  -->
  <span data-inject="subtitle" style="display: initial; color: rgb(255, 255, 255);" no_space_b="true" no_space_e="true">
    Want your future to start right now? We've got the tools to make it happen. Real skills for real jobs.&nbsp;
  </span>
</p>

3. Call the Content Injection API to update the target element(s)

Now that you have a couple of elements set up with the data-inject attribute, you can call the Content Injection API to update the target element(s).

// we're using the node-fetch package to make http requests
const fetch = require("node-fetch");

// here, we're setting up our request options
const options = {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Authorization": "Basic " + atob("{username}:{password"),
    "Content-Type": "application/json",
  },
  body: JSON.stringify(updates), // see the 'Updates' tab for the data structure
}

// lastly, we're invoking fetch with the Content Injection endpoint and request options
fetch("https://api.duda.co/api/sites/multiscreen/inject-content/{site_name}", options);
const { Duda } = require('@dudadev/partner-api');

const duda = new Duda({
  user: 'username',
  pass: 'password'
});

duda.content.injectedContent.create({
  site_name: 'site-name',
  raw_body: updates
});
const updates = [
  {
    "type": "INNERHTML",
    "key": "title",
    "value": "Leap into your next career"
  },
  {
    "type": "INNERHTML",
    "key": "subtitle",
    "value": "Are you looking to jump into a new industry? Watch our courses to learn the skills required to do so."
  },
  {
    "type": "DOMATTR",
    "key": "title",
    "value": "title-custom-value",
    "refs": [
      "data-custom"
    ]
  },
  {
    "type": "DOMATTR",
    "key": "subtitle",
    "value": "subtitle-custom-value",
    "refs": [
      "data-custom"
    ]
  },
  {
    "type": "CSS",
    "key": "title",
    "value": "red",
    "refs": [
      "color"
    ],
    "important": true
  },
  {
    "type": "CSS",
    "key": "subtitle",
    "value": "red",
    "refs": [
      "color"
    ],
    "important": true
  }
]

4. Publish the site to apply the Content Injection updates

Publish (or republish) the site to apply the Content Injection updates.

// we're using the node-fetch package to make http requests
const fetch = require("node-fetch");

// here, we're setting up our request options
const options = {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Authorization": "Basic " + atob("{username}:{password"),
    "Content-Type": "application/json",
  }
}

// lastly, we're invoking fetch with the Publish Site endpoint and request options
fetch("https://api.duda.co/api/sites/multiscreen/publish/{site_name}", options);
const { Duda } = require('@dudadev/partner-api');

const duda = new Duda({
  user: 'username',
  pass: 'password'
});

duda.sites.publish({
  site_name: 'site-name'
});

Before

After

That's it! You successfully set up a couple of elements for content injection and applied updates to them via Duda's Content Injection API. All using Duda's Partner API and a few blocks of JavaScript.


What’s Next
Did this page help you?