BANNER - General Academy

Start learning today!

Academy

BANNER - Foundations Brand Kit

Watch Now

Brand Kit

Homepage_Banner_OmniPersonalize.png

Omni-channel Personalization

Homepage_Banner_Explainer_Flows.png

What now

Understanding Journey Orchestration with Flows

This video walks through how Red Panda Resort uses Contentstack with Data and Analytics, to identify its most valuable (premier) customers, understand their preferences, and deliver personalized, data-driven marketing experiences that drive higher-value bookings. It covers how audience insights, content maps, and opportunity explorers help surface key behaviors — like a growing interest in adventure activities — and how lookalike models and automated flows are used to target likely premier customers with tailored offers. From social ad click to checkout, the video shows how an omni-channel journey is orchestrated, ultimately fast-tracking high-potential customers through the funnel and boosting overall business value.

Omni-Channel Personalization Demo

Flows makes it easy for marketers, product teams, and developers to automate and personalize customer journeys in Contentstack. This walkthrough shows how to set up a welcome email drip campaign using triggers, wait steps, conditional splits, and exports. With an intuitive, no-code interface, Flows empowers both technical and non-technical teams to streamline complex processes into clear, automated paths—so you can focus on crafting great campaigns, not managing manual tasks.

This video demonstrates how users can set up automated actions—like sending notifications or triggering updates—based on specific events, all without needing to write any code. The tool integrates seamlessly with other apps, helping teams reduce manual tasks, improve efficiency, and ensure consistency across their content processes.

Understanding Automate

<h2>Kickstart Next.js: Code Overview</h2>A lightweight Next.js boilerplate to get you up and running with Contentstack—complete with live preview, Visual Builder support, and essential content types.<h3>Features</h3><ul><li>Barebones setup: Minimal code to connect a Next.js 15 app (using the App Router) to Contentstack.</li><li>Live Preview: Instantly preview content edits in-context.</li><li>Visual Builder: Click-to-edit UI overlays for titles, images, and rich text.</li><li>Modular Blocks: Demonstrates Contentstack’s block-based content modeling.</li><li>Rich Text &amp; Images: Built-in support for rendering Contentstack rich text fields and media assets.</li><li>Tailwind CSS: Utility-first styling out of the box.</li></ul><h3>Prerequisites</h3><ul><li>Node.js &gt;= 18</li><li>Next.js 15 (App directory)</li><li>A Contentstack account with:<ul><li>Stack API Key</li><li>Delivery Token</li><li>Environment (“development”, “preview”, etc.)</li><li>Live Preview API Key</li></ul></li></ul>Read the docs for a deeper explanation: <a href="https://www.contentstack.com/docs/developers/kickstarts/next/" target="_blank">https://www.contentstack.com/docs/developers/kickstarts/next/</a><h3>Extending the Kickstart</h3><ol><li>Add Additional Content Types Copy the pattern in lib/contentstack.ts to initialize and query new types—e.g., blog_post, author.</li><li>Modular Blocks Explore modular blocks in the “Modular Blocks” demo page; see our <a href="https://www.contentstack.com/docs/developers/create-content-types/modular-blocks" target="_self">Modular Blocks Docs</a>.</li><li>Rich Text Customization Use the @contentstack/rich-text-react-renderer to map rich-text JSON to custom React components. See the other video in the Kickstart Learning path.</li><li>Deployment Host on Content Launch, Vercel, Netlify, or your preferred platform. Ensure environment variables are set for API keys &amp; tokens.</li></ol><h3>Next Steps &amp; Resources</h3><ul><li>Deep-dive videos:<ul><li>Live Preview internals</li><li>Modular Blocks usage</li><li>Rich Text rendering</li></ul></li><li>Documentation:<ul><li><a href="https://www.contentstack.com/docs/developers/kickstarts/next" target="_self">Contentstack Docs – Next.js Kickstart</a></li><li><a href="https://www.contentstack.com/academy/content/contentstack-live-preview-under-the-hood" target="_self">Visual Builder Guide</a></li></ul></li><li>Community &amp; Support:<ul><li>Join our <a href="https://community.contentstack.com" target="_self">Discord community</a> for real-time help and discussion.</li><li>Explore full courses on the Contentstack Academy.</li></ul></li></ul>

Kickstart Next.js

View all content

What's New

Understanding Live Preview

Understanding Timeline

Unlock the basics of Contentstack’s Visual Builder in this quick video. This video guides you through the essentials of using Visual Builder’s WYSIWYG interface to create, edit, and customize web pages in real time. You’ll learn how to make instant changes, see live previews, and collaborate effortlessly—all in one intuitive interface. Start using Visual Builder to streamline your content management with ease.<a href="https://www.contentstack.com/docs/content-managers/visual-builder" target="_blank">Visual Builder Documentation</a>

Understanding Visual Builder

Discover how to leverage Visual Builder’s WYSIWYG interface to streamline web page creation, editing, and customization—all in real time. You’ll see how to make rapid, live updates without switching between environments, making it easier to focus on functionality and design simultaneously. Perfect for developers who want to speed up their workflow and enhance collaboration with content creators, this video covers everything you need to know to start building dynamic pages with ease using Visual Builder.Discord:&nbsp;<a href="https://discord.com/invite/NyWJ68gdDw">https://discord.com/invite/NyWJ68gdDw</a><a href="https://www.contentstack.com/docs/developers/set-up-visual-builder" target="_blank">Visual Builder Documentation for Developers</a>

Visual Builder for Developers

Visual Experience

<h2>Why Composable? </h2>Today’s consumers expect to interact with your business on any channel they choose, whenever they choose. To stay competitive, you need the speed and agility to deliver seamless customer experiences across those channels. The need to quickly deliver new experiences and adapt to market changes has led more businesses toward a digital experience platform (DXP) with a composable architecture.

Understanding Composable

<h3>Contentstack Quick Start</h3>This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and import content models that were already built. Then you'll setup a new environment and the correct delivery tokens so you can access published content. When you're done with that you will create entries within the application, and then fork a GitHub repository of an existing React App. Finally, you'll see how to install require dependencies and configure Contentstack so you can ultimately publish to a local development server and deploy your app using Contentstack Launch.<h4>What you'll need:</h4><a href="https://www.contentstack.com/login">Contentstack Account</a><a href="https://nodejs.org/en/download/">Node.js version 18 or later</a><a href="https://github.com/git-guides/install-git">Git</a><a href="https://github.com/">Github account</a><a href="https://code.visualstudio.com/">VS code</a>Access to this <a href="https://github.com/contentstack/contentstack-getting-started-react-app" target="_blank">GitHub Repository</a>.

Contentstack Quick Start

The Contentstack Developer Onboarding Course is designed to equip learners with comprehensive knowledge on various aspects of the platform, including its architecture, APIs, SDKs, and the process of creating a NextJS web application.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground" target="_blank">Download Playground Here</a>You can also install a training instance by visiting our Legacy Academy. Click the <a href="https://www.contentstack.com/academy-old" target="_blank">Create Training Instance</a> button on the home page.Throughout the course, learners will receive detailed instruction on how to utilize Contentstack's features to build robust and scalable web applications. They will gain a deep understanding of the platform's architecture, enabling them to develop applications that take full advantage of Contentstack's capabilities.&nbsp;Additionally, the course will provide learners with hands-on experience using Contentstack's APIs and SDKs, enabling them to develop efficient and effective web applications. By the end of the course, learners will be equipped with the skills and knowledge necessary to create high-quality web applications using Contentstack.

Contentstack for Developers

Contentstack Launch is a frontend hosting and deployment platform for websites built on the Contentstack CMS,&nbsp;Refer&nbsp;<a href="https://www.contentstack.com/docs/developers/launch/about-launch/">here</a>&nbsp;for more.&nbsp;This comprehensive course provides a step-by-step guide to mastering Contentstack Launch and utilizing its capabilities to streamline content management, deployment, and distribution processes.The course begins with an introduction to Contentstack Launch, exploring its key features and benefits. You will quickly get started by learning how to integrate Contentstack Launch with popular frameworks such as Gatsby and Next.js, enabling you to leverage their strengths in conjunction with Contentstack's powerful CMS capabilities.Through hands-on exercises and practical examples, you will discover how to create projects using either GitHub or file uploads, providing you with flexibility and ease of use in managing your content. The course covers various aspects of deployments, including managing environments, environment variables, and custom domains, ensuring smooth and efficient deployment processes.You will dive deep into the functionality of deploy hooks and explore how they can be utilized to automate specific actions during the deployment process. Additionally, you will learn how to harness the power of cloud functions to extend the capabilities of Contentstack Launch, allowing you to implement custom logic and execute complex tasks.The course includes comprehensive how-to guides that cover a range of topics, from adding API endpoints to a website in Contentstack Launch to deploying Gatsby and Next.js sites. You will also gain insights into deploying projects from a monorepo, disabling automatic redeployment, and hosting static sites.Furthermore, you will learn how to integrate Contentstack Launch with your CMS workflow, enabling automatic redeployment whenever new content is published, ensuring that your digital content is always up to date.Finally, the course delves into setting up production and non-production environments, providing you with the knowledge to optimize your deployment strategies for different scenarios. You will also explore how to auto-populate environment variables from a linked stack, simplifying the configuration process and enhancing your development workflow.By the end of this course, you will have a comprehensive understanding of Contentstack Launch and be equipped with the skills necessary to effectively deploy and deliver digital content across multiple platforms and channels, ensuring a seamless experience for your users.

Academy

Brand Kit

Omni-channel Personalization

Understanding Journey Orchestration with Flows

What's New

Omni-Channel Personalization Demo

Understanding Journey Orchestration with Flows

Understanding Automate

Kickstart Next.js

Visual Experience

Understanding Live Preview

Understanding Timeline

Understanding Visual Builder

Visual Builder for Developers

Getting Started

Understanding Composable

Contentstack Quick Start

Contentstack for Developers

Launch Foundations

Join Academy