Dynamic Content code samples

If you're getting started with Dynamic Content or are looking for practical examples of how to implement features such as preview and visualization, we have a number of code samples to help kickstart your development.

On this page we'll provide more details of our sample code projects, the features that they demonstrate and the languages and tools that they make use of. All of these samples are available on the Amplience GitHub repo.

Next.js Static Blog

The product blog is a static site powered by Dynamic Content and developed using the JAMstack architecture.

Languages used: TypeScript/ JavaScript.


Next.js framework for React.


Key features demonstrated

  • How to build a static website with Dynamic Content
  • Using Dynamic Content webhooks to trigger a rebuild of a site when content changes
  • How to use the Content Delivery SDK. Fetching content at build time
  • Implementing preview and visualization to preview individual content items and the entire site at a specified date and time

Find it on GitHub.


Algolia sample webhook integration

A sample webhook integration that demonstrates how you can keep an Algolia Search index up-to-date with published content from Dynamic Content.

Languages used: TypeScript/ JavaScript


Express.js framework for Node.js


Key features demonstrated

  • Setting up webhooks in Dynamic Content. A webhook is used to trigger an update of the Algolia search index when a content item is published
  • Using the Dynamic Content Management SDK to fetch the correct version of the content item from within the webhook app
  • Validating a webhook signature

Find it on GitHub


Vue.js demo Algolia blog

An example app that makes use of the Dynamic Content and the Algolia integration to create a simple blog with keyword search features.

Languages used: TypeScript/ JavaScript


NuxtJS framework for Vue.js.


Key features demonstrated

  • Using the Dynamic Content Algolia integration
  • Setting up and using the Dynamic Content Accelerators
  • Using the Content Rendering Service with the Content Delivery SDK

Find it on GitHub

Example extensions

To help you develop your own extensions, we've included some examples covering a range of use cases in our GitHub repository. These extensions are just included as a guide to give you some ideas about the kind of extensions you can create. If you have any questions about using any of the example extensions, just raise an issue in the extension's GitHub repository.

There's also a curated list of awesome UI extensions for Dynamic Content.

Image transformation extension

The image transformation extension makes it easy for a user to apply Dynamic Media parameters to an image by choosing options in the user interface. The selected parameters are saved with the content item and can be used by your rendering code to transform the image on the fly using Dynamic Media.

This extension was developed using the Angular framework.

Find it on GitHub

The image transformation extension allows users to choose Dynamic Media parameters that will be used to transform an image in a content item
The image transformation extension allows users to choose Dynamic Media parameters that will be used to transform an image in a content item

Product selector extension

This extension shows you how you can search for and retrieve product information from a Salesforce Commerce Cloud or SAP® Commerce Cloud account and add it to a content item.

This extension was developed using the React framework.

Find it on GitHub

The product selector extension shows how to retrieve product information from a SFCC account and add it to a content item
The product selector extension shows how to retrieve product information from a SFCC account and add it to a content item

Translation extension

The translate extension shows you how you can connect a translation service (the example uses Yandex) to provide automatic translation of strings into multiple languages. The extension is designed for use with a content item that uses field level localized strings.

This extension was written using the React framework.

Find it on GitHub

The translation extension demonstrates how to use an external translation service to translate field level localized strings
The translation extension demonstrates how to use an external translation service to translate field level localized strings

Content Delivery SDK

Content Management SDK

Webhooks

Curated list of awesome UI extensions

Blog posts

How we built the Amplience Product Blog

The Dynamic Content Algolia integration

Sample web app powered with Dynamic Content and Algolia search

results matching ""

    No results matching ""