Using the content rendering service example

In this section we've included an example of using the content rendering service, including some JavaScript code and sample templates. We are using the banner slot template, the use of which is demonstrated on the Consuming content page.

The simple example below shows how to access the content rendering service from front end code. Note that the service is optimised to be used from server side code and that’s generally how we recommend it's used.

JavaScript code

Here's some JavaScript code that makes a request to the content rendering service. In this case the slot ID is 7ba216e9-7db2-41fa-ba0b-e1833f162be0 and we know the content is a banner slot. To try out this code, add the tutorial banner slot type to your account, add some content and add the slot or content ID for that piece of content to the request. You also need to change 'ampproduct' to your company tag.

  // 'ampproduct' in the URL below should be replaced by the customer's publishing endpoint name. 
  // This will be shown in the Dynamic URL of any published asset in Content Hub.

  const slotID = "7ba216e9-7db2-41fa-ba0b-e1833f162be0";

  const contentUrl =
  "https://c1.adis.ws/v1/content/ampproduct/content-item/"+ slotID + "?template=banner_slot_template";

  // create and issue the request to the Amplience content rendering service
  const deliveryRequest = $.ajax({
    url: contentUrl
  });

  // render the content or display error response
  deliveryRequest
    .success(renderContent)
    .fail(showErrorMessage);

  function renderContent(html) {
  // insert the URL on the page at a div named 'returnedcontent'
  // you can inject the HTML into the page however you like
  $("#returnedcontent").html(html);
  }

  function showErrorMessage(err) {
    console.log('API Request Failure', err);
  }

Example handlebars template

This is the example handlebars template (banner_slot_template) referenced from the URL. To use the code above, you need to upload this to your account as an HTML file named "banner_slot_template".

{{#with bannerslot}}
<div id="contentRender"></div>
  <div class="banner">
   <div class="banner-editorial">
     <div class="banner-header">{{headline}}</div>
       <div class="banner-subheader">{{strapline}}</div>
     </div>
     <img class="banner-background-image" src="https://{{background.defaultHost}}/i/{{background.endpoint}}/{{background.name}}">
     <a class="banner-call-to-action" href="{{calltoactionurl}}">{{calltoactiontext}}</a>
   </div>
{{/with}}

HTML response

Here's an example HTML result. The image URL would include an image from your own account.

<div id="contentRender"></div>
<div class="banner">
 <div class="banner-editorial">
 <div class="banner-header">Winter collection</div>
 <div class="banner-subheader">Stay warm. Stay stylish</div>
 </div>
 <!-- construct image URL from the data. Chose to default to HTTPS -->
 <img class="banner-background-image" src="https://i1.adis.ws/i/store/winter scarf">
 <a class="banner-call-to-action" href="www.google.com">Buy it now</a>
</div>

results matching ""

    No results matching ""