Step 4: Consume

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.

tip

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

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

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

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.

client
  .getContentItemByKey(deliveryKey)
  .then(response => renderBanner(response.body));

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

{
   "_meta":{
      "schema":"https://schema-examples.com/tutorial-banner",
      "deliveryId":"e3173105-fc80-4f76-b5e5-821071256ba2",
      "deliveryKey":"banner-example",
      "name":"Code samples - Tutorial banner"
   },
   "background":{
      "image":{
         "defaultHost":"cdn.media.amplience.net",
         "endpoint":"ampproduct",
         "name":"Hero-Banner-720-model2",
         "id":"dff04dbe-8664-4531-bc9a-60e6f5df6fab",
         "_meta":{
            "schema":"http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
         }
      },
      "alt":"Model wearing summer hat and dress"
   },
   "link":{
      "url":"https://amplience.com/developers/docs",
      "title":"Buy now"
   },
   "headline":"Surprise sale now on!",
   "strapline":"A chance to update your wardrobe"
}

Render the content

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) {
        return;
    }
    const { headline, strapline, background, link } = banner;
    const template = `
<section class="banner">
  <header>
    <h1>${headline}</h1>
    <h2>${strapline}</h2>
  </header>
  <img src="${background.image.url().build()}" alt="${background.alt}" />
  <a href="${link.url}"> ${link.title} </a>
</section>
`;
    document.body.innerHTML = template;
}

Note that to build a URL from the background.image property, you need to combine the defaultHost (usually cdn.media.amplience.net), 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:

background.image.url().build()

The HTML can then be rendered in the browser:

document.body.innerHTML = template;

Try it out

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.

tip

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

JavaScript

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

React

A simple React example showing set up of a content client and then fetching content by delivery key when the component mounts using useEffect . A banner component is then rendered if content is present.

Updating the hub name and delivery key

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

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

• To update the delivery key change the deliveryKey const:

const deliveryKey = 'banner-example';

Key steps in the code

• Create initial state using useState
• When component mounts using useEffect and calling fetchBanner
• Render Banner if data present

Vue

This is a simple Vue example showing set up of a contentClient and fetching content by delivery key when the app component is rendered. A banner component is then rendered if content is present.

Updating the hub name and delivery key

To make the changes to retrieve and render your banner, modify the App.vue file:

• To update the code to use your hub, change hubName when constructing the ContentClient:

client: new ContentClient({ hubName: 'docsportal' }),

• To update the delivery key change the deliveryKey const:

deliveryKey: 'banner-example',

Key steps in the code

• Creating a component
• Setting initial state in data
• Creating methods
• Fetching data on component creation (when component renders)
• Rendering Banner if the data is present

Angular

This Angular example is written in TypeScript. It demonstrates set up of a ContentClient and fetching of content by delivery key. The content is then passed to a banner component for rendering.

Updating the hub name and delivery key

To make the changes to retrieve and render your banner, modify the app.component.ts file:

• To update the code to use your hub, change hubName when constructing the ContentClient:

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

• To update the delivery key change deliveryKey:

deliveryKey = 'banner-example';

Key steps in the code

• Create component using @Component
• Set initial state
• On mount fetch data and set the data
• Pass data to the banner component

Svelte

This is a simple Svelte example showing set up of a ContentClient and awaiting content, fetched by delivery key in the template to render a Banner component.

Updating the hub name and delivery key

To make the changes to retrieve and render your banner, modify the App.svelte 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 key passed to getContentItemByKey:

<main>
  {#await client.getContentItemByKey('banner-example') then { body: banner }}
    <Banner {...banner} />
  {/await}
</main>

Key steps in the code

• Fetch data and then render Banner using await blocks

Where to go from here

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.