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.

For a complete list of our example content field and dashboard extensions see the example extensions page.

Amplience Demo Store- Core

The demo store is a Progressive Web App (PWA) powered by Dynamic Content and developed using the React framework & Next.js.

Languages used: TypeScript/ JavaScript. Storybook for component documentation.


Next.js framework for React.


Key Features Demonstrated

  • Content retrieved from Amplience Dynamic Content
  • Multi-language & multi-currency front-end
  • Multiple components and Content Types implemented (banners, card lists, blogs, slots, etc.)
  • Multiple visualizations implemented (page, standalone, time-based, etc.)
  • Visualisation SDK implementation for realtime visualization from Amplience Dynamic Content
  • Filter API implementation for store page & product details page personalisation
  • Multiple extension including: image editing, hierarchy pickers, product selectors and workflow dashboards
  • Integration API to connect to e-Commerce (file based catalog but extensible for other platforms).
  • Search based integration for blog use cases
  • Admin panel (visualize content, slots, editions, switch between production and staging view)
  • Storybook for component documentation and development
  • CLI and automation packages for automating into and between environments (schemas, content types, settings, workflow states, content, slots, indexes, webhooks, preview, visualization etc).

Find it on GitHub.

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
  • How to implement searching and sorting
  • Using delivery keys to specify the URL path for a blog post

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.

Content managed PWA

A sample React / Next.js application that uses Dynamic Content for content management.

Languages used: TypeScript/ JavaScript


Next.js framework for React.


Key features demonstrated

Find it on GitHub.

Content Delivery SDK

Content Management SDK

Webhooks

Blog posts

How we built the Amplience Product Blog

The Dynamic Content Algolia integration

Sample web app powered with Dynamic Content and Algolia search

How to drive dynamic banners using search