--- canonical: https://amplience.com/developers/docs/start/consume/ title: 'Step 4: Consume' description: The 4th step in the Amplience developer getting started is consume, using the content delivery SDK to retrieve content from the CMS and render in the browser. how_to: name: "Consume Amplience content using the Content Delivery SDK" description: "Use the Content Delivery SDK to retrieve a published banner from Dynamic Content by delivery key and render it in the browser." total_time: "PT15M" steps: - name: "Include the SDK in your project" text: "Install the dc-delivery-sdk-js package using npm and import the ContentClient class into your project." anchor: "include-the-sdk-in-your-project" - name: "Initialize the SDK with your hub name" text: "Create a new ContentClient instance and pass your hub name as a parameter to configure the SDK." anchor: "initialize-the-sdk-with-your-hub-name" - name: "Retrieve the banner content" text: "Use the getContentItemByKey function with your delivery key to retrieve the banner content item from the CMS." anchor: "retrieve-the-banner-content" - name: "Render the content" text: "Use a template to convert the JSON content returned by getContentItemByKey into HTML and render it in the browser using the SDK's image URL builder helper." anchor: "render-the-content" - name: "Try it out" text: "Update the hub name and delivery key in the interactive sandbox for your chosen framework to see your banner running." anchor: "try-it-out" audience: Developer date_published: 2022-09-07 date_modified: 2023-12-05 --- # Step 4: Consume Now that you've [created](https://amplience.com/developers/docs/start/create) and [published](https://amplience.com/developers/docs/start/publish) the banner you can use the [content delivery SDK](https://github.com/amplience/dc-delivery-sdk-js) 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](#try-it-out) in the sandbox for your chosen framework. > **Tip:** If you don't have an Amplience account yet, you can still [try out](#try-it-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: ```javascript ``` 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](https://github.com/amplience/dc-delivery-sdk-js). ## 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](https://amplience.com/developers/docs/start/publish), 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](#try-it-out) this to your own hub name. ```javascript const client = new ContentClient({ hubName: 'docsportal' }); ``` ## Retrieve the banner content You can retrieve content by ID or delivery key. In the [create content step](https://amplience.com/developers/docs/start/create) 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](#try-it-out). ```javascript 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. ```javascript client .getContentItemByKey(deliveryKey) .then(response => renderBanner(response.body)); ``` For the banner the JSON content returned in ```content.body``` will look something like the following: ```json { "_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. ```javascript function renderBanner(banner) { if (!banner) { return; } const { headline, strapline, background, link } = banner; const template = ` `; 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: ```javascript background.image.url().build() ``` The HTML can then be rendered in the browser: ```javascript 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 ## 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](https://amplience.com/developers/docs/dev-tools/guides-tutorials/visualizations) and [preview](https://amplience.com/developers/docs/dev-tools/guides-tutorials/content-previews). 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](https://amplience.com/developers/docs/dev-tools/guides-tutorials/virtual-staging) feature which makes it easy for you to work with unpublished content. Visit the [technologies](https://amplience.com/developers/docs/technologies) section to find sample code for your chosen framework.