Skip to main content

Step 4: Consume

Amplience imageAmplience image

Now that you've created and published the banner you can use the content delivery SDK to retrieve it from the CMS and then render it in the browser.

You don't need to create your own project from scratch, we've provided interactive sandboxes for you with code for each of the popular JavaScript frameworks: including: React, Vue, Svelte, Angular and vanilla JavaScript. All you need to do is:

  • Modify the code in the sandbox for your favourite framework to include your hub name
  • Update the delivery key to the one you assigned to your banner (if it's different from banner-example.

In the next few steps we walk you through initializing the SDK, retrieving content and rendering it in the browser using the JavaScript version of the banner project. We recommend reading through these steps and then updating the code in the sandbox for your chosen framework.


If you don't have an Amplience account yet, you can still try out the code in the sandbox. We've built another banner with a different delivery key for you to use.

Include the SDK in your project
Link copied!

Install the SDK using npm and add the package to your dependencies, run the following command:

npm install dc-delivery-sdk-js –-save

We need to import the ContentClient class which we use to create our content client:

import { ContentClient } from 'dc-delivery-sdk-js';

If you're not using a package manager you can also include a pre-bundled version of the SDK as explained in the SDK read me.

Initialize the SDK with your hub name
Link copied!

To configure the SDK, create a new ContentClient instance and pass your hub name as a parameter. As explained in the publish step, you can find your hub name from the properties window that you can access from the settings menu in the Dynamic Content app, or from the delivery URL in the content item properties.

The code in this tutorial uses docsportal by default, but you should update this to your own hub name.

const client = new ContentClient({ hubName: 'docsportal' });

Retrieve the banner content
Link copied!

You can retrieve content by ID or delivery key. In the create content step you added a delivery key to the banner, so you'll retrieve the content using this key. If you used a different delivery key to "example-banner" then you'll need to change this in your code.

const deliveryKey = 'banner-example';

The getContentItemByKey function takes a string as a parameter and returns the JSON content of the corresponding content item.

In the example, if the content is found then the renderBanner method is called to render it.

.then(response => renderBanner(response.body));

For the banner the JSON content returned in content.body will look something like the following:

"name":"Code samples - Tutorial banner"
"alt":"Model wearing summer hat and dress"
"title":"Buy now"
"headline":"Surprise sale now on!",
"strapline":"A chance to update your wardrobe"

Render the content
Link copied!

In the JavaScript version of the example, a template is used to convert the JSON content returned by getContentItemByKey into HTML to render in the browser window.

function renderBanner(banner) {
if (!banner) {
const { headline, strapline, background, link } = banner;
const template = `
<section class="banner">
<img src="${background.image.url().build()}" alt="${background.alt}" />
<a href="${link.url}"> ${link.title} </a>
document.body.innerHTML = template;

Note that to build a URL from the background.image property, you need to combine the defaultHost (usually, the endpoint, which will be your account name, and the image name. The SDK includes an image URL builder helper method to make this easy:


The HTML can then be rendered in the browser:

document.body.innerHTML = template;

Try it out
Link copied!

To try out your banner in the sandbox, choose your favourite framework and follow the instructions to:

  • Update the hub name to match your hub
  • Change the delivery if the one you assigned to the banner is different from 'banner-example'

Once you've made these changes you'll see your banner running in the sandbox. Click the icon in the bottom right of the sandbox to open it in its own page.


If you don't have an Amplience account yet, you can make use of the interactive sandboxes by choosing your favourite framework and:

  • Keeping the hub name as 'docsportal'
  • Updating the delivery key to 'tutorial-complete'

Choose your framework
Link copied!

This is a simple JavaScript example showing the set up of a ContentClient and fetching of content by delivery key, passing the content to a template literal to generate the HTML that is used to render the banner.

Updating the hub name and delivery key

To make the changes to retrieve and render your banner, modify the index.js file:

  • To update the code to use your hub, change hubName when constructing the ContentClient:
const client = new ContentClient({ hubName: 'docsportal' });
  • To update the delivery key change the deliveryKey const:
const deliveryKey = 'banner-example';

Key steps in the code

  • Fetch data using getContentItemByKey
  • Pass data to template literal
  • Set the innerHTML with HTML string

Where to go from here
Link copied!

Congratulations on completing the get started tutorial.

Now that you know how to retrieve published content from the CMS, you can find out how to work with unpublished or in progress content using visualization and preview. Visualization lets your users see their content before it gets published and our realtime visualization feature lets users see their updates as they make changes.

Content preview works with our scheduling features to let users see their content exactly as will appear at a specified date and time in the future.

Both of preview and visualization make use of our virtual staging feature which makes it easy for you to work with unpublished content.

Visit the technologies section to find sample code for your chosen framework.