Introduction to Workflows

Understanding Workflow Stages

Working with Workflow Stages

Content doesn’t publish itself — it moves through a series of reviews, approvals, and updates before it’s ready to go live. In Contentstack, this entire process is managed through workflows.In this course, you’ll learn how workflows keep your content organized, consistent, and collaborative. You’ll see how entries move from draft to review to approval, and how each stage ensures that nothing slips through the cracks.We’ll start by explaining how workflows are set up by your organization’s admins, and what role you play as an author or content manager. Then, you’ll get hands-on with the day-to-day actions you’ll take:<ul><li>Viewing workflow stages and understanding where your content stands</li><li>Moving entries from one stage to another</li><li>Requesting and approving edits</li><li>Managing tasks and assignments within the workflow</li><li>Handling publish and unpublish approvals</li></ul>By the end of this course, you’ll know exactly how to navigate Contentstack’s workflow process—from drafting and reviewing to publishing—so your team stays aligned and your content stays on track.

Opengraph_B.png

Using Workflows

Using Workflows_Thumb.jpg

<h2>Data &amp; Insights</h2>Contentstack’s Data &amp; Insights (the acquired Lytics technology) is designed to unify, analyze, and activate first-party customer data in real time to power personalized digital experiences at scale. It enables brands to deliver the right message to the right audience, on the right channel, every time, by leveraging unified insights, predictive modeling, and automation.<h3>Introduction</h3>Data &amp; Insights key capabilities.<h4 id="label-x1">#1 - Unified Customer Profiles</h4>Data &amp; Insights collects and unifies first-party data from multiple sources (web, mobile, product, social, etc.) to build centralized customer profiles. This enables organizations to segment audiences, track user interactions, and leverage data for personalized marketing strategies.<h4 id="label-x2">#2 - Real-Time Data Activation</h4>The platform supports real-time ingestion and processing of both bulk and event-level data, ensuring that customer profiles and audience segments are always up to date and ready for immediate activation across channels.<h4 id="label-x3">#3 - Audience Segmentation and Personalization</h4>Data &amp; Insights provides advanced audience segmentation tools, allowing marketers to create highly targeted segments based on behavioral, demographic, and contextual data. These segments can be used to deliver personalized content and experiences natively within Contentstack or exported to other marketing tools.<h4 id="label-x4">#4 - Data Warehouse Activation</h4>With features like Cloud Connect, Data &amp; Insights enables direct segmentation and activation on top of cloud data warehouses, allowing marketers to leverage existing data without duplication or additional data movement.<h4 id="label-x5">#5 - Journey Orchestration and Analytics</h4>Data &amp; Insights offers journey orchestration capabilities, enabling brands to design, manage, and automate customer journeys across multiple channels in real time. Built-in analytics and reporting provide actionable insights into customer behavior, campaign performance, and business outcomes.<h4 id="label-x6">#6 - Integration Ecosystem</h4>Data &amp; Insights offers pre-built integrations with a wide range of marketing, analytics, and data tools, making it easy to onboard and export data, enrich profiles, and activate audiences across the martech stack.<h3>Some Data &amp; InsightsReal-Time CDP use cases.</h3><div><h4>Commerce</h4><ul><li>Optimized and personalized customer journey drives improved customer experience, sales and customer loyalty.</li><li>1:1 merchandising and cross-/ up-sell.</li><li>Campaign optimization – targeting, suppression, predictive ML, lookalike modeling delivering improved ROAS.</li><li>Insights and reporting on audience and campaign performance.</li><li>Managing global privacy risk – data residency, secure data sharing between brands and with partners through data clean rooms.</li></ul><h4>Financial Services</h4><ul><li>Compliance – supports global data residency and data use regulations and ensures compliant communications.</li><li>Secure data sharing between regulated subsidiaries through clean room solutions.</li><li>Insights and reporting on audience and campaign performance.</li><li>Personalized customer experience based on content affinities and other behavioral attributes.</li><li>Streamlined data management processes, reducing the time it takes to gather and analyze data from multiple systems. This increases operational efficiency, reduces costs, and enables institutions to stay competitive.</li></ul><h4>Sports/Media/Entertainment</h4><ul><li>Activating audiences and delivering personalized experiences based upon content affinities.</li><li>Improved live fan experience leveraging real-time behaviors.</li><li>Insights and reporting on audience and campaign performance.</li><li>Secure data sharing between teams, leagues, artists &amp; promoters through clean room solutions.</li><li>Expand addressable market through lookalike modeling and audience expansion.</li></ul><h4>Technology</h4><ul><li>Optimized and personalized customer experience based on content and product affinities and other behavioral attributes.</li><li>Compliance – supports global data residency and data use regulations and ensures compliant communications.</li><li>Insights and reporting on audience and campaign performance.</li><li>Orchestrated customer journey across touchpoints, over time for individuals and for account-based marketing (ABM).</li><li>Streamlined data management processes, reducing the time it takes to gather and analyze data from multiple systems.</li></ul></div><h3>Watch the Demo</h3><a href="https://youtu.be/JmdpmV_smpE" target="_blank" rel="noopener noreferrer">Check out the video below to learn more about Data &amp; Insights</a><iframe src="https://www.youtube.com/embed/JmdpmV_smpE" allowfullscreen="" frameborder="0"></iframe>

Data & Insights Course

Partner Sales Essentials - Data & Insights Quiz

Understand how Contentstack’s Data &amp; Insights unifies first-party customer data for real-time activation and personalized experiences. The course covers unified customer profiles, advanced segmentation, journey orchestration, and integration with data warehouses.

Partner Essentials-Data & Insights.png

[DEV TEST] Data & Insights

About Contentstack Quick Start

Create a New Stack and Import Content Models

Setup an Environment and a Delivery Token

Create Entries

Fork the Starter App Repository

Install Dependencies and Configure Contentstack

<h3>Contentstack Quick Startttttt</h3>&nbsp;Thisssssss 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.&nbsp;<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>&nbsp;Access to this <a href="https://github.com/contentstack/contentstack-getting-started-react-app" target="_blank">GitHub Repository</a>.&nbsp;&nbsp;&nbsp;

Get started quickly using Contentstack in the short course.

Opengraph_A.png

Contentstack Quick Start

Stack_Data.zip

Contentstack Quick Start Course Thumbnail

[TEST ON DEV (LP)] Contentstack Quick Start

<h1>Developer Onboarding Course - Introduction</h1> Welcome to our exciting new course on developing web applications with Contentstack! If you're looking to build powerful, scalable, and customizable web applications, then you're in the right place. In this course, we'll guide you through the fundamentals of Contentstack, including content modeling, API and SDK usage, and more. We'll also cover advanced topics such as extending a NextJS app, enabling localization, and optimizing your content delivery. With our easy-to-follow tutorials and hands-on exercises, you'll quickly gain the skills and knowledge needed to build stunning web applications that meet the needs of your clients and users. So, whether you're a seasoned developer or just starting out, join us on this exciting journey and take your web development skills to the next level with Contentstack!The main tasks in the course are:<ol><li>Create a new detail page (new content type, new NextJS Component, new CD API query)</li><li>Create a new gallery landing page (new content type, new NextJS Component, more complicated CD API Queries)</li></ol>We also cover the following:<ul><li>Starter app overview, install, and walk through</li><li>Using CMA to read and import content</li><li>SDKs / APIs overview and introduction</li><li>SDKs / APIs deep dive with patterns / practices&nbsp;</li><li>Roles &amp; Permissions</li><li>Workflow</li><li>Marketplace intro</li><li>Automation hub intro</li></ul><h1>What we will be building</h1><h2>Composable Hero&nbsp;Gallery Page</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd51a0c5b982c72f8/664c027a1983ea9d6dac29b4/composable-heros.png" alt="composable-heros.png" height="auto"/><h4> Composable Hero Detail Page</h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcba8639d82e39f82/664c02a3785339639e9e3d9f/composable-heros-detail.png" width="auto" alt="composable-heros-detail.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;"/><h1>Getting Started</h1>1.&nbsp; Create a new Training Instance - Go to&nbsp;<a href="https://www.contentstack.com/academy-old">https://www.contentstack.com/academy-old</a> and select 'Create a Training Instance'. 2.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground">Download the course code from Github (https://github.com/contentstack/contentstack-academy-playground)</a> 3.&nbsp; Rename the .env.local.sample file to .env.local and update the configuration properties <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3b6b76e3ee547ed/664c033cc9024cafa4ad58b4/rename-sample.png" alt="rename-sample.png" height="auto"/> 4. Build the project with 'npm i' 5.&nbsp; Run the website with 'npm run dev'

What We'll Build

Getting Started

<h1>Architecture</h1><h2>Big Picture Architecture Diagram</h2><h3>Backend</h3>The Backend of Contentstack is the CMS with the ability to create and publish content.&nbsp; The focus here is on editor ease-of-use by providing a simple, powerful and flexible UI for content creation and management.&nbsp; In addition to the out of the box functionality, we also provide an ability to extend the interface by creating UI Extensions using our App SDK and connect to 3rd-party applications such as DAM providers, Analytics, E-Commerce platforms and more.<h3>Frontend</h3>The focus on the frontend is high-performance for your website and web application. APIs and SDKs are provided to the developer for using in their applications to perform read-only queries to the content.&nbsp; The Content Delivery APIs use an internal CDN to cache all queries to the platform which results in higher performance for all your web applications.&nbsp; This is also where we find the Images API for delivering image assets.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40df19fbdfa691c4/664c7d55a671fa7891f218bf/Architecture.png" alt="Architecture.png" height="auto"/><h2>Environments</h2><ul><li>One Stack can publish to multiple Environments. &nbsp;Think of Environments as “publish destinations”.</li><li>Each Environment has one Delivery Token, otherwise known as an Access Token. &nbsp;That token is unique per Environment.</li><li>Each Stack has an API key. &nbsp;There is only 1 API key per Stack and it is unique.</li><li>Most API calls will require both an API token and a Delivery / Access Token.</li></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta9f0e57d8a3c5a6e/664c7d9f79abee8ebd3d1534/environment.png" alt="environment.png" height="auto"/>Multi-Stack Architecture Diagram<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd1dd48a1fcbec491/664c7de28a66292552b1397b/multi-stack.png" alt="multi-stack.png" height="auto"/>

Big Picture Architecture

Architecture Walkthrough

Environments Walkthrough

In this module, we'll dive into the world of Contentstack's powerful APIs that can help you build your digital experiences faster, easier, and better. Our APIs are designed to help developers access content and make updates programatically.First, we'll start with Contentstack's Content Delivery API. This API allows developers to retrieve content from Contentstack's headless CMS and deliver it to any digital platform or device. You'll learn how to use our API to retrieve content in a structured and organized manner, so you can easily integrate it into your website, app, or any other digital platform.Next, we'll explore Contentstack's Content Management API. This API enables developers to create, update, and manage content in Contentstack's headless CMS programmatically. You'll learn how to leverage our API to automate content creation, content management workflows, and enable seamless collaboration between developers and content editors, and increase the efficiency of your content creation processes.Finally, we'll dive into Contentstack's Images API. This API allows you to transform and optimize images on-the-fly, so you can deliver the best possible visual experience to your users. You'll learn how to use our API to resize, compress, and optimize images.By the end of this module, you'll have a deep understanding of Contentstack's powerful APIs and how to leverage them to build faster, better, and more engaging digital experiences. So, let's get started!<h1>Using the Content Delivery API</h1>Contentstack's Content Delivery API is a powerful tool that enables developers to retrieve content from Contentstack's headless CMS and deliver it to any digital platform or device. It allows you to fetch content in a structured and organized manner, which makes it easier to integrate into your website, app, or any other digital platform.The Content Delivery API is built on top of a powerful caching layer, which ensures lightning-fast performance even when you're dealing with large amounts of content. This caching layer also ensures that your content is always up-to-date and in sync with the latest updates made to the CMS.One of the biggest advantages of using Contentstack's Content Delivery API is that it's completely agnostic to the technology stack you're using. Whether you're building your website using a traditional CMS or a modern front-end framework like React or Vue.js, the Content Delivery API can be seamlessly integrated into your workflow.With the Content Delivery API, you can also retrieve content in multiple languages, which is essential for building global websites and apps. The API also allows you to fetch only the content you need, which reduces the amount of data transfer and improves the overall performance of your application.<a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/">Content Delivery API Documentation</a><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbeecb6f7ab8cf28a/664d437c785339c0e89e4f8e/API-map.png" alt="API-map.png" height="auto"/>

Using the Content Delivery API

Here's how you can start using our&nbsp;Content Delivery API documentation:
<ol>
 <li>
 Go to the <a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/#get-all-entries">Get Entries</a> section of the Content Delivery Documentation.
 </li>
 <li>
 Click on the "Get all Entries" link to open the query window on the right.
 </li>
 <li>Update the parameters to use the following:<ul>
 <li>content_type_uid: blog_post</li>
 <li>environment: preview (or development; associated with the token that you'll be using)</li>
 <li>locale: en-us</li>
 <li>api_key: (found in the settings / tokens / content delivery token settings page)</li>
 <li>access_token:&nbsp;(found in the settings / tokens / content delivery token settings page)</li>
 </ul>
 If you have questions, see the <a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/#postman-collection" target="_self">CDA Postman guide</a> for more details.
 </li>
 <li>
 Execute the request with the "Try" button.
 </li>
</ol>
Congrats!&nbsp;You just queried the Contentstack Content Delivery API!

Using the Content Delivery API documentation

Querying the Content Delivery API with the Documentation Walkthrough

<h3>Using the Postman collection to connect with the Content Delivery API</h3><ol><li><a href="https://www.postman.com/downloads/">Download and install Postman</a></li><li><a href="https://www.contentstack.com/docs/developers/apis/postman-collections">Download the Contentstack Postman Content Delivery collection</a></li><li>To obtain the Content Delivery Token, follow these steps in Contentstack: navigate to the "Settings" page, select "Tokens," then choose "Content Delivery." If you haven't created a Delivery Token yet, <a href="https://www.contentstack.com/docs/developers/create-tokens/create-a-delivery-token/">create a new Delivery Token</a>. <a href="https://www.contentstack.com/docs/developers/create-tokens/#work-with-delivery-tokens">Additional information about tokens, including Delivery Tokens, can be found in our documentation</a>&nbsp;</li><li>Open Postman and select the 'Content Delivery API - Contentstack' collection.&nbsp; Entries, Get all entries</li><li>Edit the Postman variables and update the values for api_key and access_token.&nbsp; The api_key is found on the Delivery Token settings page.&nbsp; The access_token is the Delivery Token.&nbsp; These are used in the Headers of the request.
 Also, add the value of the content_type_uid as 'blog_post', environment as 'preview' and locale as 'en-us'.</li><li>Send the request.&nbsp; Contentstack replies&nbsp;with the JSON of all blog_post entries.</li></ol>

Using the Postman collection to connect with the Content Delivery API

Using Postman to query the Contentstack Content Delivery API Walkthrough

<h2>Getting Started using the JavaScript Content Delivery SDK</h2>To get started with the Content Delivery SDK and NodeJS, the first thing you need to do is to install it. You can do this by running the following command in your project directory:npm install contentstack <h2>Helpful Javascript Resources</h2><a href="https://github.com/contentstack/contentstack-javascript">Javascript SDK on Github</a>&nbsp;<a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/">Javascript API Reference</a>
 Include the JS SDK in your projects<pre>https://cdn.jsdelivr.net/npm/contentstack@latest/dist/web/contentstack.min.js </pre>Once you have installed the SDK, you need to initialize it with your API key, delivery token, and environment name. Here's an example of how to do this:<pre>const Contentstack = require('contentstack'); const Stack = Contentstack.Stack({ api_key: 'your_api_key', delivery_token: 'your_delivery_token', environment: 'your_environment' }); </pre>With the SDK initialized, you can start retrieving content from Contentstack's API. The SDK provides several methods for fetching content, depending on your requirements.If you want to retrieve a single entry, you can use the Entry method, as shown in the following example:<pre>Stack.ContentType('your_content_type_uid').Entry('your_entry_uid').fetch() .then(function success(entry) { console.log(entry); }, function error(err) { console.log(err); }); </pre>In this example, your_content_type_uid is the unique identifier of the content type you want to retrieve, and your_entry_uid is the unique identifier of the entry you want to retrieve. The fetch() method retrieves the entry and returns it as a JavaScript object.If you want to retrieve multiple entries, you can use the Query method, as shown in the following example:<pre>const stack = Contentstack.Stack({"api_key":"bltc2242b759e36fcb9","delivery_token":"cs1470a664abc4563bd43a604d","environment":"development"});&nbsp; // use your api_key and delivery_token here from your Stack const query = stack.GetEntry('blog_post').Query(); query.toJSON() &nbsp; .find() &nbsp; .then( &nbsp; (result) =&gt; { &nbsp; &nbsp; console.log(result[0]); &nbsp; }, &nbsp; (error) =&gt; { &nbsp; &nbsp; console.error(error); &nbsp; }, ); </pre>In this example, your_content_type_uid is the unique identifier of the content type you want to retrieve. The find() method retrieves all the entries of the content type and returns them as an array of JavaScript objects.The SDK also provides methods for filtering and sorting entries, as well as retrieving entries with specific fields. You can learn more about these methods in the Contentstack documentation.There are also SDKs for most popular languages such as .Net, Java, PHP, Python, Ruby, iOS, Android, Dart, etc.Documentation links:<ul><li><a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/">API Reference</a></li><li><a href="https://github.com/contentstack/contentstack-javascript">JavaScript SDK Github Repo</a></li><li><a href="https://www.contentstack.com/docs/developers/sdks/">All SDKs</a></li><li><a href="https://www.contentstack.com/docs/developers/web-framework/querying/">Query examples</a>
 </li></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt31c71c762d48a421/664d45aa79abeeeb093d23a5/content-sdk.png" alt="content-sdk.png" height="auto"/>

Using the JavaScript Content Delivery SDK

<h2>Using the GraphQL API with Postman</h2> <h3>GraphQL</h3>Contentstack's GraphQL API is a powerful tool for developers who want to integrate Contentstack's content management system (CMS) into their web or mobile applications. It provides a flexible and efficient way to retrieve content from Contentstack's content repository using the GraphQL query language.With Contentstack's GraphQL API, developers can retrieve content from their Contentstack projects using a single API call. The API returns only the data that is requested, which reduces the amount of data transferred and improves performance. The API also supports pagination, filtering, and sorting, which enables developers to retrieve only the content they need and to organize it in a way that best suits their application.Contentstack's GraphQL API supports all of the content types and fields defined in a Contentstack project, including modular blocks and assets. This means that developers can retrieve any type of content from Contentstack, including text, images, videos, and more.In addition, Contentstack's GraphQL API is designed to work seamlessly with popular frontend frameworks and libraries, such as React, Vue.js, and Angular. This allows developers to easily integrate Contentstack's content into their applications and to build dynamic and engaging user experiences.
 <h3>GraphQL API Explorer</h3>Contentstack has a GraphQL API explorer to query Contentstack's Content Delivery API.&nbsp;&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt720a9df15d2b3c95/664d46208a0182e22014ca07/graphQL.png" alt="graphQL.png" height="auto"/><ol><li>In the Contentstack UI, navigate to Settings and then GraphQL</li><li>Build your queries</li><li>There is also an <a href="https://www.contentstack.com/docs/developers/graphql-api/use-the-graphql-queries-with-apollo-sdks/use-graphql-queries-with-apollo-client-javascript-sdk/">Apollo Client JavaScript SDK</a>&nbsp;for using the API&nbsp;</li></ol><h2>More GraphQL API Resources</h2><ul><li><a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">GraphQL&nbsp;Postman Collection</a></li><li><a href="https://www.contentstack.com/docs/developers/graphql-api/graphql-sample-apps/">GraphQL Sample Apps</a></li><li><a href="https://www.contentstack.com/docs/developers/graphql-api/use-the-graphql-queries-with-apollo-sdks/use-graphql-queries-with-apollo-client-javascript-sdk/">Using GraphQL with the Apollo Client JavaScript SDK</a></li></ul>

Using the GraphQL API with Postman

<h1>CDN and Caching</h1>A Content Delivery Network (CDN) ensures that a cache of your content is stored at various locations around the globe. Consequently, whenever there is a page request, the content is served from the cache of the nearest CDN server, rather than the origin server ensuring quicker content delivery.<h2>How CDN Cache Works in Contentstack</h2>The CDN is always up-to-date. It ensures that the cache is always fresh through purging old data and caching new data.When any user requests a piece of content, the nearest CDN server checks if it has a cached copy of the requested content. If not, it checks with the shield server. And, if the shield server does not have the cache of the requested content, it fetches the content from the origin server.A shield server is an extra layer of caching that reduces the load on the origin server. It is located near the origin server, and it saves the cache of content that it serves to any CDN server. So, if any other CDN server requests the same data, the shield server would serve the cached content.Contentstack automatically purges content from the internal Contentstack CDN when published.&nbsp;&nbsp;Helpful links:<ul><li><a href="https://www.contentstack.com/docs/developers/cdn-and-caching/contentstack-cdn-cache-management/">How CDN Cache Management works in Contentstack</a></li></ul>

CDN and Caching

<h1>Query Examples with the Content Delivery API</h1><h2>Query by URL</h2><pre>const getContentByURL = async ({ contentType, slug, refUids, locale, filter }) =&gt; { try { const Query = global.Stack .ContentType(contentType) .Query() .language(locale) if (refUids) { let refs = refUids.replace(/ /g, '').split(',') Query.includeReference(refs) } let result = await Query .includeFallback() .where('url', `/${slug}`) .toJSON() .includeEmbeddedItems() .addParam('include_metadata', 'true') .find() if (result &amp;&amp; result.length &gt; 0 &amp;&amp; result[0].length &lt;= 0) { // for trailing slash match result = await Query .includeFallback() .where('url', `/${slug}/`) .toJSON() .includeEmbeddedItems() .addParam('include_metadata', 'true') .find() } (global.env === 'preview' || global.env === 'staging-preview' ||global.env === 'development') ? Contentstack.Utils.addEditableTags(result[0][0], contentType, true, locale) : '' //metadata key required for _metadata in cms entry data if(result.length &gt; 0 &amp;&amp; result[0].length &gt; 0) { result[0][0] = {...result[0][0], metadata: result[0][0]} } if (result) return result[0][0] } catch (error) { throw new Error(error) } }</pre> <h2>Query by UID</h2><pre>const getContentByUID= async ({ contentType, entryUid, refUids, locale }) =&gt; { try { const Query = global.Stack .ContentType(contentType) .Entry(entryUid) .language(locale) .includeFallback() .includeEmbeddedItems() if (refUids) { let refs = refUids.replace(/ /g, '').split(',') Query.includeReference(refs) } let result = await Query.toJSON().fetch() if (result) return result } catch (error) { return error } }</pre> <h2>Example to Get All Entries</h2><pre>const getEntries = async ({ contentType, refUids, locale }) =&gt; { let collectionData try { const Query = global.Stack.ContentType(contentType) .Query() .language(locale) if (refUids) { let refs = refUids.replace(/ /g, '').split(',') Query.includeReference(refs) } let result = await Query .includeFallback() .toJSON() .includeEmbeddedItems() .addParam('include_metadata', 'true') .find() if (result &amp;&amp; result.length &gt; 0 &amp;&amp; result[0].length &lt;= 1) { //for entry type = single (global.env === 'preview' || global.env === 'staging-preview' || global.env === 'development') ? Contentstack.Utils.addEditableTags(result[0][0], contentType, true, locale) : '' //metadata key required for _metadata in cms entry data result[0][0] = {...result[0][0], metadata: result[0][0]} return result[0][0] } //for entry type = multiple (global.env === 'preview' || global.env === 'staging-preview' || global.env === 'development') ? Contentstack.Utils.addEditableTags(result[0][0], contentType, true, locale) : '' if (result) return result } catch (error) { res.status(500).send(`Internal Server Error\n: ${error}`) // throw new Error(error) } }</pre>

Query Examples with the Content Delivery API

<h1>Using the Contentstack Images API</h1>Welcome, developers, to the Contentstack Images API! As you may know, images are an integral part of any digital experience, and we understand the importance of delivering optimized images quickly and efficiently. That's why we've created the Contentstack Images API, a powerful tool that allows you to manipulate, optimize, and deliver images to your web and mobile applications. Whether you're new to the platform or a seasoned developer, this guide will provide you with everything you need to know to get started with the Contentstack Images API. So let's dive in and explore the possibilities of this powerful tool together!Here are three advantages to using the Contentstack Images API:<ol><li>Performance: The Contentstack Images API allows you to deliver optimized images at scale, reducing load times and improving the overall performance of your web and mobile applications.</li><li>Flexibility: With the Contentstack Images API, you have the flexibility to resize, and transform images in real-time, giving you the ability to customize images to fit any layout or design.</li></ol><h1>Trying out the Image Delivery API</h1>The quickest way to get started with the Image Delivery API is to try it out with the <a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/#introduction">online documentation</a>.&nbsp;&nbsp;Resize an image on the flyContentstack's Images API resizes images on the server and provides the resized file in the response.&nbsp; This is highly performant as the resized image is stored in the CDN cache on the Contentstack side.<h2></h2><h2>Exercise:&nbsp; Resize an image with the Contentstack Images API</h2>1. Go to the following URL, <a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images">https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images</a>2.&nbsp;Update the width of the image and see the image size and dimensions being changed<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b227000df104193/67dc54ed4a89c32ebfa2f78a/CSforDev_L15_Response200.png" alt="CSforDev_L15_Response200.png" height="auto"/><h2> Exercise: Auto-optimizing images with webp</h2>1.&nbsp;Navigate to the Automate Optimization section of the documentation,&nbsp;<a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization">https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization</a>2. Leave the default as webp in the query parameters<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta7976efcf6431992/67dc5524460eb47ea2946bed/CSforDev_L15_AutoOptimize.png" alt="CSforDev_L15_AutoOptimize.png" height="auto"/><h2>Using the Images API in your NextJS Applications</h2>Pass the width,&nbsp;height, or auto attributes to the src property in the img tag<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e849a1eb5110a73/67dc5540f7eccc98ca90cc79/CSforDev_L15_ImagesAPI.png" alt="CSforDev_L15_ImagesAPI.png" height="auto"/><h2>Exercise: Use the Images API to resize the home world image</h2>1.&nbsp; Update the NextJS code to apply a width param of 150px to the home world image.&nbsp; This resizes the image on the server-side and improves the performance of the page load. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2cbba66331047777/67dc5553443bd63ff1f1bec6/CSforDev_L15_ImagesAPIresize.png" alt="CSforDev_L15_ImagesAPIresize.png" height="auto"/>

Using the Images API

<h1>Exercise: Creating the Character Content Type</h1>In this module we will cover the following topics:<ul><li>How to build a Content Type</li><li>Review Field Types</li></ul>Marketing has provided us with requirements to promote our Composable Heroes by creating&nbsp;a section of the site where each hero will have their own detail page and be listed on a gallery page. In the next few exercises we will define the content type for a Composable Hero and&nbsp;build a hero detail page. &nbsp;There’s no time to waste, let’s get started!<h2>Analyze the Page Design</h2>When defining a new Content Type it's important to have the page design available (in photo / HTML format) so we can model the Content Type and define fields for the content elements.&nbsp;&nbsp;Analyze the following pages and think of the properties that a superhero character would need.&nbsp; When analyzing pages we often look for as many representations of the same content as possible, and then we combine all these fields into one Content Type.&nbsp; In this exercise, let's take a look at these two pages and see what fields they contain.&nbsp; We will focus on the main page content and ignore the headers and footer.&nbsp; If you would like to learn more, the Content Modeling course covers the content type fields in more detail.<img width="auto" height="auto" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2c5939936d2d2857/67dc6a95b1a1f33f473eeed0/CSforDev_L16_PageDesign_1.jpg" alt="CSforDev_L16_PageDesign_1.jpg" max-width="auto" style="width: auto; height: auto;max-width: auto;width: auto;height: auto;"/><img asset_uid="blt2c4e42a167b5a160" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2c4e42a167b5a160/67dc6adc1bae684bc54c6ad2/CSforDev_L16_PageDesign_2.png" alt="CSforDev_L16_PageDesign_2.png" height="auto"/><h2>Defining&nbsp;the Character Content Type for the Hero</h2>In the previous section we analyzed the hero pages and thinking of what fields to use for defining the pages.&nbsp; In this section, we will create the Content Type for the Character.&nbsp; If you wish to copy / paste the code samples later, we would advise you to define the content type with the fields in this exercise.&nbsp; However, if you wish to use your own field definitions, that's fine, but you will also need to adjust the code samples accordingly.Creating the Content TypeUsing the Content Type editor in Contentstack, create a new Content Type with fields for our Character content. &nbsp;While defining the fields, we will need to consider what content we want to show on the detail page. &nbsp;<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/Kv6fnat6-b769H14u.html" width="100%" height="150" frameborder="0" scrolling="auto" title="Dev-creating The Character Content Type" style="position: absolute;" allowfullscreen=""></iframe></div> After the exercise, your Content Type should look like this:<img asset_uid="blt781d0a90b92e2c67" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt781d0a90b92e2c67/67dc6adb0c6f5510a31fc463/CSforDev_L16_ContentTypeCheck.png" alt="CSforDev_L16_ContentTypeCheck.png" height="auto"/>Steps for the exercise: 1.&nbsp; Create a new Content Type, named ‘Character’ for the composable heroes 2.&nbsp; Add the following fields:Hero Name - Use the Title field Every Content Type in Contentstack has a Title field.&nbsp; We can give it a different display name such as 'Name' or 'Character Name', but we cannot remove it.URL For the Path, use '/composable-heroes/'&nbsp; and then select the option to append the Title to the URL.&nbsp; This is the most common way to define the URL structure.&nbsp; For Content Types where we know the kind of content each page has (character) and that they will have detail pages, we decide to use '/composable-heroes/' as the URL path and then add the title to the end. <img asset_uid="blt0e9a7e511c89f116" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0e9a7e511c89f116/67dc6adb5e486d1a4671aa9f/CSforDev_L16_URLproperties.png" alt="CSforDev_L16_URLproperties.png" height="auto"/>Image (File) Contentstack has an <a href="https://www.contentstack.com/docs/developers/apis/image-delivery-api/">Images API</a> and supports uploading any media file, including images, up to 700 MB.&nbsp; For images, there are additional properties such as min/max on width or height, so the CMS ensures the images used in a field meet the minimum size requirements. <img asset_uid="blt36199e9adb11c8e3" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt36199e9adb11c8e3/67dc6adb17f7b418a20cf683/CSforDev_L16_ImageFile.png" alt="CSforDev_L16_ImageFile.png" height="auto"/>Description (JSON RTE)The JSON RTE field stores the content in JSON and the frontend webapp uses a <a href="https://github.com/contentstack/json-rte-serializer/">JSON RTE Serializer</a> after publishing to transform the JSON to HTML.&nbsp; There is also an <a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/rte-formatter/">Automation Hub connector that can transform the RTE JSON to HTML</a>.&nbsp;&nbsp;The JSON RTE supports custom plugins and you can use the <a href="https://www.contentstack.com/docs/developers/developer-hub/get-started-with-building-apps-using-contentstack-app-sdk/">App SDK</a> and extend the Rich Text Area with your own customizations.&nbsp; Examples in the Marketplace include a word count extension and a Cloudinary extension.<img asset_uid="blte8860a9727500de8" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte8860a9727500de8/67dc6adbf7eccc35bd90ce1a/CSforDev_L16_Description.png" alt="CSforDev_L16_Description.png" height="auto"/>Powers (select field, add the powers)<img asset_uid="bltc8a96a22c1247f99" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc8a96a22c1247f99/67dc6adb8fee9a228447d640/CSforDev_L16_Powers.png" alt="CSforDev_L16_Powers.png" height="auto"/>Contact Info (Group field, email, phone)Group fields help us organize content fields and in the UI the editor can collapse / open the group.&nbsp; They're also helpful when using the <a href="https://www.contentstack.com/docs/developers/create-content-types/about-field-visibility-rules/">Visibility Rules</a> in Content Types Home world (Reference field)The Home world has an image and some additional properties, so we use a Reference Field and define a Content Type for the Home World instead of using a select field or defining the fields here.<blockquote>Reference fields should be used when the content you want to include either already exists as a standalone entry (or part of one), or will be used by multiple content entries (either of the same type or not)</blockquote> SEOAdd a Global Field and choose the SEO Global Field <img asset_uid="blt2a67ac182732261b" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2a67ac182732261b/67dc6adb4a89c32df8a2f912/CSforDev_L16_SEO.png" alt="CSforDev_L16_SEO.png" height="auto"/> All Done!Congrats - you are done with the Content Type definition.&nbsp;&nbsp; 3.&nbsp; Now, let's try out the new Character Content Type.&nbsp; Create a new Entry with the Character Content Type and fill in the content and publish to Development<h2>Content Type Best Practices</h2>URL field: &nbsp;Best practices/patterns. &nbsp;Use the /path/:title for most content types, where relevant. &nbsp;This maps to the Route in the web application and is also important for SEO. Choose this wisely. Image field: &nbsp;Consider using the height/width limitations Text fields: &nbsp;Consider any validations Modular Blocks: Think of this as a ‘design system’ of components the user can choose from. &nbsp; They have the flexibility to add it if they want, or not. &nbsp;Blocks can also be added at a later time to extend the content type. This can be done in confidence that things will not break if adjustments are made.If you're using a modern framework such as NextJS or Nuxt, then we can think of having a NextJS Component responsible for rendering the content of one Modular Block.&nbsp; In this way, the content and design are atomic and can be re-used across multiple pages. Reference fields:&nbsp; When re-using content with many entries, we can use a Reference Field and connect the Entries.&nbsp; We will need to add an additional query parameter to the Content Delivery Queries so that the referenced Entry fields will also be returned.&nbsp; One example of using a reference field is on a homepage or landing page where we want to also show a listing of articles, products in a promo, etc.&nbsp;&nbsp; However, be mindful when implementing Reference fields as they can be easily overused. &nbsp;When modeling content, it’s best to keep the relationship &nbsp;as flat as possible and only use reference fields when referring to another type of content that is mostly independent of the model it is being referenced in. &nbsp;If content fields are only used by the current entry, then it’s better to include them in the content type rather than using a reference field. &nbsp;Reference field over-use is the most common content modeling pitfalls &nbsp;and increases the complexity of the system for end users.&nbsp;<h1>Create the NextJS Component for the superhero detail page</h1>Next step is to render the Character Entries on a superhero detail page.&nbsp; This process involves the following steps:<ol><li>Create a new NextJS Component and import the Contentstack libraries</li><li>Use the HTML Provided and add the code to render the Contentstack Character Content Type fields</li><li>Run locally and preview the page</li></ol> Now that we have defined our superheroes using the Character Content Type and added some sample content, it's time to create a detail page to display them on our website. The HTML file for the superhero detail page is provided below. Using Contentstack's Content Delivery API and Next.js, we can create the code to render this page on our website.<h2>Programming the Character Detail Page</h2>1. Create a new NextJS Component for the detail page in a folder 'composable-heroes' and using the name [post].tsx2.&nbsp; Analyze the code for the Detail page and notice how we render text fields, reference fields and group fields.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/composable-heroes/%5Bpost%5D.tsx">The code is available on Github here.</a>3.&nbsp; Examine&nbsp;the Helper/index.js file and <a href="https://github.com/contentstack/contentstack-academy-playground/blob/89452b765dac23970f24ece7412beefc62bb18ec/helper/index.js#L106">review the code for getting a Single Entry (Character Content Type)</a>.&nbsp; This function will use the existing method ‘GetEntryByUrl in the /contentstack-sdk/index.js file to query for the Entry content.&nbsp;<img asset_uid="bltfe79f5ee8485bddd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfe79f5ee8485bddd/67dc6adbc566ee159b5df64c/CSforDev_L16_ExamineHelper.png" alt="CSforDev_L16_ExamineHelper.png" height="auto"/><a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/">Content Delivery JS SDK API Ref</a> <a href="https://gist.github.com/robertcurlette-cs/066c818c09c752426056eee7e9fa541c">Examples using the Content Delivery JS SDK in a NextJS Service</a>&nbsp; 4.&nbsp; Call the Character Query function from the NextJS <a href="https://github.com/contentstack/contentstack-academy-playground/blob/89452b765dac23970f24ece7412beefc62bb18ec/pages/composable-heroes/%5Bpost%5D.tsx#L62">composable-heroes/[post].tsx file</a><img asset_uid="blt5330eb37dbb29171" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5330eb37dbb29171/67dc6adbdb243f203c12b94c/CSforDev_L16_CharacterQuery.png" alt="CSforDev_L16_CharacterQuery.png" height="auto"/> <h2><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/composable-heroes/%5Bpost%5D.tsx">Code Solution for Composable Hero Detail Page on Github</a></h2> <h2>Field rendering syntax:</h2>Text fields - Rendering the title field{postData?.title}Group fields{postData?.contact_info?.email ?Email : {postData?.contact_info?.email}Images<img asset_uid="bltbe51c92c1ac561c8" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbe51c92c1ac561c8/67dc6adbc5b83e51fa924181/CSforDev_L16_RenderImage.png" alt="CSforDev_L16_RenderImage.png" height="auto"/> Reference Field<img asset_uid="blta737586dbcea3b4a" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta737586dbcea3b4a/67dc6adb983a658c2e3b71db/CSforDev_L16_RenderField.png" alt="CSforDev_L16_RenderField.png" height="auto"/> 6.&nbsp; Confirm your code with the Composable Detail Page solutionFinal Result - Composable Hero&nbsp;Detail Page<img asset_uid="blt9e10f8c799a48670" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9e10f8c799a48670/67dc6adc5e486d1eed71aaa3/CSforDev_L16_FinalResult.png" alt="CSforDev_L16_FinalResult.png" height="auto"/>

Creating the Hero Detail Page

<h2>The Composable Hero&nbsp;Landing Page</h2>Welcome to this tutorial on creating a superhero gallery page using reference fields in NextJS! In this module, we'll walk you through the steps of creating a new content type called "Superhero Gallery Page" and adding heroes to it manually.&nbsp;We'll start by showing you how to utilize reference fields to display hero content on the landing page with their images and names. This technique is commonly used in product promotions and article index pages, so it's a valuable skill to learn.&nbsp;Next, we'll guide you through the process of creating a new NextJS component and query to retrieve the Landing Page Entry and Reference field Hero Entries. Our NextJS component will loop through all the heroes in the reference field and display their titles, images, and links to their respective detail pages.Finally, we'll demonstrate how to create a new Landing Page Entry and publish it to the Development environment to see the results of our work.By the end of this tutorial, you'll have gained valuable knowledge on how to utilize reference fields in NextJS to create reusable content and enhance the user experience on your website. Let's get started!<img asset_uid="blt36760c2226f23188" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt36760c2226f23188/67dc74d1443bd6f8bef1c126/CSforDev_L17_ComposableHeroes.png" alt="CSforDev_L17_ComposableHeroes.png" height="auto"/><h2>Hero Gallery&nbsp;Page Content Type</h2><img asset_uid="bltca3a395e8b43a268" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltca3a395e8b43a268/67dc74d25e486ddf7571ab5f/CSforDev_L17-HeroGalleryPageContentType.png" alt="CSforDev_L17-HeroGalleryPageContentType.png" height="auto"/><h2></h2><h4>Open the Superhero Gallery Page and examine the properties of each field</h4><img asset_uid="blt5d634d5af8ed1ef2" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5d634d5af8ed1ef2/67dc74d120a3dc7d26f81da5/CSforDev_L17-SuperHeroGalleryPage.png" alt="CSforDev_L17-SuperHeroGalleryPage.png" height="auto"/>Review the following fields below:<ul><li>Title - Default Title field</li><li>URL - /gallery/:title</li><li>Heading - Text field</li><li>Description - Multi-line text</li><li>Characters - Reference field to the Character Content Type</li></ul><h2>Part 2: Writing the code to display the list of heroes</h2>Let's list all the heroes in the reference field on the Gallery&nbsp;page.&nbsp; Users can manually create a list of heroes and our code will loop over all the heroes in the reference field and render the name, image, and link.&nbsp; <h3>Rendering a list of Characters from a Reference Field</h3> 1.&nbsp;&nbsp;Create a NextJS Component for the Gallery page and loop through all the heroes in the reference field, rendering&nbsp;the title, image and a link to the detail page.&nbsp; This involves 2 steps, first writing the query function and then rendering the results. 2.&nbsp; Querying Contentstack for the Characters in the Reference Field <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/helper/index.js">In the /helpers/index.js file</a>, review the function to get a list of heroes from the reference field 3.&nbsp; <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/composable-heroes/index.tsx">Review the code for the /composable-heroes/index.tsx file</a>.&nbsp;&nbsp; 4.&nbsp; Review the Composable Heroes Gallery Entry<img asset_uid="blta1719b3c553d3aa7" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta1719b3c553d3aa7/67dc74d28fee9af26547d6d2/CSforDev_L17-ReviewComposableHeroesGalleryEntry.png" alt="CSforDev_L17-ReviewComposableHeroesGalleryEntry.png" height="auto"/> 5.&nbsp; From the NextJS application, open the Composable Heroes Gallery Page<img asset_uid="blt987109e80668c33d" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt987109e80668c33d/67dc74d2c566ee77065df700/CSforDev_L17-NextJSappOpenComposableHeroes.png" alt="CSforDev_L17-NextJSappOpenComposableHeroes.png" height="auto"/> 2. Introduction to using the Query functions of the Content Delivery APIContentstack provides certain queries that you can use to fetch filtered results. You can use queries for Entries and Assets API requests.&nbsp; Please review the <a href="https://www.contentstack.com/docs/developers/apis/content-delivery-api/#queries">Content Delivery Query API documentation</a> and examine the RegEx, Limit and Only functions.For the first part of the exercise, we can use a simple query to find all the entries with the Content Type of Character.&nbsp;&nbsp;<h3>Postman</h3>1.&nbsp; Open Postman and select the Entries/Get Entries call Update the parameters / variables so that:<ul><li>content_type_uid = character</li><li>environment = development </li></ul><img asset_uid="bltfc54a08558f3257d" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfc54a08558f3257d/67dc74d20c6f5573391fc550/CSforDev_L17-Postman1.png" alt="CSforDev_L17-Postman1.png" height="auto"/>You should now have a list of the characters published to the development environment.&nbsp; In the next section, we will use the JavaScript SDK to get the same list and pass it to the NextJS App to render. 3. Query using Javascript SDKIn our web application we will mostly use the <a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/">Javascript Content Delivery SDK</a>.&nbsp; Please have a look at the <a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/#query">documentation for the query methods</a>.Other SDKs can be found on the <a href="https://www.contentstack.com/docs/developers/sdks/">SDKs documentation page</a><pre>import Contentstack from 'contentstack'; const Stack = Contentstack.Stack({"api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment"}); const result = await Stack.ContentType('character').Query().toJSON().find();</pre><a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference/#stack-query">More information about this is found in the Javascript SDK Docs</a><h2>Composable Hero Landing Page</h2>The Composable Hero Landing Page uses <a href="https://www.contentstack.com/docs/developers/create-content-types/modular-blocks/">Modular Blocks</a> to provide a flexible structure for authors to create content and add as many content blocks to the page as they wish and also to re-order the blocks.&nbsp;&nbsp;<img asset_uid="blt20cf9dbe38b2ce7a" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt20cf9dbe38b2ce7a/67dc74d2dd73e3150dbf2aca/CSforDev_L17-ComposableLandingPage.png" alt="CSforDev_L17-ComposableLandingPage.png" height="auto"/> <h2>Open the Superhero Landing Page Entry and review the content</h2><img asset_uid="bltbd496f6c2aa7c3fb" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbd496f6c2aa7c3fb/67dc74d1632b938d87d497f4/CSforDev_L17-OpenSyperheroLandingPage.png" alt="CSforDev_L17-OpenSyperheroLandingPage.png" height="auto"/><h2> </h2><h2>Open the Content Type Definition and examine how the Modular Blocks field is used.&nbsp;</h2>Notice the fields are greyed out - that is because the Modular Block fields are defined using Global Fields.&nbsp; This is a best practice.<img asset_uid="bltcb805c91070decc1" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcb805c91070decc1/67dc74d18fee9a015647d6ce/CSforDev_L17-OpenContentTypeDefinition.png" alt="CSforDev_L17-OpenContentTypeDefinition.png" height="auto"/><h2>Global Field Definitions</h2><img asset_uid="blt133ae7c39bec81dd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt133ae7c39bec81dd/67dc74d1782bfb40816f4d07/CSforDev_L17-GlobalFieldDefinitions.png" alt="CSforDev_L17-GlobalFieldDefinitions.png" height="auto"/><h2> </h2><h2>Examine the Code used for the Hero Landing Page</h2>The <a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/pages/gallery.tsx">code for the Gallery Entry (Page)</a>&nbsp;loops through all the Modular Blocks on the page and renders each one with its' own NextJS Component. <img asset_uid="blt32ad6ea1b6068a60" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt32ad6ea1b6068a60/67dc74d16f68587885fd9e35/CSforDev_L17-CodeForGalleryEntry.png" alt="CSforDev_L17-CodeForGalleryEntry.png" height="auto"/><h2>Each block is rendered with its own NextJS Component</h2><ul><li><div><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/gallery.tsx">Gallery Block</a><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/gallery.tsx"> </a><img asset_uid="blt6997b78ab65f5110" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6997b78ab65f5110/67dc74d1bbf93ef9c3586444/CSforDev_L17-BlockRenderwithNextJScomp.png" alt="CSforDev_L17-BlockRenderwithNextJScomp.png" height="auto"/><div></div></div> </li><li><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/hero-banner.tsx">Hero Banner Block</a><div><img asset_uid="blt57deb882be0262c1" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt57deb882be0262c1/67dc74d1db243fda9112b9df/CSforDev_L17-HeroBannerBlock.png" alt="CSforDev_L17-HeroBannerBlock.png" height="auto"/><a href="https://github.com/contentstack/contentstack-academy-playground/blob/main/components/hero-banner.tsx"> </a><div></div></div></li></ul>By adopting this approach, we can isolate the HTML/Code for each block within a single NextJS Component. This simplifies maintenance and enables easy extension of the page in the future by adding a Modular Block and NextJS Component for additional content block types.&nbsp;With this method, you can modify the individual content blocks without having to make changes to the entire page structure. This approach makes the codebase more organized and easier to manage, especially when dealing with complex web applications.&nbsp;By leveraging this technique, you can increase the scalability and modularity of your website, allowing you to add new features and functionalities with ease.

Creating the Hero Gallery Page

<h3>Using Modular Blocks - Advantages</h3>There are several advantages to using Contentstack's modular blocks when designing content types. Here are some of the key advantages:1. Flexibility for marketers: Modular blocks allow marketers to easily create and customize content without requiring technical expertise. With modular blocks, marketers can easily use pre-designed content blocks to create engaging content without having to worry about formatting or layout.2. Reusability: With Global Fields, Modular blocks can be reused across different content types and pages, which can help to save time and effort when creating new content.3. Consistency: Modular blocks ensure consistency in content formatting and layout, which can help to improve the overall user experience.4. Granular control: Modular blocks provide developers with granular control over content structure and formatting, which can help to ensure that content is properly organized and optimized for SEO.5. Easy maintenance: With modular blocks, it is easy to update and maintain content without having to modify the entire content type or page.7. Future-proofing: Modular blocks provide a future-proof solution for content design, as they can be easily updated and modified to meet changing business needs.<h2>Example:&nbsp; Using Modular Blocks in the&nbsp; Starter App</h2>In the Starter App, the Page Content Type uses Modular Blocks to define the various sections of the page.&nbsp; In this example below, notice how each block or module on the page is a Modular Block.&nbsp; In this example we have 3 Modular Blocks.<img asset_uid="blt163b2eba984ba5dd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt163b2eba984ba5dd/67dc77d9dd73e3394ebf2b15/CSforDev_L18-ExampleModularBlocks.png" alt="CSforDev_L18-ExampleModularBlocks.png" height="auto"/> These Blocks are used in the Page Content Type.<img asset_uid="bltc596ad6019f6b557" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc596ad6019f6b557/67dc77d9c5b83e1789924263/CSforDev_L18-BlocksUsedInPageComponent.png" alt="CSforDev_L18-BlocksUsedInPageComponent.png" height="auto"/> <h2>Using Global Fields for Defining Re-Usable Content Structures</h2>Global Fields in Contentstack promote the re-use of content structures across content types.&nbsp; They allow us to define a schema of fields and then reference that definition from another content type or modular block.In the StarterApp website, the SEO fields are defined as Global Fields. This makes it easy to manage the SEO fields from one location and re-use the definition across all content types.<img asset_uid="bltbfba1754f824d5ea" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbfba1754f824d5ea/67dc77d96f6858cde5fd9e68/CSforDev_L18-GlobalFields_3.png" alt="CSforDev_L18-GlobalFields_3.png" height="auto"/><img asset_uid="blt868c68695563b3bd" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt868c68695563b3bd/67dc77d9a6d88e2e87052b51/CSforDev_L18-SEO_4.png" alt="CSforDev_L18-SEO_4.png" height="auto"/> <h2>Using Global Fields for Modular Blocks</h2>Global fields can&nbsp; also be used to define field sets for Modular Blocks. This is a great way to re-use structure.&nbsp; Note, it is currently not possible to nest a Global Field inside another Global Field, so take that into consideration when designing your content types.<h2>Resources</h2><ul><li><a href="https://www.contentstack.com/docs/developers/create-content-types/modular-blocks/">Modular Blocks</a></li><li><a href="https://www.contentstack.com/docs/developers/global-field/">Global Fields</a></li><li><a href="https://www.contentstack.com/docs/developers/global-field/limitations-of-global-field/">Limitations of Global Fields</a></li><li><a href="https://www.contentstack.com/docs/developers/content-modeling/content-modeling-best-practices/">Content Modeling Best Practices</a></li></ul>

Design Patterns with Content Types

With Contentstack's launch product, developers can focus on building and updating their applications while leaving the hosting infrastructure to Contentstack.To assist users with the various functionalities of this product, Contentstack offers a <a href="https://www.contentstack.com/docs/developers/launch/">comprehensive help center</a> on its website. The help center includes detailed guides and tutorials on <a href="https://www.contentstack.com/docs/developers/launch/import-project-using-github/">creating projects</a>, <a href="https://www.contentstack.com/docs/developers/launch/deploy-hooks/">setting up deploy hooks</a>, and <a href="https://www.contentstack.com/docs/developers/launch/redeploy-automatically-when-content-is-published-on-CMS/">redeploying applications</a> when content is published. Additionally, the website provides a robust community forum where users can interact with other users, share their experiences, and get support from the Contentstack team.<ul><li>Host&nbsp;your website or web app directly from Contentstack, leveraging our high-speed CDN and proven infrastructure.</li><li>Link&nbsp;your Contentstack Stacks and front-end environments without copying and pasting API keys.</li><li>Leverage&nbsp;the only front-end site hosting solution that’s built explicitly for the Contentstack CMS.</li></ul><h2>Framework agnostic</h2>Build projects in virtually any common Javascript front-end framework, easily connect to and deploy code directly from a git repository.<ul><li>Automatic&nbsp;configuration for Nextjs and Gatsby, with more frameworks on the way</li><li>Use&nbsp;virtually any composable Javascript front-end framework with custom build commands.</li><li>Upload&nbsp;static site files via Zip for instant deployment for projects that don’t use git.</li><li>Support&nbsp;for Edge functions and more&nbsp;coming soon!</li></ul><h1>Exercise: Deploy the site with Contentstack Launch</h1>1.&nbsp; Open Launch <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt59869ec9f872a769/67dc7979632b93a52ad4983e/CSforDev_L19-img_1.png" alt="CSforDev_L19-img_1.png" height="auto"/>2.&nbsp; New Project 3.&nbsp; Upload File<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt803195694348711a/67dc79af983a650b893b72f7/CSforDev_L19-img_2.png" alt="CSforDev_L19-img_2.png" height="auto"/> 4. Upload the StarterApp project.&nbsp; In this example, we will use the NextJS Starter App.&nbsp; Download the code from the Github repository here:&nbsp;<a href="https://github.com/contentstack/contentstack-nextjs-starter-app">https://github.com/contentstack/contentstack-nextjs-starter-app</a> 5.&nbsp; Select your Stack with the Starter App and then Import Environment Variables<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt91248dc45e8c64c4/67dc79e5314d6788311b6674/CSforDev_L19-img_3.png" alt="CSforDev_L19-img_3.png" height="auto"/>6.&nbsp; Site is being deployed.&nbsp; This takes up to 5 minutes.&nbsp; The URL will be a Contentstack URL with the free trial, however, with a paid plan you will be able to use custom domains.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9de2eeb19d27402b/67dc7a13dd73e3fed6bf2b3b/CSforDev_L19-img_4.png" alt="CSforDev_L19-img_4.png" height="auto"/> 7.&nbsp; Site is deployed <h3>Learn More About Launch</h3><ul><li><a href="https://www.contentstack.com/docs/developers/launch/">Developer Documentation</a></li><li><a href="https://community.contentstack.com/search?q=Launch&search_type=tag">Community Forum</a></li><li><a href="https://www.contentstack.com/docs/developers/launch/quick-start-nextjs/">Guide for Deploying the StarterApp with Launch</a></li></ul>

Deploying the Starter App with Contentstack Launch

<h2>Introduction to the Content Management API</h2>Our Content Management API (CMA) is a powerful tool that provides a read/write API with a REST interface, as well as SDKs for JavaScript, .NET, and Java. To authenticate with the CMA, we use Tokens. In this exercise, we'll guide you through how to use the CMA with Postman, a popular tool that helps developers use APIs.Let's get started with the exercise. We'll be using Postman, so first, make sure to download the latest Contentstack Postman collection from here: <a href="https://www.contentstack.com/docs/developers/apis/content-management-api/#install-postman">https://www.contentstack.com/docs/developers/apis/content-management-api/#install-postman</a>Also, download and use the Postman Environment Files from Github here: <a href="https://github.com/contentstack/contentstack-postman-collections#environment-files">https://github.com/contentstack/contentstack-postman-collections#environment-files</a><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf68a0bfc44851c8f/67dc7a8d5e486d622a71ac32/CSforDev_L20-img-1.png" alt="CSforDev_L20-img-1.png" height="auto"/> The next step is to create a Management Token to use in our Postman query. To do this, go to Settings in the Contentstack UI, then Tokens, Content Management, and create a Management Token. You can follow this guide for more detailed instructions: <a href="https://www.contentstack.com/docs/developers/create-tokens/generate-a-management-token/">https://www.contentstack.com/docs/developers/create-tokens/generate-a-management-token/</a><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc549d1dc354f62fb/67dc7aab983a655a2b3b7306/CSforDev_L20-img-2.png" alt="CSforDev_L20-img-2.png" height="auto"/> Now, open Postman and add the Content Management API Postman Collection. Select Content Management API - Contentstack, Entries, Get a single entry, and you're ready to go!In Postman, select Content Management API -&nbsp;Contentstack, Entries, Get a single entry Update the API Key and Access TokenThere are two ways to set the values, using Postman variables like above or hard-coding the values in the Value column. &nbsp;I prefer to use the Environment variables. <a href="https://github.com/contentstack/contentstack-postman-collections#environment-files">https://github.com/contentstack/contentstack-postman-collections#environment-files</a>1.&nbsp; Set the Environment variable values for your Stack in Postman by selecting the icon in the top-right of Postman to open the Environment variable window.Specify the following header values: - api_key - This is located in the Settings, Tokens, Management Token page. &nbsp;You can also see it in the URL of the browser, after the /stack/ part of the URL, http://app.contentstack.com/#!/stack/{api_key}- management_token - Management token created in step 12.&nbsp; Use the ‘Get a single entry’’ method and add the base_url, content_type_uid (character) and entry uid to the query. &nbsp;This will retrieve the JSON for the Entry using the backend CMA. &nbsp;*Note, we do not use this API for our frontend website applications as it is not intended for high load / performance. &nbsp;Instead, the frontend web applications use the Content Delivery API which is tuned for high performance.3.&nbsp; Run the query and see the JSON result. Notice that we have Create / Read / Update / Delete operations for most types. Using the JSON returned from the Get Entry method, we will create new JSON to use for the Create Entry method in the next exercise. &nbsp; Learn More: Key Features of Management Tokens: <a href="https://www.contentstack.com/docs/developers/create-tokens/key-features/">https://www.contentstack.com/docs/developers/create-tokens/key-features/</a><h2>Creating content with the API:&nbsp; Using the Content Management API</h2><h3>Exercise: &nbsp;Create an entry with the Postman API</h3>In this exercise, we'll guide you through creating a new Entry in Contentstack programmatically using our Content Management API. This method is incredibly useful for quickly migrating content from external systems and avoiding manual entry.The trickiest part of this process is creating well-formed JSON that contains all the properties and content for the Entry. But don't worry - we've got you covered. In the previous exercise, we used our CMA to retrieve the Entry JSON, and now we'll use a subset of that JSON to create our new Entry.If you weren't able to retrieve the JSON Entry export in the previous exercise, we've included a sample below. Just make sure to update the UID of the Content Type for it to work.To get started, let's create the Entry JSON required to make a new Entry. Below is an example JSON, but remember to replace the Content Type UID:<pre>{
 "title": "New Entry Title",
 "url": "/new-entry-url",
 "description": "This is a new Entry created programmatically using the Content Management API.",
 "content_type_uid": "your-content-type-uid",
 "metadata": {
 "tags": ["tag1", "tag2"],
 "author": "John Doe"
 },
 "body": "</pre><pre>This is the body of the new Entry.</pre><pre>" }</pre>Now, in Postman, open the ‘Create an entry’ method and in the body tab, paste the JSON of the new Entry. Please note that the Title property of the Entry needs to be unique.As we used Postman variables in the previous exercise, you won't need to add any additional settings here, since the api_key and management token are already specified.Finally, hit the Send button in Postman to create your new Entry. Head over to the Contentstack UI to confirm that it has been created successfully.<h2>Exporting Content from Contentstack</h2>Contentstack stores all text content in JSON format.&nbsp; This makes it very easy to import / export and update content using the Content Management API or the CLI.&nbsp; In this section we will discuss the three ways to export content from Contentstack:&nbsp; UI, CM API, and the CLI.<h2>Exporting with the UI</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3031a286be14c33e/67dc7af4a71458f9d3b9ac8d/CSforDev_L20-img-3.png" alt="CSforDev_L20-img-3.png" height="auto"/><h2> </h2><h2><a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">Exporting with Postman</a></h2><img asset_uid="bltf85b2c24d02d5273" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf85b2c24d02d5273/67dc7b2437e25afefd1e3cac/CSforDev_L20-img-4.png" alt="CSforDev_L20-img-4.png" height="auto"/><h2> </h2><h2><a href="https://www.contentstack.com/docs/developers/cli/export-content-using-the-cli/">Exporting with the CLI</a></h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdf993e1837922ae0/67dc7b8ec566ee36ce5df792/CSforDev_L20-img-5.png" alt="CSforDev_L20-img-5.png" height="auto"/> <h2>Exporting Content from Contentstack</h2>Contentstack stores all text content in JSON format.&nbsp; This makes it very easy to import / export and update content using the Content Management API or the CLI.&nbsp; In this section we will discuss the three ways to export content from Contentstack:&nbsp; UI, CM API, and the CLI.<h4>Exporting with the UI</h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt125b7f4295bb35a9/67dc7bbd632b932162d49860/CSforDev_L20-img-6.png" alt="CSforDev_L20-img-6.png" height="auto"/><h2></h2><h4><a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">Exporting with Postman</a></h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1b91f0972f174299/67dc7be7a714580b08b9ac9c/CSforDev_L20-img-7.png" alt="CSforDev_L20-img-7.png" height="auto"/><h2> </h2><h4><a href="https://www.contentstack.com/docs/developers/cli/export-content-using-the-cli/">Exporting with the CLI</a></h4><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt029257333658a4ea/67dc7c0d2d0b98a5affcfe07/CSforDev_L20-img-8.png" alt="CSforDev_L20-img-8.png" height="auto"/>

Importing Content with the CLI and CMA

<h2>Roles</h2>Contentstack has a robust roles and permissions system with built-in roles such as 'Admin', 'Developer', and 'Content Manager' and the ability to create custom roles for authors and editors.&nbsp; In this module we will look briefly at the roles and permissions system in Contentstack.Built-in RolesAdmin:&nbsp;Admin has full access to all features and functions within Contentstack, including the ability to create, edit, and delete content, manage users and roles, and configure the system settings. Super Admins have the highest level of privileges and can perform any action within the platform.Content Manager: The Content Manager has the ability to create, edit, and delete content, as well as manage users and roles. However, they do not have access to the system settings or the ability to perform advanced tasks such as configuring webhooks or integrations.Developer: The Developer role is designed for users who need to access the Contentstack API and develop custom solutions using the platform. Developers have the ability to create and manage content types, as well as access the API documentation and sample code. However, they do not have the ability to manage users and roles. Custom RolesIn Contentstack, custom roles allow users to define and customize the level of access and permissions for specific users or groups of users. This provides greater flexibility and control over how content is managed and published within the system.To create a custom role, a Super Admin or a user with the "Manage Roles" permission can navigate to the Roles section of the Contentstack dashboard and click on the "Add Role" button. From here, they can give the custom role a name and select the specific permissions that they want to grant to users assigned to that role.The available permissions can be grouped into three categories:<ul><li>Content: permissions related to creating, editing, and publishing content and images</li><li>Publishing: permissions related to publishing content and environments</li><li>Languages: Permissions relating to localization</li></ul>Once the custom role is created, it can be assigned to specific users or groups of users within the system. Users assigned to the custom role will only have access to the permissions and features that are granted to that role, ensuring that they only have access to the specific tasks and content that they are responsible for. This helps to improve security and streamline workflows within the system.<h2>Exercise: Creating a custom role</h2>&nbsp;Here are the steps to create a custom role in Contentstack:1. Log in to your Contentstack account and navigate to the “Settings / Users &amp; Roles / Roles” section of the dashboard.2. Click on the “New Role” button to create a new custom role.3. In the “Role Details” section, enter a name for your custom role.4. Next, choose the permissions you want to grant to this role by selecting the options for each permission category (Content, Assets, Languages and Environments).5. Under each permission category, you can select or deselect specific permissions that you want to include or exclude for this role.7. Once you have selected the permissions you want to grant to the custom role, click the “Save” button to save the role.8. To assign users to the custom role, navigate to the “Users” section of the dashboard and select the user(s) you want to assign the role to.9. In the “Update User” dialog box, select the “Roles” tab, and then select the custom role you created from the list of available roles.10. Click the “Save” button to save the changes.That's it! You have now created a custom role in Contentstack and assigned it to specific users within your organization.<h3>Resources</h3><ul><li><a href="https://www.contentstack.com/docs/developers/invite-users-and-assign-roles/examples-to-create-custom-roles/">Examples to create custom roles</a></li></ul><div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/owFEMYhE-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-roles In Contentstack" style="position: absolute;" allowfullscreen=""></iframe></div>

Working with Roles and Permissions

Contentstack's workflow feature is a powerful tool that enables organizations to manage the content creation and publishing process in a streamlined and efficient way. With workflow, content creation and publishing becomes a collaborative process that involves multiple stakeholders, including writers, editors, and approvers.&nbsp;The workflow feature allows you to define a series of states that content can go through, from initial creation to final approval and publishing. Each state represents a stage in the content creation process, and can be assigned to different roles or users. For example, you can set up states such as "Draft", "In Review", "Approved", and "Published".As content moves through the workflow, it can be edited, reviewed, and approved by different users based on their assigned roles. Users can add comments and feedback, and content can be easily tracked and managed throughout the entire process. This ensures that content is thoroughly reviewed and approved before being published, minimizing the risk of errors or inaccuracies.Contentstack's workflow feature also includes notifications and alerts, which keep everyone involved in the process informed of content changes, updates, and approvals. This helps to keep the process moving smoothly and ensures that everyone is on the same page.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt655072dfe47556f8/67dc7c8f17f7b4421c0cf7cd/CSforDev_L22-img-1.png" alt="CSforDev_L22-img-1.png" height="auto"/><h2>Exercise: Creating a Workflow with a Publish Rule</h2>Here's a step-by-step guide on how to use Contentstack's workflow feature to create a publishing rule for production:Step 1: Log in to your Contentstack account and select the stack you want to work with.Step 2: Click on the "Settings" button in the top navigation bar.Step 3: Click on the "Workflows" tab.Step 4: Click on the "New Workflow" button.Step 5: Enter the following: - Name: &nbsp;"Blog Workflow". &nbsp; - Scope (branches): Main. &nbsp; - Specific Content Types: Blog EntryStep 6: Add the states that content will go through before being published. For example, you could add the states "Draft", "In Review", "Approved", and "Published".Step 7: Click on the "Enable Workflow" checkbox and the "Save" button to create the workflow.Step 8: Next, you'll need to create a publishing rule that specifies which content should be published to your production environment. Click on the "Publishing Rules" tab.Step 9: Click on the "New Publishing Rule" button.Step 10: Enter a name for your publishing rule, such as "Publish to Production".Step 11: Under "Content type", select the "Blog Entry" Content TypeStep 12: Under "Language", select "All Languages"Step 13: Under "Environment", select "Production"Step 14: Under "Rule Conditions", you can set up conditions that must be met before the content is published. For example, you could require that the content has the "Approved" state before it can be published.Step 15: Click on the "Save" button to save the publishing rule.Step 16: Now, whenever content is created or updated, it will go through the workflow you created in step 5. If the content meets the conditions you set up in the publishing rule, it will be published to your production environment automatically.Congratulations! You have successfully created a publishing rule for production using Contentstack's workflow feature. This will help you streamline your content creation and publishing process and ensure that only approved content is published to your production environment.<h2>Example: Using Workflow and Webhooks for Automating Translation</h2>In the context of a Contentstack workflow, a webhook trigger can be used to automate the movement of content through the different stages of the workflow or send to an external service such as a translation agency.&nbsp;To set up a webhook trigger to use a workflow stage in Contentstack, you would first need to create a workflow and define the stages that content should go through. Once the workflow is set up, you can create a webhook trigger that is triggered when content is created or updated.In the webhook trigger settings, you can specify the workflow stage that the content should be moved to when the webhook is triggered. For example, you could set up the webhook trigger to move the content from the "Draft" stage to the "In Review" stage when it is created or updated.Once the webhook trigger is set up, it will automatically move the content through the workflow based on the rules that you have defined. This can help to save time and improve efficiency, as content can be automatically routed to the appropriate stage without requiring manual intervention. Step 1: Set up your workflow in Contentstack First, you'll need to set up your workflow in Contentstack to define the stages that content should go through before it is published. For example, you might create stages for "Draft", "In Review", and "Approved".Step 2: Set up a webhook trigger Next, you'll need to set up a webhook trigger that is triggered when content is created or updated. In the webhook trigger settings, you can specify the URL of your 3rd-party translation service, along with any required authentication details.Step 3: Define a workflow stage for translation In your workflow, you can define a new stage specifically for translation. For example, you might create a stage called "Translation" that is between the "In Review" and "Approved" stages.Step 4: Set up a webhook action to send content to the translation service In the workflow stage for translation, you can set up a webhook action that sends the content to the 3rd-party translation service. You can use the webhook trigger that you set up in step 2 to automatically send the content to the translation service when it enters the "Translation" stage.Step 5: Receive and process the translated content Once the content has been sent to the translation service, the service will translate the content into the desired language(s). The translation service can then send the translated content back to Contentstack via another webhook trigger.Step 6: Move the translated content to the next stage in the workflow When the translated content is received by Contentstack, you can set up another webhook action that automatically moves the content to the next stage in the workflow. For example, you might move the content from the "Translation" stage to the "Approved" stage when it is received.Overall, using a Contentstack webhook trigger with workflow to send content to a 3rd-party translation service can help to streamline the translation process and ensure that content is translated efficiently and accurately.&nbsp;<h1>Resources</h1><ul><li><a href="https://www.contentstack.com/docs/developers/set-up-workflows-and-publish-rules/">Workflow Documentation</a></li><li><a href="https://www.contentstack.com/docs/developers/how-to-guides/#translation-services">Translation Integrations</a></li></ul>

Workflow

Contentstack's webhook system is a powerful tool that allows developers to automate the process of receiving real-time notifications of changes made to content within the CMS. A webhook is an HTTP callback that sends a notification to a specified URL whenever a specific event occurs. In the case of Contentstack, the event could be when content is created, updated, deleted, or published.Developers can create webhooks in Contentstack and specify which events should trigger them. When an event occurs, Contentstack sends an HTTP POST request to the specified URL, containing information about the event and the associated content.With this information, developers can automate processes such as updating search indexes, notifying team members of content changes, or triggering other third-party services. Additionally, Contentstack allows developers to set up conditional logic to filter webhooks based on specific criteria, such as content types, allowing for even more granular control over webhook behavior.<h2>Exercise: Using a webhook to call an endpoint on the webhook.site service</h2>Step 1: Go to <a href="https://webhook.site">webhook.site</a> in your web browser.Step 2: Click on the "Create a webhook" button on the top right corner of the webpage.Step 3: In the "Create a new webhook" modal, you'll see a unique webhook URL that you can use to send HTTP requests. Copy this URL to your clipboard.Step 4: Log in to your Contentstack account and go to the Settings section of your stack.Step 5: Click on the "Webhooks" tab.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9928fe7cfbd4a917/67dc7ce545b2290ec4910d8c/CSforDev_L23-img-1.png" alt="CSforDev_L23-img-1.png" height="auto"/> Step 6: Click on the "Add New Webhook" button.Step 7: In the "Create Webhook" modal, enter a name for your webhook, such as "Webhook.site Test". Step 8: In the "URL" field, paste the webhook URL that you copied from webhook.site in step 3.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt40127c0aeeac44ff/67dc7d088fee9a424247d751/CSforDev_L23-img-2.png" alt="CSforDev_L23-img-2.png" height="auto"/>Step 9: Under "Webhook Triggers", select "Publish" as the trigger event.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltaa1169f852f5c558/67dc7d3220a3dc0ca6f81e2c/CSforDev_L23-img-3.png" alt="CSforDev_L23-img-3.png" height="auto"/>Step 10: Click on the "Save" button to save the webhook.Step 11: Now, whenever you publish content in Contentstack, a webhook notification will be sent to the URL you specified in step 8.Step 12: To test the webhook, publish a new piece of content in Contentstack.Step 13: Return to webhook.site and click on the "Inspect" button next to the webhook that you just created. You should see the webhook notification data from Contentstack, including the published content.Congratulations! You have successfully tested a Contentstack webhook using webhook.site. You can now use webhook.site to test your webhook implementations or receive webhook notifications from other services.<h2>Learn More</h2><ul><li><a href="https://www.contentstack.com/docs/developers/set-up-webhooks/">Webhooks Documentation Page</a></li><li><a href="https://community.contentstack.com/search?q=webhooks">Community Forum</a></li></ul>

Webhooks

<h2>Sending HTTP Messages with Automate</h2>
An&nbsp;<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/http-action/">HTTP Action</a>&nbsp;allows us to send an HTTP call when a trigger event occurs. This enables us to send JSON from an&nbsp;entry, asset, or release&nbsp;to any service that accepts an HTTP POST, GET, PUT, DELETE, or PATCH. In this module we will use an&nbsp;HTTP Action connector&nbsp;to send the&nbsp;entry&nbsp;JSON to an external webhook listener. This method can be used to integrate with third-party systems that do not&nbsp;have a pre-built connector but can receive a GET or POST request.
Topics covered:
<ul>
 <li>
 Sending JSON to an external web service
 </li>
 <li>
 Using the website&nbsp;<a href="http://webhook.site/">http://webhook.site</a>&nbsp;to receive to our HTTP message
 </li>
</ul>
Please watch the following video to see an example of sending an HTTP message with&nbsp;automate:

<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/jmJmjKiy-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-course Automation Hub, Connect To 3rd Party Webservice" style="position: absolute;" allowfullscreen=""></iframe></div>

<h3>Exercise:&nbsp;Create a new Automation that sends an HTTP Post request to a 3rd party web service when an entry&nbsp;is published</h3>
1. Create a new Automation using a Contentstack Trigger 2. Add a new action&nbsp;and use the HTTP Connector&nbsp; 3. Go to http://webhook.site and create a new webhook listener 4. In the Configure Action step, specify the URL of the webhook from above

Automate- Using an HTTP Connector to Send Data to a 3rd Party System

The <a href="https://www.contentstack.com/docs/developers/marketplace-platform-guides/">Contentstack Marketplace</a> is a platform for apps and other resources that help you extend the capabilities of our core CMS and customize its functionalities. It is a one-stop resource to discover, browse, and install tools to enhance the Contentstack experience by connecting to various third-party services in a simple installation. The <a href="https://www.contentstack.com/docs/developers/marketplace-apps/">apps</a> and resources on Marketplace are created by Contentstack and our partners.&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1039097ff817657d/67dc7dae037e2bbf2122d11f/CSforDev_L25-img-1.jpg" alt="CSforDev_L25-img-1.jpg" height="auto"/>Contentstack Marketplace is Contentstack’s very own app distribution platform similar to the App Store in Apple, or the Play Store in Android. You can use and install apps from our Marketplace to extend the existing capabilities of your Contentstack web application.Marketplace Apps allow you to extend the capability of our core CMS and customize its functionalities. With these ready-to-use apps, you can integrate your favorite third-party platforms easily and with minimal effort. These pre-built apps are intended to be quickly and easily installed. Apps like this are built to solve a particular problem, help integrate with a specific software, or provide functionality for a user of Contentstack.

What is Contentstack Marketplace?

Contentstack’s App Marketplace for Extensions is a platform where users can find and install pre-built extensions that can enhance the functionality of their Contentstack projects. These extensions are developed by Contentstack partners or third-party developers and are designed to simplify and streamline common development tasks, such as integrating with external systems, automating workflows, and adding new features to the CMS.Here are the key features of Contentstack’s App Marketplace for Extensions:1. Extension Types: The App Marketplace offers a variety of extensions types, including field types, custom widgets, and integrations. Each extension type has a specific purpose and can be used to enhance the functionality of the CMS in different ways. &nbsp;This includes Dashboard widgets, full-page apps, custom fields, sidebar widgets, rich-text field extensions and a new field modifier.2. Categories: The App Marketplace offers extensions across multiple categories, including SEO, localization, analytics, integrations, and more. These categories make it easy for users to find extensions that fit their specific needs.3. <a href="https://www.contentstack.com/docs/developers/developer-hub/get-started-with-building-apps-using-contentstack-app-sdk/">Developer Documentation</a>: Each extension in the App Marketplace comes with detailed documentation, which provides instructions on how to install, configure, and use the extension.4. &nbsp;The Developer Hub allows developers to upload their extensions to Contentstack and test them out. Additionally, developers can create private extensions for their customers and leverage the Developer Hub to make them accessible.5. Submit Your Own Extension: Developers can submit their own extensions to the App Marketplace. Contentstack reviews each extension to ensure that it meets quality standards before making it available in the marketplace. &nbsp;Using the Developer Hub you can createOverall, Contentstack’s App Marketplace for Extensions provides a centralized location for users to find and install extensions that can enhance the functionality of their Contentstack projects. With a wide range of extensions available across multiple categories, users can customize their CMS to fit their specific needs and streamline their workflows.<h2>Exercise:&nbsp;Installing and Using Apps from the Marketplace</h2>In this module we are going to install two apps from the Marketplace that support developers using Contentstack.1.&nbsp; Developer Tools2.&nbsp; Content Type Visualizer<h2>Installing Developer Tools</h2>Developer tools allow the developer to view the Entry JSON before it is published.&nbsp; This is very helpful when building apps and looking for the structure and properties of the content type.1.&nbsp; Go to the <a href="https://app.contentstack.com/#!/marketplace/apps">Marketplace dashboard</a>&nbsp; (<a href="https://eu-app.contentstack.com/#!/marketplace/apps">EU Marketplace Dashboard</a>)2.&nbsp; Select&nbsp;Developer Tools, Install App, and choose the Stack of where to install it <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9215ef5ffe1e57fd/67dc7e04c9b8d437d5d138c1/CSforDev_L26-img-1.png" alt="CSforDev_L26-img-1.png" height="auto"/> <h2>Installing the Content Type Visualizer</h2>The Content Type Visualizer is another developer-friendly extension that shows the relationships between Content Types.&nbsp; It is installed on the Dashboard using the Marketplace.1.&nbsp; Go to the <a href="https://app.contentstack.com/#!/marketplace/apps">Marketplace dashboard</a>&nbsp; (<a href="https://eu-app.contentstack.com/#!/marketplace/apps">EU Marketplace Dashboard</a>)2.&nbsp; Select&nbsp;Content Type Visualizer, Install App, and choose the Stack of where to install it <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta4bd50450165e8bd/67dc7e22f7eccc435b90cf28/CSforDev_L26-img-2.png" alt="CSforDev_L26-img-2.png" height="auto"/><div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/TZemBvJ6-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-marketplace App Install Dev Tools And Content Type Visualizer" style="position: absolute;" allowfullscreen=""></iframe></div>

Using Marketplace Apps

Installing and Configuring the NextJS Starter App&nbsp;About Starter Apps In Contentstack, starter apps are pre-built applications that demonstrate the capabilities of Contentstack&nbsp;and provide a starting point for developers learning about and building web applications.Starter apps are designed to be fully functional, customizable, and extensible, providing developers with a set of best practices and common patterns for building web applications that consume content from Contentstack.Starter apps in Contentstack are available for a variety of programming languages and frameworks, including NextJS, React, Angular, and Vue.js. Each starter app includes a set of pre-built content types, entries, assets, and environments.Using starter apps in Contentstack provides several benefits, including:<ul><li>Rapid prototyping: Starter apps provide a quick way to prototype and test new ideas, allowing developers to create a fully functional application in a fraction of the time it would take to build from scratch. &nbsp;</li><li>Best practices: Starter apps are built using best practices and industry-standard patterns, providing developers with a solid foundation for building scalable, maintainable, and high-performing applications.</li><li>Customization: Starter apps can be fully customized to meet the specific needs of the application being developed, including branding, layout, functionality, and integrations with other systems.</li><li>Extensibility: Starter apps can be extended and allowing developers to add new features and functionality as needed.</li></ul>Overall, starter apps in Contentstack provide a powerful and flexible way for developers to jumpstart their projects, reduce development time and costs, and ensure high-quality, scalable, and maintainable applications.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3b91aaf33b63ed1a/67dc7e92c9b8d475c0d138e0/CSforDev_L27-img-1.png" alt="CSforDev_L27-img-1.png" height="auto"/><h2>Three ways to get started with the StarterApps</h2>When starting to develop with Contentstack, we can install and use an existing NextJS Starter App called Logoipsum and this can be set up in several ways: &nbsp;1.&nbsp; The first approach involves using an <a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps/">automated bootstrap CLI script</a> to generate a new Stack or load content into an existing Stack. This method includes all the default content and downloads the NextJS app. We will be using this option for the course.2.&nbsp; The second approach involves installing a Starter App via the Marketplace. This method is useful when you want to try using Contentstack as an Author or Editor and publish content without accessing the frontend code. However, we will not be using this approach in the course.3.&nbsp; <a href="https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-using-next-js-and-contentstack/#import-content">Manually import the content with the CLI</a> and download the <a href="https://github.com/contentstack/contentstack-nextjs-starter-app">StarterApp from the Github repo</a> and manually configure the application.&nbsp; This does the same thing as step 1, but requires more time.<h2>Install the Starter App</h2><h3>Create the Stack</h3>To get started we will need to create a new Stack in Contentstack for our NextJS Starter app. &nbsp;To create our Starter App using the Contentstack CMS, we need to follow a few steps. Firstly, we need to create a new Stack and then use a CLI command to import the Starter app content and code. It is crucial to ensure that you have an Empty Stack ready for the StarterApp before proceeding. If you have the role of Organization Owner in Contentstack, then the CLI can create the Stack for you automatically using your login credentials.Watch the following video to explain how to install the StarterApp with the CLI<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/IbfbzKwm-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-create A New Nextjs Starter App Via Cli" style="position: absolute;" allowfullscreen=""></iframe></div><h2>What’s inside the Starter App</h2> The Starter app Stack contains all the Content Types, Entries, Assets, Environments, Tokens, and Roles for a full website. &nbsp;The following video will explain the Starter app and where everything is located:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/ZZQuG80V-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-starter App Content Types Walkthrough & Token Explanation Ui Code Nextjs App" style="position: absolute;" allowfullscreen=""></iframe></div><h1>Architecture</h1><h2>Big Picture Architecture Diagram</h2><h3>Backend</h3>The Backend of Contentstack is the CMS with the ability to create and publish content.&nbsp; The focus here is on editor ease-of-use by providing a simple, powerful and flexible UI for content creation and management.&nbsp; In addition to the out of the box functionality, we also provide an ability to extend the interface by creating UI Extensions using our App SDK and connect to 3rd-party applications such as DAM providers, Analytics, E-Commerce platforms and more.<h3> </h3><h3>Frontend</h3>The focus on the frontend is high-performance for your website and web application. APIs and SDKs are provided to the developer for using in their applications to perform read-only queries to the content.&nbsp; The Content Delivery APIs use an internal CDN to cache all queries to the platform which results in higher performance for all your web applications.&nbsp; This is also where we find the Images API for delivering image assets.Watch this video that explains the big picture architecture:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/gu1hi4sL-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-big Picture Architecture" style="position: absolute;" allowfullscreen=""></iframe></div><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt362bd848bfb23a87/67dc7ec73a0f389c0000e144/CSforDev_L27-img-2.png" alt="CSforDev_L27-img-2.png" height="auto"/><h2> </h2><h2>Environments</h2><ul><li>One Stack can publish to multiple Environments. &nbsp;Think of Environments as “publish destinations”.</li><li>Each Environment has one Delivery Token, otherwise known as an Access Token. &nbsp;That token is unique per Environment.</li><li>Each Stack has an API key. &nbsp;There is only 1 API key per Stack and it is unique.</li><li>Most API calls will require both an API token and a Delivery / Access Token. </li></ul>Watch this video to understand how we use Environments in Contentstack:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/xDslMX1l-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Dev-environments" style="position: absolute;" allowfullscreen=""></iframe></div>The following diagram for Environments illustrates these concepts:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbae3b547ac725da5/67dc7ef1986725d043888129/CSforDev_L27-img-3.png" alt="CSforDev_L27-img-3.png" height="auto"/> <h2></h2><h3>Multi-Stack Architecture Diagram </h3><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf4b85119eb371741/67dc7f1cc5de53bfe2d2d9c0/CSforDev_L27-img-4.png" alt="CSforDev_L27-img-4.png" height="auto"/>

Installing the NextJS Starter App with the CLI

<h1></h1>
<ul>
 <li>
 <a href="https://community.contentstack.com">Contentstack Community</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/">Developer Documentation Portal</a>
 </li>
</ul>
<h2>Helpful Documentation Links</h2>
<h3>APIs</h3>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/developers/apis/">APIs Homepage</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/apis/postman-collections/">Postman Collections for APIs</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/cli/">CLI</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/get-started-with-javascript-utils-library/">JavaScript RTE&nbsp;Parsing Utils</a>
 </li>
 <li>
 <a href="https://github.com/contentstack/json-rte-serializer/">JSON RTE Serializer - Github</a>
 </li>
</ul>
<h3>Sample Apps / Examples</h3>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/developers/sample-apps/">Sample Apps</a>
 </li>
 <li>
 <a href="https://github.com/Contentstack-Solutions/contentstack-nextjs-typescript-base/blob/main/lib/services/contentstack-service.ts">Contentstack Typescript Query / API Service</a>
 </li>
 <li>
 
 <a href="https://github.com/Contentstack-Solutions/contentstack-nextjs-typescript-base/blob/main/lib/services/contentstack-service.ts">https://github.com/Contentstack-Solutions/contentstack-nextjs-typescript-base/blob/main/lib/services/contentstack-service.ts</a>
 
 </li>
 <li>
 <a href="https://github.com/Contentstack-Solutions">Contentstack Solutions Github Repo</a>
 </li>
</ul>
<h3>Live Preview</h3>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/content-managers/author-content/live-preview-real-world-scenarios/">Live Preview Real-world scenarios</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/set-up-live-preview/how-live-preview-works-with-sdk/">How Live Preview Works with the SDK</a>
 </li>
 <li>
 <a href="https://www.contentstack.com/docs/developers/set-up-live-preview/">Set up Live Preview&nbsp;</a>
 </li>
</ul>
<ul></ul>

Helpful Resources

Contentstack for Developers Quiz

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/training-instance" 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.

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. 

Contentstack for Developers

Contentstack For Developers Course Thumbnail

[TEST ON DEV (LP)] Contentstack for Developers

This video walks through how Red Panda Resort uses Contentstack with Data and Insights, 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

Omni-channel Personalization Demo

Omni-channel Personalization_Thumbnail.jpg

[TEST ON DEV (LP)] Omni-Channel Personalization Demo

[DEV TESTING] Generative AI

WEBVTT

1
00:00:00.000 --> 00:00:08.000
We looked at a couple different areas of AI, but the one that's gotten the most attention,

2
00:00:08.000 --> 00:00:12.260
and frankly is the most mainstream, is generative AI.

3
00:00:12.260 --> 00:00:14.880
And generative AI comes in many forms.

4
00:00:14.880 --> 00:00:19.840
Some applications generate written text, and you've probably used some of these tools,

5
00:00:19.840 --> 00:00:26.460
like Chats GPT, Google's Gemini, or Anthropic Cloud, while others are great for producing

6
00:00:26.460 --> 00:00:31.120
new images, like Midjourney, Dolly, and Stable Diffusion.

7
00:00:31.120 --> 00:00:36.460
Then there's others that are great for generating programming code, like GitHub Copilot.

8
00:00:36.460 --> 00:00:41.200
Then there's applications that will generate video or music tracks.

9
00:00:41.200 --> 00:00:46.620
Generative AI covers a broad spectrum of software tools and platforms, and the list seems to

10
00:00:46.620 --> 00:00:48.980
grow daily.

11
00:00:48.980 --> 00:00:53.740
Generative AI capabilities are appearing in tools that you probably already work with,

12
00:00:53.740 --> 00:00:59.020
products from Microsoft and Adobe, services that you might be familiar with, like Grammarly

13
00:00:59.020 --> 00:01:01.060
or even ContentStack.

14
00:01:01.060 --> 00:01:05.400
The key component of generative AI lies in the interaction.

15
00:01:05.400 --> 00:01:10.940
You input commands, typically through a brief prompt detailing your requirements, and the

16
00:01:10.940 --> 00:01:18.800
AI creates entirely new content, hence the word generative, which reflects the AI's ability

17
00:01:18.960 --> 00:01:26.160
to not merely retrieve existing data, but to actually create novel outcomes.

18
00:01:26.160 --> 00:01:31.720
Chatbots leverage something called Large Language Models, or LLMs, similar to the models we

19
00:01:31.720 --> 00:01:33.560
talked about earlier.

20
00:01:33.560 --> 00:01:38.280
They're trained on vast amounts of text data, and they're capable of generating human-like

21
00:01:38.280 --> 00:01:43.680
responses by leveraging deep learning and transformer architectures.

22
00:01:43.680 --> 00:01:48.340
Think of a transformer architecture as a conductor of an orchestra.

23
00:01:48.340 --> 00:01:53.860
The transformer has something called a self-attention mechanism, which allows it to focus on different

24
00:01:53.860 --> 00:02:00.940
sections of the orchestra, or input data, simultaneously, rather than one at a time.

25
00:02:00.940 --> 00:02:07.220
This enables the conductor to understand how each section contributes to the overall performance,

26
00:02:07.220 --> 00:02:12.340
adjusting focus dynamically to highlight or blend certain musical elements.

27
00:02:12.340 --> 00:02:18.700
In transformers, this translates to processing input data in parallel, allowing the model

28
00:02:18.700 --> 00:02:24.660
to assess the relevance of different data elements and grasp complex relationships.

29
00:02:24.660 --> 00:02:29.740
Additionally, there is an encoder and a decoder within the architecture.

30
00:02:29.740 --> 00:02:32.900
It functions in a similar way as a translator.

31
00:02:32.900 --> 00:02:39.220
The encoder absorbs and comprehensively represents the original language, while the decoder interprets

32
00:02:39.220 --> 00:02:45.700
and recreates this into new language, whether it be for a translation, a summarization,

33
00:02:45.700 --> 00:02:47.500
or generating text.

34
00:02:47.500 --> 00:02:51.940
This has proven exceptionally effective for natural language processing, serving as the

35
00:02:51.940 --> 00:02:57.300
foundational structure for most contemporary large language models.

36
00:02:57.300 --> 00:03:04.500
So you might ask, do AI tools that create images, music, or video also use large language

37
00:03:04.500 --> 00:03:06.100
models?

38
00:03:06.100 --> 00:03:11.180
Kind of, but they're referred to as foundation models, as they're multimodal, not just a

39
00:03:11.180 --> 00:03:14.100
tool for working with language.

40
00:03:14.100 --> 00:03:20.700
The underlining mechanism of any generative AI tool remains fairly consistent across different

41
00:03:20.700 --> 00:03:26.540
applications, whether it's creating text, images, code, whatever the case may be.

42
00:03:26.540 --> 00:03:28.060
A quick sidebar.

43
00:03:28.060 --> 00:03:33.660
An important concept to understand when working with any of these generative AI tools is this

44
00:03:33.660 --> 00:03:36.820
idea of a knowledge cutoff date.

45
00:03:36.820 --> 00:03:43.060
Because training these models is so computationally expensive, and it requires an enormous amount

46
00:03:43.060 --> 00:03:49.440
of data, the vendors often set a cutoff date, which is to say they'll stop using data up

47
00:03:49.440 --> 00:03:54.780
until a certain point in time, typically as close as they can get till today.

48
00:03:54.780 --> 00:03:57.180
But it's usually months earlier.

49
00:03:57.180 --> 00:04:03.660
So if you were to ask ChatGPT to summarize an event that occurred in the past few months,

50
00:04:03.660 --> 00:04:09.300
regardless of how significant the event, it might not be able to do it.

51
00:04:09.300 --> 00:04:15.380
To know what the date is of a knowledge cutoff, just ask the chatbot.

52
00:04:15.380 --> 00:04:19.620
Now that we have a general understanding of what's happening in the background with these

53
00:04:19.620 --> 00:04:27.060
AI tools, and we understand some foundational concepts like machine learning, deep learning,

54
00:04:27.060 --> 00:04:32.420
computation models, and LLMs, we can begin to explore how we can get the most out of

55
00:04:32.420 --> 00:04:35.940
these tools, and it often starts with a prompt.



We looked at a couple different areas of AI, but the one that's gotten the most attention, and frankly is the most mainstream, is generative AI. And generative AI comes in many forms. Some applications generate written text, and you've probably used some of these tools, like Chats GPT, Google's Gemini, or Anthropic Cloud, while others are great for producing new images, like Midjourney, Dolly, and Stable Diffusion. Then there's others that are great for generating programming code, like GitHub Copilot. Then there's applications that will generate video or music tracks. Generative AI covers a broad spectrum of software tools and platforms, and the list seems to grow daily. Generative AI capabilities are appearing in tools that you probably already work with, products from Microsoft and Adobe, services that you might be familiar with, like Grammarly or even ContentStack. The key component of generative AI lies in the interaction. You input commands, typically through a brief prompt detailing your requirements, and the AI creates entirely new content, hence the word generative, which reflects the AI's ability to not merely retrieve existing data, but to actually create novel outcomes. Chatbots leverage something called Large Language Models, or LLMs, similar to the models we talked about earlier. They're trained on vast amounts of text data, and they're capable of generating human-like responses by leveraging deep learning and transformer architectures. Think of a transformer architecture as a conductor of an orchestra. The transformer has something called a self-attention mechanism, which allows it to focus on different sections of the orchestra, or input data, simultaneously, rather than one at a time. This enables the conductor to understand how each section contributes to the overall performance, adjusting focus dynamically to highlight or blend certain musical elements. In transformers, this translates to processing input data in parallel, allowing the model to assess the relevance of different data elements and grasp complex relationships. Additionally, there is an encoder and a decoder within the architecture. It functions in a similar way as a translator. The encoder absorbs and comprehensively represents the original language, while the decoder interprets and recreates this into new language, whether it be for a translation, a summarization, or generating text. This has proven exceptionally effective for natural language processing, serving as the foundational structure for most contemporary large language models. So you might ask, do AI tools that create images, music, or video also use large language models? Kind of, but they're referred to as foundation models, as they're multimodal, not just a tool for working with language. The underlining mechanism of any generative AI tool remains fairly consistent across different applications, whether it's creating text, images, code, whatever the case may be. A quick sidebar. An important concept to understand when working with any of these generative AI tools is this idea of a knowledge cutoff date. Because training these models is so computationally expensive, and it requires an enormous amount of data, the vendors often set a cutoff date, which is to say they'll stop using data up until a certain point in time, typically as close as they can get till today. But it's usually months earlier. So if you were to ask ChatGPT to summarize an event that occurred in the past few months, regardless of how significant the event, it might not be able to do it. To know what the date is of a knowledge cutoff, just ask the chatbot. Now that we have a general understanding of what's happening in the background with these AI tools, and we understand some foundational concepts like machine learning, deep learning, computation models, and LLMs, we can begin to explore how we can get the most out of these tools, and it often starts with a prompt.

image_1.svg

Test Lesson

WEBVTT

1
00:00:00.000 --> 00:00:07.880
If you've been in the world of digital design or development, you've undoubtedly have

2
00:00:07.880 --> 00:00:11.400
come across some reference to taxonomies.

3
00:00:11.400 --> 00:00:17.760
And if you haven't, that's okay, but taxonomies are critical to allowing users to effectively

4
00:00:17.760 --> 00:00:20.480
navigate and find content.

5
00:00:20.480 --> 00:00:22.400
And taxonomies aren't anything new.

6
00:00:22.400 --> 00:00:26.880
I have a few books here that are from the 50s, and even these weren't cutting edge

7
00:00:26.880 --> 00:00:27.880
at the time.

8
00:00:27.880 --> 00:00:31.860
A classic example is a biological classification system.

9
00:00:31.860 --> 00:00:36.720
In biology, organisms are grouped based on shared characteristics.

10
00:00:36.720 --> 00:00:42.620
This starts broadly at kingdoms like animals or plants, and then narrows down to species

11
00:00:42.620 --> 00:00:46.080
like humans, which are Homo sapiens.

12
00:00:46.080 --> 00:00:51.760
This hierarchical structure helps scientists make sense of the vast diversity of life and

13
00:00:51.760 --> 00:00:56.440
understand the relationships between different organisms.

14
00:00:56.440 --> 00:00:59.600
Let's look at maybe a more practical example.

15
00:00:59.600 --> 00:01:01.520
Think about a grocery store.

16
00:01:01.520 --> 00:01:08.480
Here, products are organized into categories like produce, dairy, bakery, and so on.

17
00:01:08.480 --> 00:01:14.200
Within each category, there are subcategories like fresh fruits, fresh vegetables, and dried

18
00:01:14.200 --> 00:01:15.200
fruits.

19
00:01:15.200 --> 00:01:21.080
Apples and oranges would fall under the fresh fruits subcategory of the produce category.

20
00:01:21.080 --> 00:01:25.680
This system helps customers find what they need quickly and efficiently.

21
00:01:25.680 --> 00:01:30.400
Apples and oranges are clearly in the fresh fruits section of the produce aisle.

22
00:01:30.400 --> 00:01:37.440
As developers and designers, we need to create digital spaces that are navigable and intuitive,

23
00:01:37.440 --> 00:01:40.160
and that's where taxonomies come in.

24
00:01:40.160 --> 00:01:46.080
A well-structured taxonomy organizes content in a logical hierarchy, much like our grocery

25
00:01:46.080 --> 00:01:47.480
store example.

26
00:01:47.480 --> 00:01:53.160
It helps users find information quickly and enhances the overall user experience.

27
00:01:53.160 --> 00:01:57.400
A good taxonomy for a digital experience can be invaluable.

28
00:01:57.400 --> 00:02:03.320
It improves usability by grouping related content, enhances SEO by clarifying structure

29
00:02:03.320 --> 00:02:08.680
for things like search engines, and even aids in content management on the back end.

30
00:02:08.680 --> 00:02:14.400
Essentially, it's about creating a map that guides the users to the information that they're

31
00:02:14.400 --> 00:02:17.120
looking for with the least amount of friction.

32
00:02:17.120 --> 00:02:20.080
So what does a good taxonomy look like?

33
00:02:20.080 --> 00:02:26.200
It looks like a hierarchical tree-like structure, but be aware it takes expertise.

34
00:02:26.200 --> 00:02:32.240
While a taxonomy can be used in more simplistic circumstances, a system that is too granular

35
00:02:32.240 --> 00:02:34.220
will be overly complicated.

36
00:02:34.220 --> 00:02:39.760
You want a system that is simple enough to easily navigate, granular enough to make meaningful

37
00:02:39.760 --> 00:02:45.360
distinctions, and flexible enough to accommodate future changes in the items needing to be

38
00:02:45.360 --> 00:02:46.760
classified.

39
00:02:46.760 --> 00:02:50.960
This requires ongoing maintenance of the system.

40
00:02:50.960 --> 00:02:54.800
So how do taxonomies work in ContentStack?

41
00:02:54.800 --> 00:02:59.060
Here we're working with Compass Travel, a site for a travel agency.

42
00:02:59.060 --> 00:03:02.040
To create a new taxonomy, choose Settings.

43
00:03:02.040 --> 00:03:05.120
Down towards the bottom, choose Taxonomy.

44
00:03:05.120 --> 00:03:11.400
You can either import a CSV or JSON file of an existing taxonomy, or create a new one

45
00:03:11.400 --> 00:03:14.480
by clicking the New Taxonomy button.

46
00:03:14.480 --> 00:03:18.320
Create a name of the taxonomy and enter a description if you'd like.

47
00:03:18.320 --> 00:03:25.040
I'll name mine Region as it will represent all the regions travelers may want to visit.

48
00:03:25.040 --> 00:03:27.960
Start adding terms by clicking the New Term button.

49
00:03:27.960 --> 00:03:32.800
I'll enter EMEA to represent Europe, the Middle East, and Africa.

50
00:03:32.800 --> 00:03:37.700
I'll add a child term under EMEA by clicking the Add Child Term button.

51
00:03:37.700 --> 00:03:44.220
The term name will be Africa, and I'll continue adding terms for Europe and the Middle East.

52
00:03:44.220 --> 00:03:50.580
Next, I'll add a child term under Africa by clicking the Same Add Term button.

53
00:03:50.580 --> 00:03:53.860
I'll add South Africa.

54
00:03:53.860 --> 00:03:59.500
Notice you can click the information icon in the top right to get details about that

55
00:03:59.500 --> 00:04:05.860
term, including when it was created, modified, and any entries where it was referenced.

56
00:04:06.020 --> 00:04:10.700
Next, we want to associate this taxonomy to a content type.

57
00:04:10.700 --> 00:04:15.940
To do that, we'll navigate to the content models so we can choose the content type.

58
00:04:15.940 --> 00:04:18.500
In this case, I'll select Article.

59
00:04:18.500 --> 00:04:22.840
In the Content Type Builder, scroll to the location where you'd like the taxonomy to

60
00:04:22.840 --> 00:04:26.980
appear and click the plus sign to add a new element.

61
00:04:26.980 --> 00:04:28.640
Choose Taxonomy.

62
00:04:28.640 --> 00:04:30.860
Then click Add Taxonomy.

63
00:04:30.860 --> 00:04:36.960
In the menu, choose your taxonomy, in this case, its region, and then click Apply.

64
00:04:36.960 --> 00:04:42.060
If you want to apply another taxonomy, click the Add Taxonomy button again.

65
00:04:42.060 --> 00:04:44.140
Why would you want more than one taxonomy?

66
00:04:44.140 --> 00:04:49.180
Well, in this example, we have a taxonomy of regions, which contains all the different

67
00:04:49.180 --> 00:04:51.300
regions in the world.

68
00:04:51.300 --> 00:04:56.340
You may want another taxonomy to classify all the different tourist attractions, like

69
00:04:56.340 --> 00:05:01.620
museums, monuments, restaurants, and other local attractions.

70
00:05:01.620 --> 00:05:04.820
When you're finished, click Save and Close.

71
00:05:04.820 --> 00:05:08.300
Let's navigate to the entries to add a new one.

72
00:05:08.300 --> 00:05:13.500
Click the New Entry button and choose the content type you added the taxonomy to, which

73
00:05:13.500 --> 00:05:15.340
in this case is Article.

74
00:05:15.340 --> 00:05:20.540
Obviously, you'd spend time to complete this entry, but importantly, scroll to the

75
00:05:20.540 --> 00:05:26.540
location where you added the taxonomy, and sure enough, you can open your taxonomy to

76
00:05:26.540 --> 00:05:28.980
select a term.

77
00:05:28.980 --> 00:05:34.220
To see taxonomy on the front end, I'm going to use Live Preview for this article about

78
00:05:34.220 --> 00:05:35.220
Buenos Aires.

79
00:05:35.220 --> 00:05:38.700
First, I'll scroll down to the Taxonomies section.

80
00:05:38.700 --> 00:05:44.580
Here, you'll notice I'm using terms from the two taxonomies that I created, the region

81
00:05:44.580 --> 00:05:50.100
taxonomy that we created together and a topics taxonomy I created on my own.

82
00:05:50.340 --> 00:05:55.540
Now, I'll click the Live Preview button, and once it loads, I can scroll down the article

83
00:05:55.540 --> 00:05:59.060
to see the terms associated with the article.

84
00:05:59.060 --> 00:06:04.420
If I decide to add the term Must See Spots from the topics taxonomy, you'll see the

85
00:06:04.420 --> 00:06:07.420
page automatically update.

86
00:06:07.420 --> 00:06:12.880
To sum up, whether it's classifying life forms, organizing grocery aisles, or structuring

87
00:06:12.880 --> 00:06:19.900
content on a website, taxonomies help us make sense of complex sets of information.

88
00:06:19.900 --> 00:06:25.580
As web designers and developers, it's crucial to understand how to work with taxonomies

89
00:06:25.580 --> 00:06:31.340
to create easy-to-use, efficient, and effective web experiences.

90
00:06:31.340 --> 00:06:38.220
Remember, taxonomies are the backbone of any organized system, digital or otherwise.



If you've been in the world of digital design or development, you've undoubtedly have come across some reference to taxonomies. And if you haven't, that's okay, but taxonomies are critical to allowing users to effectively navigate and find content. And taxonomies aren't anything new. I have a few books here that are from the 50s, and even these weren't cutting edge at the time. A classic example is a biological classification system. In biology, organisms are grouped based on shared characteristics. This starts broadly at kingdoms like animals or plants, and then narrows down to species like humans, which are Homo sapiens. This hierarchical structure helps scientists make sense of the vast diversity of life and understand the relationships between different organisms. Let's look at maybe a more practical example. Think about a grocery store. Here, products are organized into categories like produce, dairy, bakery, and so on. Within each category, there are subcategories like fresh fruits, fresh vegetables, and dried fruits. Apples and oranges would fall under the fresh fruits subcategory of the produce category. This system helps customers find what they need quickly and efficiently. Apples and oranges are clearly in the fresh fruits section of the produce aisle. As developers and designers, we need to create digital spaces that are navigable and intuitive, and that's where taxonomies come in. A well-structured taxonomy organizes content in a logical hierarchy, much like our grocery store example. It helps users find information quickly and enhances the overall user experience. A good taxonomy for a digital experience can be invaluable. It improves usability by grouping related content, enhances SEO by clarifying structure for things like search engines, and even aids in content management on the back end. Essentially, it's about creating a map that guides the users to the information that they're looking for with the least amount of friction. So what does a good taxonomy look like? It looks like a hierarchical tree-like structure, but be aware it takes expertise. While a taxonomy can be used in more simplistic circumstances, a system that is too granular will be overly complicated. You want a system that is simple enough to easily navigate, granular enough to make meaningful distinctions, and flexible enough to accommodate future changes in the items needing to be classified. This requires ongoing maintenance of the system. So how do taxonomies work in ContentStack? Here we're working with Compass Travel, a site for a travel agency. To create a new taxonomy, choose Settings. Down towards the bottom, choose Taxonomy. You can either import a CSV or JSON file of an existing taxonomy, or create a new one by clicking the New Taxonomy button. Create a name of the taxonomy and enter a description if you'd like. I'll name mine Region as it will represent all the regions travelers may want to visit. Start adding terms by clicking the New Term button. I'll enter EMEA to represent Europe, the Middle East, and Africa. I'll add a child term under EMEA by clicking the Add Child Term button. The term name will be Africa, and I'll continue adding terms for Europe and the Middle East. Next, I'll add a child term under Africa by clicking the Same Add Term button. I'll add South Africa. Notice you can click the information icon in the top right to get details about that term, including when it was created, modified, and any entries where it was referenced. Next, we want to associate this taxonomy to a content type. To do that, we'll navigate to the content models so we can choose the content type. In this case, I'll select Article. In the Content Type Builder, scroll to the location where you'd like the taxonomy to appear and click the plus sign to add a new element. Choose Taxonomy. Then click Add Taxonomy. In the menu, choose your taxonomy, in this case, its region, and then click Apply. If you want to apply another taxonomy, click the Add Taxonomy button again. Why would you want more than one taxonomy? Well, in this example, we have a taxonomy of regions, which contains all the different regions in the world. You may want another taxonomy to classify all the different tourist attractions, like museums, monuments, restaurants, and other local attractions. When you're finished, click Save and Close. Let's navigate to the entries to add a new one. Click the New Entry button and choose the content type you added the taxonomy to, which in this case is Article. Obviously, you'd spend time to complete this entry, but importantly, scroll to the location where you added the taxonomy, and sure enough, you can open your taxonomy to select a term. To see taxonomy on the front end, I'm going to use Live Preview for this article about Buenos Aires. First, I'll scroll down to the Taxonomies section. Here, you'll notice I'm using terms from the two taxonomies that I created, the region taxonomy that we created together and a topics taxonomy I created on my own. Now, I'll click the Live Preview button, and once it loads, I can scroll down the article to see the terms associated with the article. If I decide to add the term Must See Spots from the topics taxonomy, you'll see the page automatically update. To sum up, whether it's classifying life forms, organizing grocery aisles, or structuring content on a website, taxonomies help us make sense of complex sets of information. As web designers and developers, it's crucial to understand how to work with taxonomies to create easy-to-use, efficient, and effective web experiences. Remember, taxonomies are the backbone of any organized system, digital or otherwise.

Copy of Test Lesson

WEBVTT

1
00:00:00.000 --> 00:00:09.420
AI Assistant can simplify and improve the creation of your content by integrating popular

2
00:00:09.420 --> 00:00:14.480
large language models directly within the Content Stack platform.

3
00:00:14.480 --> 00:00:19.480
This means you don't have to juggle between our platform and separate applications to

4
00:00:19.480 --> 00:00:23.200
leverage advanced AI writing capabilities.

5
00:00:23.200 --> 00:00:28.180
It's like having a clever coworker at your disposal eager to help you elevate your writing

6
00:00:28.180 --> 00:00:30.780
efficiency and quality.

7
00:00:30.780 --> 00:00:37.040
This seamless integration ensures your website has compelling content and conveys your message

8
00:00:37.040 --> 00:00:43.780
distinctly to your audience, all the while keeping your workflow streamlined and efficient.

9
00:00:43.780 --> 00:00:48.440
To get started, we need to install AI Assistant through Marketplace.

10
00:00:48.440 --> 00:00:53.480
To do this, make sure you're at the Organization level within Content Stack.

11
00:00:53.480 --> 00:00:58.960
If you're not sure, just click the Content Stack icon in the top left-hand corner.

12
00:00:58.960 --> 00:01:04.800
Then, once you're at the Organization level, on the left-hand side, you'll notice there's

13
00:01:04.800 --> 00:01:07.280
a Marketplace icon.

14
00:01:07.280 --> 00:01:10.560
Once you click that, Marketplace will load.

15
00:01:10.560 --> 00:01:16.000
And you'll notice there's a Collections section, and here you can choose Apps.

16
00:01:16.000 --> 00:01:21.960
Once you select Apps, apps on the right-hand side will load in tiles, and AI Assistant

17
00:01:21.960 --> 00:01:28.040
should appear in the top row, but if it doesn't, feel free to perform a search with the Search

18
00:01:28.040 --> 00:01:29.640
text field.

19
00:01:29.640 --> 00:01:34.620
When you hover over AI Assistant, you'll notice you get an Install button.

20
00:01:34.620 --> 00:01:38.140
Go ahead and click it to start the installation process.

21
00:01:38.140 --> 00:01:42.440
The first thing that you have to do is you have to select the stack in which you want

22
00:01:42.440 --> 00:01:44.880
to install AI Assistant.

23
00:01:44.880 --> 00:01:47.980
In this case, I want to choose Compass Starter.

24
00:01:47.980 --> 00:01:53.900
I'll go ahead and accept the terms and conditions, and then I'll click Install.

25
00:01:53.900 --> 00:01:58.140
Once you click Install, the Configuration screen will load.

26
00:01:58.140 --> 00:02:01.560
You have two options for the platform configuration.

27
00:02:01.560 --> 00:02:07.680
You can choose Managed by Content Stack, or if you want to use your own credentials to

28
00:02:07.680 --> 00:02:13.580
use your own provider, you can select Custom Credentials and provide that information,

29
00:02:13.580 --> 00:02:18.620
like your API key, what provider you're using, and the API model.

30
00:02:18.620 --> 00:02:22.420
For this example, we're going to choose Managed by Content Stack.

31
00:02:22.420 --> 00:02:29.480
A quick sidebar, when using the Content Stack-powered API key, it's important to know that we maintain

32
00:02:29.480 --> 00:02:36.860
strict privacy standards that follow GDPR guidelines, so you can use AI Assistant with

33
00:02:36.860 --> 00:02:38.580
peace of mind.

34
00:02:38.580 --> 00:02:42.220
Now let's go ahead and click Save and Proceed.

35
00:02:42.220 --> 00:02:45.500
This will bring us to the Advanced Configuration section.

36
00:02:45.500 --> 00:02:50.020
For our purposes in this video, we don't need to configure anything further, so we'll

37
00:02:50.020 --> 00:02:52.040
just click Next.

38
00:02:52.040 --> 00:02:57.800
When you do that, you should get confirmation that the configuration was successful.

39
00:02:57.800 --> 00:03:03.460
Now all you have to do is move down to the bottom right and click the Save button.

40
00:03:03.460 --> 00:03:10.700
Now the configuration has been updated and AI Assistant has been installed on your stack.

41
00:03:10.700 --> 00:03:17.500
To confirm that, click Open Stack, which will in fact open the stack that you installed

42
00:03:17.500 --> 00:03:19.820
AI Assistant to.

43
00:03:19.820 --> 00:03:23.700
So now what we want to do is move over to the Entries section.

44
00:03:23.700 --> 00:03:27.460
On the left-hand side, you can click the Entries button.

45
00:03:27.460 --> 00:03:35.120
Now I have an article that I've been working with called Top Travel Destinations for 2024.

46
00:03:35.120 --> 00:03:40.380
If I select that to enter the article, I have a couple different options here in terms of

47
00:03:40.380 --> 00:03:44.960
how I can use AI Assistant to improve this article.

48
00:03:44.960 --> 00:03:47.700
First of all, I may want to update the title.

49
00:03:47.700 --> 00:03:50.580
I may want to update it for SEO.

50
00:03:50.580 --> 00:03:55.260
As you hover over the title section, you'll notice there's an AI Assistant icon.

51
00:03:55.260 --> 00:04:01.260
Go ahead and click it, and when you do, AI Assistant will load on the right-hand side.

52
00:04:01.260 --> 00:04:05.220
The section we want to take a look at here is the Replace Field Content, and you'll notice

53
00:04:05.220 --> 00:04:07.300
we have a couple different commands.

54
00:04:07.300 --> 00:04:11.340
The command I want to look at is Optimize Text for SEO.

55
00:04:11.340 --> 00:04:18.580
When you click that, AI Assistant will generate content that is now a more optimized version

56
00:04:18.580 --> 00:04:20.420
of the title.

57
00:04:20.420 --> 00:04:21.420
You have a couple options.

58
00:04:21.420 --> 00:04:24.460
You can try again if you don't like the results.

59
00:04:24.460 --> 00:04:27.660
You can cancel out of it, or you can accept it.

60
00:04:27.660 --> 00:04:31.100
For our purposes, I'm going to go ahead and click Accept.

61
00:04:31.100 --> 00:04:37.100
So that's how you can modify existing content using AI Assistant, but you can also generate

62
00:04:37.100 --> 00:04:40.260
new content using AI Assistant.

63
00:04:40.260 --> 00:04:44.580
If I scroll down, you'll notice that there's a summary, which is empty.

64
00:04:44.580 --> 00:04:50.260
If I want to create a summary, I can do that, but specifically, I want to create a summary

65
00:04:50.260 --> 00:04:54.020
based upon the content I have in this text field.

66
00:04:54.020 --> 00:04:59.720
So again, in the Summary section, as I hover over it, I see the AI Assistant icon.

67
00:04:59.720 --> 00:05:04.540
I can go ahead and click it, and in this case, what I want to do is scroll down towards the

68
00:05:04.540 --> 00:05:10.020
bottom, and what I want to select in this area where we're going to generate based upon

69
00:05:10.020 --> 00:05:12.700
another field is a summary.

70
00:05:12.700 --> 00:05:18.880
So I'll click Summary, and then that panel expands to show me the different fields that

71
00:05:18.880 --> 00:05:24.280
I can use as the source for this summary.

72
00:05:24.280 --> 00:05:30.200
And in this case, you'll notice I have a Content text field, so I'm going to select Content.

73
00:05:30.200 --> 00:05:34.380
When I do, AI Assistant will generate the content.

74
00:05:34.380 --> 00:05:40.400
You can either accept it, you can try again to have AI Assistant regenerate it, and once

75
00:05:40.400 --> 00:05:44.120
you're happy with the results, you can click Accept.

76
00:05:44.120 --> 00:05:50.120
Finally, if we scroll down further, you'll notice that there's a section for some tags.

77
00:05:50.120 --> 00:05:55.380
I'll go ahead and hover over the Tags section to see the AI Assistant icon.

78
00:05:55.380 --> 00:06:03.120
When I click it, again, what I want to do is generate content, in this case, SEO tags.

79
00:06:03.120 --> 00:06:07.020
I want to generate it based upon that same Content text field.

80
00:06:07.020 --> 00:06:12.700
So when I select that option, AI Assistant will generate tags based upon the contents

81
00:06:12.700 --> 00:06:14.820
found within that text field.

82
00:06:14.820 --> 00:06:17.900
Again, I'll go ahead and click Accept.

83
00:06:17.900 --> 00:06:22.500
So you'll notice that there's a lot of capability within this AI Assistant menu.

84
00:06:22.620 --> 00:06:29.180
Again, if I scroll up towards the top, if I click the AI Assistant button for Summary,

85
00:06:29.180 --> 00:06:35.200
I can change this text further by optimizing it for SEO, which we looked at earlier.

86
00:06:35.200 --> 00:06:40.980
We can change the tone to be more persuasive, straightforward, friendly, or professional.

87
00:06:40.980 --> 00:06:44.620
We can also change the length to make it longer or shorter.

88
00:06:44.620 --> 00:06:49.580
And in this case, you also have the option to translate to the current locale language.

89
00:06:49.580 --> 00:06:55.220
Remember, AI Assistant doesn't just work for creating new content, but you can also

90
00:06:55.220 --> 00:06:58.540
modify existing content the same way.

91
00:06:58.540 --> 00:07:04.500
Also know, once you install AI Assistant, it becomes available throughout the entire stack.

92
00:07:04.500 --> 00:07:11.060
AI Assistant in Content Stack is a powerful tool that enhances your creation process.

93
00:07:11.060 --> 00:07:17.500
The world of content creation is ever-evolving, and AI and other technologies are optimizing

94
00:07:17.500 --> 00:07:19.700
the editing experience.

95
00:07:19.700 --> 00:07:24.880
Tools like AI Assistant allow you to stay at the forefront, captivating your audience

96
00:07:24.880 --> 00:07:26.220
with every word.

97
00:07:26.220 --> 00:07:32.540
So go ahead, explore all the possibilities, and let AI Assistant transform the way you

98
00:07:32.540 --> 00:07:36.140
work and create content in Content Stack.



AI Assistant can simplify and improve the creation of your content by integrating popular large language models directly within the Content Stack platform. This means you don't have to juggle between our platform and separate applications to leverage advanced AI writing capabilities. It's like having a clever coworker at your disposal eager to help you elevate your writing efficiency and quality. This seamless integration ensures your website has compelling content and conveys your message distinctly to your audience, all the while keeping your workflow streamlined and efficient. To get started, we need to install AI Assistant through Marketplace. To do this, make sure you're at the Organization level within Content Stack. If you're not sure, just click the Content Stack icon in the top left-hand corner. Then, once you're at the Organization level, on the left-hand side, you'll notice there's a Marketplace icon. Once you click that, Marketplace will load. And you'll notice there's a Collections section, and here you can choose Apps. Once you select Apps, apps on the right-hand side will load in tiles, and AI Assistant should appear in the top row, but if it doesn't, feel free to perform a search with the Search text field. When you hover over AI Assistant, you'll notice you get an Install button. Go ahead and click it to start the installation process. The first thing that you have to do is you have to select the stack in which you want to install AI Assistant. In this case, I want to choose Compass Starter. I'll go ahead and accept the terms and conditions, and then I'll click Install. Once you click Install, the Configuration screen will load. You have two options for the platform configuration. You can choose Managed by Content Stack, or if you want to use your own credentials to use your own provider, you can select Custom Credentials and provide that information, like your API key, what provider you're using, and the API model. For this example, we're going to choose Managed by Content Stack. A quick sidebar, when using the Content Stack-powered API key, it's important to know that we maintain strict privacy standards that follow GDPR guidelines, so you can use AI Assistant with peace of mind. Now let's go ahead and click Save and Proceed. This will bring us to the Advanced Configuration section. For our purposes in this video, we don't need to configure anything further, so we'll just click Next. When you do that, you should get confirmation that the configuration was successful. Now all you have to do is move down to the bottom right and click the Save button. Now the configuration has been updated and AI Assistant has been installed on your stack. To confirm that, click Open Stack, which will in fact open the stack that you installed AI Assistant to. So now what we want to do is move over to the Entries section. On the left-hand side, you can click the Entries button. Now I have an article that I've been working with called Top Travel Destinations for 2024. If I select that to enter the article, I have a couple different options here in terms of how I can use AI Assistant to improve this article. First of all, I may want to update the title. I may want to update it for SEO. As you hover over the title section, you'll notice there's an AI Assistant icon. Go ahead and click it, and when you do, AI Assistant will load on the right-hand side. The section we want to take a look at here is the Replace Field Content, and you'll notice we have a couple different commands. The command I want to look at is Optimize Text for SEO. When you click that, AI Assistant will generate content that is now a more optimized version of the title. You have a couple options. You can try again if you don't like the results. You can cancel out of it, or you can accept it. For our purposes, I'm going to go ahead and click Accept. So that's how you can modify existing content using AI Assistant, but you can also generate new content using AI Assistant. If I scroll down, you'll notice that there's a summary, which is empty. If I want to create a summary, I can do that, but specifically, I want to create a summary based upon the content I have in this text field. So again, in the Summary section, as I hover over it, I see the AI Assistant icon. I can go ahead and click it, and in this case, what I want to do is scroll down towards the bottom, and what I want to select in this area where we're going to generate based upon another field is a summary. So I'll click Summary, and then that panel expands to show me the different fields that I can use as the source for this summary. And in this case, you'll notice I have a Content text field, so I'm going to select Content. When I do, AI Assistant will generate the content. You can either accept it, you can try again to have AI Assistant regenerate it, and once you're happy with the results, you can click Accept. Finally, if we scroll down further, you'll notice that there's a section for some tags. I'll go ahead and hover over the Tags section to see the AI Assistant icon. When I click it, again, what I want to do is generate content, in this case, SEO tags. I want to generate it based upon that same Content text field. So when I select that option, AI Assistant will generate tags based upon the contents found within that text field. Again, I'll go ahead and click Accept. So you'll notice that there's a lot of capability within this AI Assistant menu. Again, if I scroll up towards the top, if I click the AI Assistant button for Summary, I can change this text further by optimizing it for SEO, which we looked at earlier. We can change the tone to be more persuasive, straightforward, friendly, or professional. We can also change the length to make it longer or shorter. And in this case, you also have the option to translate to the current locale language. Remember, AI Assistant doesn't just work for creating new content, but you can also modify existing content the same way. Also know, once you install AI Assistant, it becomes available throughout the entire stack. AI Assistant in Content Stack is a powerful tool that enhances your creation process. The world of content creation is ever-evolving, and AI and other technologies are optimizing the editing experience. Tools like AI Assistant allow you to stay at the forefront, captivating your audience with every word. So go ahead, explore all the possibilities, and let AI Assistant transform the way you work and create content in Content Stack.

This course is intended to outline the Contentstack features and techniques for using the Taxonomy features with&nbsp;your content, understand the APIs, and how to leverage Taxonomy within your implementation.&nbsp; Completion of this course earns a 'badge' for this topic.!Required for this course:<ol><li>Account in Contentstack with access to a Stack as an Administrator or Developer. Create a training Stack&nbsp;<a href="https://www.contentstack.com/academy/training-instance" target="_blank">here</a>. Training stacks are available for 90 days. Alternatively, you can bootstrap a&nbsp;<a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps">Starter App via the CLI</a>&nbsp;or from the&nbsp;<a href="https://app.contentstack.com/#!/marketplace/starters">Marketplace</a>.&nbsp;</li><li>Permissions to create a new Taxonomy and edit Content Types in a Stack.&nbsp;</li></ol>

Taxonomy Foundations Thumbnail

[DEV TESTING] Taxonomy Foundations

Understanding Branches in Contentstack
 Branches give your team a safe, flexible way to experiment with content without affecting what’s live in production. In this lesson, you’ll learn how to create and work inside a branch, explore use cases like seasonal campaigns or localization, and see how branches keep your main stack clean and stable. We’ll also cover what happens when you’re ready to bring your work forward into production and how to clean up branches you no longer need. By the end, you’ll understand how branches empower content authors to move fast, stay creative, and keep production safe.

Understanding Branches

Branches give your team a safe, flexible way to experiment with content without affecting what’s live in production. In this lesson, you’ll learn how to create and work inside a branch, explore use cases like seasonal campaigns or localization, and see how branches keep your main stack clean and stable. We’ll also cover what happens when you’re ready to bring your work forward into production and how to clean up branches you no longer need. By the end, you’ll understand how branches empower content authors to move fast, stay creative, and keep production safe.

Understanding Branches in Contentstack

Understanding Branches_Thumb.jpg

Understanding Entries

Creating an Entry

Rich Text Editors

Managing Entries

Managing Assets

Understanding Asset URLs and Metadata

Creating and managing content is at the heart of working in Contentstack, and this course shows you how to do it with confidence. You’ll start by learning the fundamentals of entries—what they are, how to organize them, and how to create new ones for your site. From there, you’ll explore how to manage entries effectively, whether that means editing, copying, deleting, or importing them into your stack. You’ll also dive into the Assets module, where you’ll discover how to upload, filter, tag, and delete files, as well as how to work with metadata, file URLs, and permanent URLs to ensure reliable content delivery. Along the way, you’ll see the difference between HTML and JSON text editors, with practical examples to help you choose the right tool for your projects.By the end of this course, you’ll have the skills to confidently create, organize, and manage both entries and assets in Contentstack, ensuring your digital content is structured, reusable, and ready to publish across channels.

Creating and managing content is at the heart of working in Contentstack, and this course shows you how to do it with confidence. You’ll start by learning the fundamentals of entries—what they are, how to organize them, and how to create new ones for your site. 

Creating and Managing Content

Creating and Managing Content_Thumb.jpg

This demo brings to life how Contentstack transforms an ordinary website visit into a fully personalized experience. Starting with an anonymous traveler browsing vacation packages, the system interprets their clicks, interests, and behaviors to predict intent and customer value. As preferences emerge, Agent OS adapts the experience in real time—surfacing more relevant content, upselling premium offers, and refining packages through natural conversation with the concierge agent. Behind the scenes, Contentstack makes this possible with tools like&nbsp;Polaris, which identifies new opportunities, and&nbsp;custom agents, which automate content creation and personalization tasks. In minutes, a new page can be generated, tailored for different audiences, scheduled for release, and visually previewed across contexts.The result: a seamless customer journey that feels individualized at every step—and a powerful demonstration of how Contentstack enables teams to deliver adaptive personalization at scale.

Agent OS Demo

Adaptive Personalization with Agent OS

Agent OS_Thumb.jpg

Publishing & Unpublishing Content

Managing Scheduled Content

Nested Reference Publishing

Publishing is the final, crucial step in bringing your content to life in Contentstack. But with multiple environments, languages, and connected assets, it can quickly get complicated. This course makes it simple.You’ll start by learning how to publish and unpublish entries and assets — the building blocks of your digital experiences. From there, you’ll see how to schedule publishing activities in advance, and how to cancel them if plans change. Finally, we’ll explore Nested Reference Publishing, a powerful feature that ensures every connected piece of content goes live together, so nothing gets left behind.By the end of this course, you’ll know how to:<ul><li>Publish and unpublish entries and assets across environments and locales.</li><li>Schedule or cancel publishing activities with confidence.</li><li>Use Nested Reference Publishing to publish complex, interconnected content in one streamlined action.</li></ul>Whether you’re managing a single page or a large release with hundreds of dependencies, you’ll leave with the skills to keep your publishing process accurate, efficient, and error-free.

Publishing is the final, crucial step in bringing your content to life in Contentstack. But with multiple environments, languages, and connected assets, it can quickly get complicated. This course makes it simple.


Publishing in Contentstack

Publishing Content_thumbnail.jpg

Publishing Content

Overview of Content Types

Understanding Content Type Classification

Why Labels Matter

Fields in Contentstack

Advanced Fields in Contentstack

Why Content Models Matter

This course gives you a clear, practical understanding of how content is structured inside Contentstack—and why that structure is the backbone of scalable digital experiences. You’ll learn how content models act as blueprints, how content types serve as reusable molds, and how fields shape every entry you create.We’ll cover the essentials:<ul><li>Content Types</li><li>Fields</li><li>Labels</li></ul>Through real-world examples like building a blog page, you’ll see how structured content speeds up publishing, improves consistency, and makes collaboration easier across teams. By the end, you’ll understand how content models connect the backend structure with the frontend experience, and how to work smarter with Contentstack—whether you’re a content creator, or editor.

Structuring Content in Contentstack

Structuring Content in Contentstack_thumbnail.jpg

Customizing Your Contentstack Dashboard: Personalize for EfficiencyIn this quick explainer, we’ll walk you through how to make the most of your Contentstack dashboard. Learn how to customize your view by adding, removing, and sorting widgets, and see how to make the dashboard truly work for you. From viewing recently modified entries and assets to exploring new extension options, this video covers everything you need to know to create a streamlined, personalized dashboard experience.Watch now and take control of your Contentstack homepage to boost your workflow and efficiency! <a href="https://www.contentstack.com/docs/developers/create-dashboard-extensions" target="_blank" title="Contentstack Extensions">Build your own Dashboard Extensions</a>

Explore