Contentstack&rsquo;s Rich Text Editor offers a powerful, customizable interface for content editors, backed by robust developer features that allow complete control over the HTML output.
<h2>Key Features for Content Editors</h2>
<ul>
<li>
Rich media embedding (images, videos, tables)
</li>
<li>
Integration with external systems (e.g., Cloudinary)
</li>
<li>
AI-assisted content enhancements
</li>
<li>
Embedding and linking other content entries
</li>
</ul>
<h2>Configuring the Rich Text Field</h2>
<h3>Basic Configuration</h3>
<ul>
<li>
Inline formatting: Bold, Italic, Underline
</li>
<li>
Block formatting: Headers, Paragraphs
</li>
</ul>
<h3>Advanced Configuration</h3>
<ul>
<li>
Includes rich media, tables, and embeds
</li>
</ul>
<h3>Custom Configuration</h3>
<ul>
<li>
Selectively enable or disable features
</li>
<li>
Useful for restricting options for SEO or accessibility purposes (e.g., avoiding multiple H1 tags)
</li>
</ul>
<h2>Embedding and External References</h2>
<ul>
<li>
Entries: Embed full entries directly within Rich Text.
</li>
<li>
Assets: Embed images or videos directly, either from internal assets or external systems like Cloudinary.
</li>
</ul>
<h2>Customizing HTML Output</h2>
The Rich Text Editor outputs structured JSON, which developers can convert into customized HTML using the Contentstack Delivery SDK utility functions.
<h3>JSON Structure</h3>
<ul>
<li>
Rich Text content is stored as JSON with clear semantic descriptions.
</li>
<li>
Example JSON snippet:
</li>
</ul>
<pre><code>{
 "type": "paragraph",
 "children": [
 { "text": "Rich", "italic": true },
 { "text": " text editor", "bold": true }
 ]
}</code></pre>
<h3>Converting JSON to HTML</h3>
Use the built-in utility function:
<pre><code>import { jsonToHtml } from '@contentstack/utils';
const htmlOutput = jsonToHtml(entry.content);</code></pre>
<h2>Customizing Rendered HTML</h2>
Customize the output further with render options:
<pre><code>const renderOptions = {
 p: (node, next) =&gt; (node.children[0].text.trim() === '' ? '' : `&lt;p&gt;${next(node.children)}&lt;/p&gt;`),
 a: (node, next) =&gt; `&lt;a href="${node.attrs.href}" rel="noopener nofollow"&gt;${next(node.children)}&lt;/a&gt;`
};
const htmlOutput = jsonToHtml(entry.content, renderOptions);</code></pre>
<h3>Example Use Cases</h3>
<ul>
<li>
Remove empty paragraphs to keep markup clean.
</li>
<li>
Add SEO-friendly attributes to links automatically.
</li>
<li>
Customize image rendering for optimal performance (lazy loading, image optimization).
</li>
</ul>
<h2>Handling Embedded Entries and Assets</h2>
<h3>Embedded Entries</h3>
When referencing another entry:
<pre><code>const renderOptions = {
 embedded_entry: (node) =&gt; `&lt;div class="embedded-entry"&gt;${node.entry.title}&lt;/div&gt;`
};</code></pre>
<h3>Cloudinary Assets</h3>
Customize Cloudinary images dynamically:
<pre><code>const renderOptions = {
 cloudinary: (node) =&gt; `&lt;img src="${node.attrs.secure_url}" alt="${node.attrs.alt}" loading="lazy"&gt;`
};</code></pre>
<h2>Advanced Image Customization</h2>
Add dynamic parameters to Cloudinary images:
<pre><code>function customCloudinaryImage(asset, metadata) {
 const params = 'w_800,h_450,f_auto,q_90,c_fill';
 return `&lt;img src="${asset.url}?${params}" alt="${asset.alt}" loading="lazy"&gt;`;
}</code></pre>
<h2>Best Practices</h2>
<ul>
<li>
Clearly separate editorial content input from HTML rendering.
</li>
<li>
Allow content editors freedom within the Rich Text editor, and handle all necessary cleanup in the rendering logic.
</li>
<li>
Use JSON rendering hooks to avoid manual HTML adjustments by editors.
</li>
</ul>
<h2>Resources</h2>
<ul>
<li>
<a href="https://www.contentstack.com/docs">Contentstack Documentation</a>
</li>
<li>
<a href="https://community.contentstack.com">Discord Community</a>
</li>
</ul>

Exploring the JSON Rich Text Editor

Opengraph_B.png

ExploringtheJSONRichTextEditor_Coding_Thumbnail.jpg

Contentstack provides powerful capabilities for creating a simplified Product Information Management (PIM) system, suitable for brands that need structured product data without requiring a dedicated PIM solution. This guide outlines the steps and considerations for setting up a basic, effective PIM within Contentstack.
<h2>What is a PIM?</h2>
A Product Information Management (PIM) system centralizes product data, allowing for structured enrichment, management, and reuse across multiple channels and platforms over time. It focuses purely on core product details, free from design specifics.
<h3>Creating Your PIM Data Model in Contentstack</h3>
Step 1: Define Basic Content Types
Create these essential content models:
<ul>
<li>Product</li>
<li>Attribute</li>
<li>Taxonomy (for product categories)</li>
</ul>
Step 2: Defining a Product Model
Each product should include:
<ul>
<li>Title: Product name</li>
<li>SKU: Unique product identifier</li>
<li>Description: Short description or detailed rich text as needed</li>
<li>Category (Taxonomy field): Structured, hierarchical categorization</li>
<li>Status: Product state (active, inactive, draft)</li>
<li>Assets: Product images, potentially multiple views</li>
<li>Attributes: Specifications like size, material, color, etc.</li>
</ul>
Step 3: Creating Attributes
Attributes should be reusable and might include:
<ul>
<li>Numerical data (e.g., "Size: 33mm")</li>
<li>Textual data (e.g., "Band Material: Metal")</li>
</ul>
Attributes can be connected across multiple products, facilitating filtering and enhancing data management.
Practical Example: Adding a Product
<ol>
<li>Add Product Information</li>
<ul>
<li>Title: Rolex Watch</li>
<li>SKU: Unique identifier</li>
<li>Description: Concise or detailed explanation of the product</li>
</ul>
<li>Categorize the Product</li>
<ul>
<li>Assign categories (e.g., Men's Wear, Watches)</li>
</ul>
<li>Set Product Status</li>
<ul>
<li>Choose from Active, Inactive, or Draft for effective publication management</li>
</ul>
<li>Upload Assets</li>
<ul>
<li>Include main and additional product images</li>
</ul>
<li>Link Product Attributes</li>
<ul>
<li>Example: Size ("33mm"), Band Material ("Metal")</li>
</ul>
</ol>
<h2>Querying Data via GraphQL</h2>
Contentstack allows easy querying of PIM data via GraphQL. Key fields to query include:
<ul>
<li>Title</li>
<li>SKU</li>
<li>Description</li>
<li>Categories</li>
<li>Status</li>
<li>Attributes (e.g., size, material)</li>
<li>Asset URLs</li>
</ul>
Separating Product Data from Presentation
<ul>
<li>Keep PIM data strictly focused on product information without layout or visual details.</li>
<li>Create separate visual components or pages that reference products from the PIM, allowing flexible and future-proof design adaptations across different channels and platforms.</li>
</ul>
Benefits of Using Contentstack for PIM
<ul>
<li>Simplifies product data management without a dedicated PIM solution.</li>
<li>Facilitates product data reuse and consistency.</li>
<li>Enables easy integration with multiple front-end channels.</li>
</ul>
By clearly separating structured product information from visual presentation layers, your data remains clean, versatile, and ready for long-term, multi-channel use.

<a href="https://community.contentstack.com">Join us on Discord</a>

PIM Basics

A Simple PIM Setup for Contentstack

A Simple PIM Setup for Contentstack Coding Thumbnail

Data modeling is crucial when working with visual builder tools in modern headless CMS platforms like Contentstack. Correctly modeling your data ensures your content is scalable, maintainable, and reusable across different platforms and channels.<h2>Understanding Data Types</h2>When modeling content, it’s vital to differentiate clearly between two primary data types:<ol><li>Domain Data</li></ol><ul><li>Definition: Domain data is the core content, independent of presentation or design.</li><li>Characteristics:<ul><li>Reusable across multiple channels (websites, mobile apps, external platforms).</li><li>Persistent and stable over long periods.</li><li>Examples: Articles, videos, blog posts, conference talks.</li></ul></li></ul><ol start="2"><li>Volatile (Design-Related) Data</li></ol><ul><li>Definition: Volatile data is content related to layout, styling, and presentation.</li><li>Characteristics:<ul><li>Frequently changing and design-specific.</li><li>Tied closely to individual components or pages.</li><li>Examples: Hero banners, featured components, promotional sections.</li></ul></li></ul><h2>Best Practices for Structuring Your Data</h2><h3>Separate Design from Content</h3>Always keep your domain content separate from your design components. Domain data should be purely informational and devoid of styling instructions or layout details. For example, an "Article" model should not include design-related options like "featured image size."<h3>Reuse Domain Data</h3>Structure domain data models to be channel-agnostic. For instance, videos or blog posts should exist independently of the pages or layouts they might appear in. This way, they can easily be reused across multiple places, like websites, apps, or external publications.<h3>Utilize Components for Design Flexibility</h3>Components like "latest videos," "featured articles," or "hero banners" should be created to handle design and layout separately from domain content. These components can reference domain data without altering the underlying content.<h2>Practical Example</h2><h3>Consider a website homepage:</h3><ul><li>A Hero Banner at the top of the homepage is volatile content. It frequently changes depending on campaigns or events. Therefore, its data should include titles, images, and links but be flexible enough for frequent updates.</li><li>A List of Videos below the hero banner is domain content. Videos themselves don't change based on presentation—only the presentation component itself changes, such as featuring the first video prominently.</li></ul><h3>Common Mistakes to Avoid</h3><ul><li>Embedding design attributes within domain data: Avoid adding design-specific fields (like "display large image") directly into your core domain models. It creates dependency and makes content reuse challenging.</li><li>Over-complicating content models: Do not create unique content types for every visual component. Instead, reuse flexible components linked to stable domain data.</li></ul><h3>Benefits of Good Data Modeling</h3><ul><li>Simplifies long-term content maintenance.</li><li>Enhances content reuse across multiple channels.</li><li>Clearly defines editing boundaries for content editors, reducing errors.</li></ul><h2>Conclusion</h2>Clear differentiation between domain data and volatile design data is foundational for effective content management. Structuring your data in this way ensures scalability, ease of maintenance, and consistent user experiences across all platforms.Join our community on Discord: <a href="https://community.contentstack.com">https://community.contentstack.com</a><a href="https://www.contentstack.com/docs/developers/set-up-visual-builder">Visual Builder Documentation for Developers</a>

Visual Builder Data Modeling Best Practices

Opengraph_A.png

Visual Builder Data Modeling Best Practices Coding Thumbnail

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

How to Complete the Live Preview Course

<h3>What is Live Preview?</h3>
The Live Preview feature in Contentstack allows users to see real-time updates to their content as they make changes.&nbsp;
This means that any edits or modifications to the content are immediately reflected in the preview, providing a dynamic and interactive way to view and validate content before publishing.&nbsp;

Here are some key aspects of the Live Preview feature:
<ul>
 <li>Multiple Device Previews: Users can preview content across different devices and screen sizes to ensure responsive design and consistency.</li>
 <li>Contextual Editing: Users can click directly on the content in the preview pane to edit it, making the editing process more intuitive and efficient.&nbsp;</li>
 <li>Immediate Effect:&nbsp;Live preview eliminates&nbsp;the need to manually refresh or rebuild pages in real time.</li>
 <li>Reduced Errors:&nbsp;Content creators can see how their content will look in the final environment in real-time, allowing them to catch any formatting or content errors, ensuring that content aligns with brand guidelines and design expectations, leading to higher-quality output.</li>
 <li>Faster Iterations: With immediate effect, content creators&nbsp;can make quick adjustments, speeding up the content creation and review process.</li>
</ul>

Overall, the Live Preview feature enhances content management by providing a seamless and immediate way to visualize and refine content before it goes live.


<h3>Use Cases of Live Preview</h3>

<ol>
 <li>Omnichannel Preview Experience:
 Content managers can preview how their content will appear across various devices (mobiles, tablets, desktops) in real-time. They can switch between different aspect ratios to ensure responsiveness and consistency across platforms. This capability allows them to optimize content presentation without needing to switch between different devices physically.
 </li>
 <li>Real-Time Edits:
 By clicking on the "Edit" icon next to any content block within the Live Preview window, content managers can instantly navigate to the corresponding field in the editor. This seamless integration between preview and editing facilitates quick updates and adjustments. Content managers can see changes as they make them, ensuring accuracy and alignment with their vision.
 </li>
 <li>Instant Testing of Content Changes:
 Content managers can preview and test content changes immediately without the need to publish or save them. This feature is particularly useful for iterating on design elements, trying out different content placements, or experimenting with new features. It allows for rapid prototyping and refinement directly within the preview environment.
 </li>
 <li>Scope for Innovation and Enhancement:
 Live Preview is integrated as a core feature within the Contentstack platform rather than a separate add-on. This integration ensures that developers can leverage and innovate upon the feature seamlessly. They can incorporate new functionalities or enhance existing ones directly within the native environment, promoting continuous improvement and adaptation.
 </li>
 <li>Content Schema Integrity:
 Developers can maintain the integrity of the content schema while using Live Preview. Content entries remain structured in JSON format, allowing developers to define and modify content models as needed. This structured approach ensures consistency across content types and simplifies the process of scaling or modifying content structures over time.
 </li>
</ol>

<script src="https://cdn.jwplayer.com/players/ZwFvVzCm-b769H14u.js"></script>

Introduction to Live Preview

<h3>How to enable Live preview on your Stack?</h3><h3></h3><ol><li>Under stack settings, go to Live Preview, tick enable live preview and select a Default Preview <a href="https://www.contentstack.com/docs/developers/set-up-environments/about-environments">Environment</a>. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83eed7e9d24e0d53/67e1ad0029f30c277bf8de60/ImplementingLivePreview_L3_img-1.png" alt="ImplementingLivePreview_L3_img-1.png" height="auto"/> </li><li>Go to Environment settings and add the base URL (hosted website URL) in that environment’s settings.This hosted website should be fetching data from the same environment. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd7f06a9a55b96fc3/67e1ad4db9f9a66e76dc40cf/ImplementingLivePreview_L3_img-2.png" alt="ImplementingLivePreview_L3_img-2.png" height="auto"/></li></ol><h3></h3><h3>Generate&nbsp;Preview Token&nbsp;for you stack</h3><ol><li>Under stack settings, go to <a href="https://www.contentstack.com/docs/developers/create-tokens/types-of-tokens">tokens</a>.</li><li>Under <a href="https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens">Delivery Token</a>, create a new token. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt17620102d7b0b49e/67e1adc3c0d1f26cc60a3d03/ImplementingLivePreview_L3_img-3.png" alt="ImplementingLivePreview_L3_img-3.png" height="auto"/> </li><li>Fill in the&nbsp;name and description (optional), then select the branch and environment, enable the Create&nbsp;<a href="https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens#about-preview-tokens">Preview Token</a> toggle, and&nbsp;Generate Token. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb0567501a748508b/67e1add8b9f9a60a39dc4132/ImplementingLivePreview_L3_img-4.png" alt="ImplementingLivePreview_L3_img-4.png" height="auto"/> </li></ol>

Basic implementation

<h3>What is your website Architecture?</h3>
When deciding between Client-Side Rendering (CSR) and Server-Side Rendering (SSR) for implementing Contentstack live preview, it's essential to consider the specific needs and constraints of your project.
Contentstack supports both SSR and CSR, and the choice might also depend on the specific framework you are using (e.g., Next.js for SSR, React for CSR). Contentstack provides <a href="https://www.contentstack.com/docs/developers/set-up-live-preview/how-live-preview-works-with-sdk">SDKs and APIs</a> that are compatible with both approaches.

Here are some key factors to help you decide:

<h4>Client-Side Rendering (CSR)</h4>

<ul>
 <li>Interactivity: CSR allows for highly interactive applications as JavaScript is executed on the client side.</li>
 <li>Initial Load Time: The initial load time can be longer because the browser has to download and execute JavaScript before rendering the content.</li>
 <li>Complexity: Implementing live previews might be more complex as you need to ensure that the client-side app can handle real-time updates and rendering.</li>
</ul>

<h4>Server-Side Rendering (SSR)</h4>

<ul>
 <li>Initial Load Time: The initial load time can be faster because the server sends a fully rendered page to the client.</li>
 <li>Complexity: Implementing live previews can be easier and more seamless since the server renders the updated content.</li>
 <li>Performance on the Server: SSR can be more demanding on the server, especially with a high number of concurrent users.</li>
 <li>Interactivity: SSR might not be as interactive out of the box as CSR, although hybrid approaches can mitigate this.</li>
</ul> 
<h4>Hybrid Approach</h4>
In many cases, a hybrid approach, using both CSR and SSR, might be the best solution. For example, you can use SSR for the initial load to benefit from SEO and faster initial load times, and then switch to CSR for subsequent interactions to enhance interactivity.
 
<hr />
 
<h3>Live Preview in CSR</h3>
Client-side rendering (CSR) involves a process where all rendered HTML client pages are generated on the browser side. Consequently all the data fetching is also done on the client side. This guide explains in detail how to set up Live Preview for an CSR Application.
 

<h4>How CSR Works:</h4>

<ol>
 <li>Initial HTML and JavaScript Load:<ul>
 <li>When a user visits a CSR-based web application, the server sends an initial HTML document that often includes references to JavaScript frameworks like React, Angular, or Vue.js.</li>
 <li>This initial HTML might include placeholders or loading indicators where content will be rendered dynamically.</li>
 </ul>
 </li>
 <li>Data Fetching and Rendering:<ul>
 <li>Once the browser loads the initial HTML and JavaScript, the client-side code makes requests to APIs or other data sources to fetch necessary data.</li>
 <li>This data is then used by the JavaScript frameworks to dynamically render the actual content on the page.</li>
 <li>This process allows for highly interactive and responsive user interfaces, as changes can be made to the UI without requiring full page reloads.</li>
 </ul>
 </li>
 <li>Benefits:<ul>
 <li>Speed and Responsiveness: CSR can provide a faster initial load time because only minimal HTML is initially transferred.</li>
 <li>Interactivity: Applications can feel more responsive since data fetching and rendering happen on the client side without waiting for server responses for every interaction.</li>
 <li>Flexibility: Developers have more control over how content is displayed and can create highly dynamic user interfaces.</li>
 </ul>
 </li>
</ol><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt42d7003887817022/67e1b16e914c2442924972c1/ImplementingLivePreview_L4_img-1.avif" alt="ImplementingLivePreview_L4_img-1.avif" height="auto" />
Working of Live Preview in CSR:
When a website is opened in the Live Preview pane, data is fetched live from the current entry using a GET call over preview service url.&nbsp;If changes are made to the entry, with those changes Contentstack sends a PATCH call. The onEntryChange() function then triggers another GET call to fetch the updated data, which is re-rendered on the webpage in Live Preview pane.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt79f0d34846849b01/67e1b6f367538e1ec22bd731/ImplementingLivePreview_L4_img-2.png" alt="ImplementingLivePreview_L4_img-2.png" height="auto" />
 
<hr />
 
<h3>Live Preview in SSR</h3>
Server-side rendering (SSR) involves a process where an application generates rendered HTML client pages on the server rather than in the browser. Consequently, data fetching is also done on the server side, with HTML pages created and sent to the browser. This guide explains in detail how to set up Live Preview for an SSR Application.

<h4>Server-Side Rendering (SSR)</h4>

<ol>
 <li>Request Handling:<ul>
 <li>When a user requests a page from a SSR-based application, the server processes the request and generates the complete HTML for that page.</li>
 <li>This includes the content of the page, data fetched from databases or APIs, and the initial state of any client-side frameworks (if used).</li>
 </ul>
 </li>
 <li>HTML Generation:<ul>
 <li>Server-side frameworks like Next.js (for React), Nuxt.js (for Vue.js), or server-side template engines (e.g., EJS, Pug) are commonly used to facilitate SSR.</li>
 <li>These frameworks or engines render components or templates with the data provided by the server into a complete HTML document.</li>
 </ul>
 </li>
 <li>Sending HTML to Client:<ul>
 <li>Once the HTML is generated on the server, it is sent to the client's browser as a fully formed document.</li>
 <li>This HTML can include all the content necessary for the initial view of the page, reducing the need for subsequent data fetching before the page can be fully rendered.</li>
 </ul>
 </li>
 <li>Client Interaction:<ul>
 <li>Once the initial HTML is rendered on the client's browser, any further interactivity can be enhanced with client-side JavaScript.</li>
 <li>This includes handling user events, making API calls for dynamic updates, and managing client-side state using frameworks like React, Vue.js, or Angular. </li>
 </ul>
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfc9d5f1526d39df0/67e1b791a352df6071697026/ImplementingLivePreview_L4_img-3.avif" alt="ImplementingLivePreview_L4_img-3.avif" height="auto" /> 
<h4>Working of Live Preview in SSR</h4>
When a website is opened in the Live Preview pane, the server builds HTML pages with data fetched live from the current entry using a GET call over the preview-service URL. These pages are then sent to the client and rendered in the Live Preview pane. If changes are made to the entry, Contentstack sends a PATCH call with those changes. The webpage in the Live Preview pane is then refreshed, and the server builds HTML pages with the updated data fetched from another GET call. These updated pages are sent to the client and rendered in the Live Preview pane.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdc4fe0eae7f658a1/67e1b7c72fdf5e5ad0069dde/ImplementingLivePreview_L4_img-4.png" alt="ImplementingLivePreview_L4_img-4.png" height="auto" />

How Live Preview works

<h3>1. Generate Preview Token</h3>In the Basic Implementation&nbsp;module, we have already generated a preview token.&nbsp;&nbsp;<h3>2.&nbsp;Update Contentstack's delivery SDK</h3>To update the&nbsp;package via npm, use the following command:<pre>npm install contentstack</pre> To allow <a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/about-javascript-delivery-sdk">delivery SDK</a> to fetch preview content, we need to add live preview configs to the stack initialization method i.e. to Contenstack.Stack() method.Contenstack.Stack() method takes the live_preview object which includes following parameters:<ul><li>preview_token: The preview_token is used to&nbsp;authenticate API requests to fetch preview content.</li><li>enable:&nbsp;This boolean property lets you enable&nbsp;the live preview on your client-side. Setting this to true&nbsp;turns on the live preview feature, allowing real-time updates to be shown in the application. If set to false, the live preview functionality will be disabled.</li><li>host:&nbsp;The host property is optional and is used to define the endpoint that the application will connect to for fetching the live preview data. REST API hosts according to regions: <ul><li>AWS NA:&nbsp;rest-preview.contentstack.com</li><li>AWS EU:&nbsp;eu-rest-preview.contentstack.com</li><li>Azure NA:&nbsp;azure-na-rest-preview.contentstack.com</li><li>Azure EU:&nbsp;azure-eu-rest-preview.contentstack.com</li><li>GCP NA:&nbsp;gcp-na-rest-preview.contentstack.com</li></ul> </li></ul><pre>import Contentstack from 'contentstack' const Stack = Contentstack.Stack({ ... // update your configs here live_preview: { preview_token: preview_token, enable: true, host: 'rest-preview.contentstack.com' //optional for AWS-NA region }, ... })</pre><h3>3. Install / Update and Initialize the Live Preview Utils SDK</h3> <a href="https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/about-javascript-live-preview-utils-sdk">Live preview utils SDK</a> listens to content changes and requests the delivery SDK to preview changes in real-time. Therefore Live Preview Utils SDK is always initialized at the client side irrespective of CSR/SSR is being followed.To use Live preview utils SDK you can either install it using npm or import it using the script tag in your HTML page.To install the package via npm, use the following command:<pre>npm install @contentstack/live-preview-utils</pre>initialization :<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.init({ enable: true });</pre>or you can use Script&nbsp;tag to&nbsp;import and initialize live preview utils sdk:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt48250a2b71332476/67e1b9f2362ee30f7f55cbbd/ImplementingLivePreview_L5_img-1.png" alt="ImplementingLivePreview_L5_img-1.png" height="auto"/> <h3>ContentstackLivePreview.init() method:</h3>init() method initializes the Live Preview Utils SDK.&nbsp;The&nbsp;init()&nbsp;method accepts a configuration object as a parameter.The following explains all the configuration options available.<ul><li>enable: The enable property determines whether Live Preview communications have been enabled. It takes a boolean value. It is an optional property which takes the default value as&nbsp;true.&nbsp;</li><li>ssr: The ssr property controls how data is updated for previewed content when you modify entry content. It is an optional property which takes the default value as&nbsp;true.&nbsp; Its behavior changes based on whether your application uses Server-Side Rendering (SSR) or Client-Side Rendering (CSR).<ul><li>When ssr is set to true: Your application or website is rendered on the server (SSR). This means that each time you edit content, a request is made for a new HTML page.</li><li>When ssr is set to false: Your application is rendered on the client side (CSR). In this case, your framework (e.g., React) will fetch the updated data and reload the existing page. </li></ul></li><li>stackSdk:&nbsp;The&nbsp;stackSdk&nbsp;represents the stack object.&nbsp;For&nbsp;CSR mode stackSdk object is required. When stackSdk object is provided utils SDK&nbsp;initialization switches to CSR mode. It is required to override default SSR configs.</li><li>stackDetails: The&nbsp;stackDetails&nbsp;object contains stack-related information which helps you redirect to the corresponding entry when you use edit tags on your website. The stackDetails object contains the following properties:<ul><li>apiKey</li><li>branch</li><li>environment&nbsp;</li></ul></li></ul><ul><li>clientUrlParams: The&nbsp;clientUrlParams&nbsp;object represents the URL information where your stack is present which includes host, port, and protocol. AWS NA region app host is default { host: "app.contentstack.com", // AWS NA region app host } The default params take AWS NA region values. Client host for other regions: • AWS EU region: eu-app.contentstack.com • Azure NA region: azure-na-app.contentstack.com • Azure EU region: azure-eu-app.contentstack.com • GCP NA region: gcp-na-app.contentstack.com • GCP EU region: gcp-eu-app.contentstack.com</li></ul><ul><li>cleanCslpOnProduction: When&nbsp;enable&nbsp;is set to&nbsp;false&nbsp;and cleanCslpOnProduction is set to&nbsp;true, the&nbsp;data-cslp&nbsp;attributes are removed from the website. When operating in a production environment, you generally want to avoid including data-cslp attributes in your site's HTML tags or enabling the live preview feature. To manage this, you can implement conditional statements to control the live preview functionality based on the current environment.</li></ul><pre>ContentstackLivePreview.init({ &nbsp; enable: process.env.CONTENTSTACK_ENVIRONMENT !== "production" // returns false and disables the live-preview in production environment cleanCslpOnProduction: process.env.CONTENTSTACK_ENVIRONMENT === "production" // returns true and cleans data-cslp attributes in production environment ... }</pre> <ul><li>editButton: The editButton object provides functionality to manage the "Edit" button in your application, whether you're inside or outside the Live Preview portal. It offers several key features, including edit button visibility and&nbsp;control over the inclusion or exclusion of the "Edit" button within or outside the Live Preview panel, You can also adjust the button’s positioning based on your needs. Following keys enables you to customize editButton object:<ul><li>enable: This key accepts boolean values, which&nbsp;let's you specify whether you want to display the “Edit” button or not. the default values is true.</li><li>exclude: This key provides you with the option to exclude the editButton from either inside or outside the Live Preview portal for certain conditions. It is of type “Array” with any one of the following string values: <ul><li>insideLivePreviewPortal&nbsp;is used when you want to remove the “Edit” button from within the Live Preview portal.</li><li>outsideLivePreviewPortal&nbsp;is used when you want to remove the “Edit” button from outside the Live Preview portal. </li></ul></li><li>includeByQueryParameter:&nbsp;This boolean property&nbsp;is used to override the cslp-buttons query parameter. You can set this to true/false to enable/disable the "Edit" button option, respectively. By default it is set to true</li><li>position: This property lets you customize the "Edit" button’s placement using one of eight predefined positions. It accepts the following values: left, right, top-left (or top), top-right, top-center, bottom-left (or bottom), bottom-right, and bottom-center.</li></ul></li></ul>example:<pre>ContentstackLivePreview.init({ &nbsp; &nbsp; ... &nbsp; &nbsp; editButton: { &nbsp; &nbsp; &nbsp; &nbsp; enable: true, &nbsp; &nbsp; &nbsp; &nbsp; exclude: ["outsideLivePreviewPortal"], &nbsp; &nbsp; &nbsp; &nbsp; includeByQueryParameter: false, &nbsp; &nbsp; &nbsp; &nbsp; position:'top-right', &nbsp; &nbsp; } });</pre> <ul><li>debug: Setting debug: true in ContentstackLivePreview.init() enables debugging mode for the Live Preview functionality. This mode is useful for developers as it provides additional logging and detailed information about the Live Preview's internal processes and interactions. When you're done with debugging, it's generally a good idea to set debug to false or remove the debug option to avoid unnecessary logging in a production environment.</li></ul><h3>Configure Live preview Across Pages - CSR Powered website</h3>ContentstackLivePreview.onEntryChange() method executes when an entry content is being changed, inside this method, you can add logic to fetch preview content.&nbsp;&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc506e7b1bff7d46b/67e1bcb4d148edb993a3ff67/ImplementingLivePreview_L5_img-2.png" alt="ImplementingLivePreview_L5_img-2.png" height="auto"/>In the above exampleupdateData() function is responsible for fetching new data and updating the state.ContentstackLivePreview.onEntryChange(updateData) registers the updateData function to be called whenever an entry is updated, it&nbsp;fetches the draft/preview content and updates the component's state with setData&nbsp;i.e.&nbsp;data is being updated and rerendered&nbsp;on every change happening in the entry. <h3>Configure Live Preview Across Pages - SSR Powered website</h3>Set up a middleware to track all new changes being made to the entry content. This middleware injects the live preview hash and content type UID into the Stack class using the&nbsp;livePreviewQuery()&nbsp;method.<pre>app.use((req, response, next) =&gt; { // this will get live_preview hash and ContentType to the request Stack.livePreviewQuery(req.query); next(); });</pre>In other Javascript frameworks like next.js, you can directly&nbsp;update the live preview query from the page component itself.&nbsp;Next.js (SSR) example:<ul><li>Set up a middleware: After initialization of live preview SDK in the client component, Let's set up a middleware to track all new changes being made to the entry content. This middleware injects the live preview hash and content type UID into the Stack instance using the livePreviewQuery() method.</li></ul><pre>// utils.js ... export const setLivePreviewQueryParams = (queryParams) =&gt; { if(queryParams?.live_preview) { &nbsp; Stack.livePreviewQuery(queryParams) &nbsp; } } ... </pre> <ul><li>Configure Pages:&nbsp;setLivePreviewQueryParams() updates the live preview query parameters based on the searchParams passed to the page which enables live content updates. This ensures that every time the page loads or search parameters change, we’re checking for and updating live preview functionality parameters.</li></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltaac121a05a27022e/67e1be35a352dfb810697091/ImplementingLivePreview_L5_img-3.png" alt="ImplementingLivePreview_L5_img-3.png" height="auto"/> After implementing these steps you are all set to live preview your first page. <h3>Configure Live preview -&nbsp;SSG-powered Website</h3>Static site generation (SSG) is a web development strategy that generates HTML pages at build time using available data and templates. This results in pre-rendered static files that are served directly from a web server. In contrast, server-side rendering (SSR) and client-side rendering (CSR) generate pages dynamically for each request. SSG is used where the website needs minimal dynamic content When working with Live Preview the server side generates and serves&nbsp;static HTML files with initial/published data and the client-side handles the Live Preview in CSR mode. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt13ddff7eabd3ae7d/67e1bee194fe2fa63fdc79e8/ImplementingLivePreview_L5_img-4.png" alt="ImplementingLivePreview_L5_img-4.png" height="auto"/>SSG Live preview example: <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte9860aefeb60f424/67e1bf09a388fcb626812206/ImplementingLivePreview_L5_img-5.png" alt="ImplementingLivePreview_L5_img-5.png" height="auto"/>

Live preview: REST Delivery SDK

<h3>How to setup&nbsp;Live preview with GraphQL API?</h3>
The <a href="https://www.contentstack.com/docs/developers/apis/graphql-content-delivery-api">GraphQL Content Delivery API</a> offers a more efficient alternative to traditional Content Delivery APIs. It enables you to fetch customized responses or retrieve data from nested or multiple resources with a single API request.
GraphQL is a versatile and customizable API query language. Contentstack's GraphQL API allows you to query precisely what you need, without any excess. For example, you can fetch data from multiple content types with just one API request. You can also define the structure of your requests to customize the responses. Currently, Contentstack's GraphQL supports only queries, and the GraphQL types for each requested resource are generated in real-time, ensuring your content is always up-to-date. 
A GraphQL query like below is sent to&nbsp;https://{{domain}}/stacks/{{api_key}} over POST method with environment parameter and access token in headers to fetch the content. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf9619548fdec8940/67e1bfd1b9f9a67f51dc4277/ImplementingLivePreview_L6_img-1.png" alt="ImplementingLivePreview_L6_img-1.png" height="auto" />




<h3>1. Generate Preview Token</h3>
&nbsp; &nbsp; &nbsp;In the Basic Implementation&nbsp;module, we have already generated a preview token.&nbsp;&nbsp;


<h3>2. Install / Update and Initialize the Live Preview Utils SDK</h3>
<a href="https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/about-javascript-live-preview-utils-sdk">Live preview utils SDK</a> listens to content changes and requests the GraphQl&nbsp;Api&nbsp;to preview changes in real-time. Therefore&nbsp;Live Preview Utils SDK is always initialized at the client side irrespective of CSR/SSR is being followed.
To use Live preview utils SDK you can either install it using npm or import it using the script tag in your HTML page.

To install the package via npm, use the following command:<pre>npm install @contentstack/live-preview-utils</pre>

Create a new JS file and initialize Live Preview SDK:<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.init({ enable: true });</pre>

or you can use Script&nbsp;tag to&nbsp;import and initialize live preview utils sdk:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbc3ec508d7dc3b96/67e1c07b67538edd892bd7f1/ImplementingLivePreview_L6_img-2.png" alt="ImplementingLivePreview_L6_img-2.png" height="auto" />



 
ContentstackLivePreview.init() method:
init() method initializes the ive Preview Utils SDK.&nbsp;The&nbsp;init()&nbsp;method accepts a configuration object as a parameter.
The following explains all the options available for the configuration.
<ul>
 <li>enable: The enable property determines whether Live Preview communications have been enabled. It takes a boolean value. it is an optional property which takes the default value as&nbsp;true&nbsp;.&nbsp;</li>
 <li>ssr: The ssr property controls how data is updated for previewed content when you modify entry content. it is an optional property which takes the default value as&nbsp;true.&nbsp; Its behavior changes based on whether your application uses Server-Side Rendering (SSR) or Client-Side Rendering (CSR).<ul>
 <li>When ssr is set to true: Your application or website is rendered on the server (SSR). This means that each time you edit content, a request is made for a new HTML page.</li>
 <li>When ssr is set to false: Your application is rendered on the client side (CSR). In this case, your framework (e.g., React) will fetch the updated data and reload the existing page.</li>
 </ul>
 </li>
 <li>stackDetails: The&nbsp;stackDetails&nbsp;object contains stack-related information which helps you redirect to the corresponding entry when you use edit tags on your website. stackDetails object contains the following properties:<ul>
 <li>apiKey</li>
 <li>branch</li>
 <li>environment&nbsp; </li>
 </ul>
 </li>
 <li>clientUrlParams: The clientURLParams object represents the URL information where your stack is present which includes host, port, and protocol. AWS NA region app host is default.</li>
</ul><pre>{ host: "app.contentstack.com", // AWS NA region app host }</pre>
 The default params take AWS NA region values. Client host for other regions: • AWS EU region: eu-app.contentstack.com • Azure NA region: azure-na-app.contentstack.com • Azure EU region: azure-eu-app.contentstack.com • GCP NA region: gcp-na-app.contentstack.com • GCP EU region: gcp-eu-app.contentstack.com 
<ul>
 <li>cleanCslpOnProduction: When&nbsp;enable&nbsp;is set to&nbsp;false&nbsp;and cleanCslpOnProduction is set to&nbsp;true, the&nbsp;data-cslp&nbsp;attributes are removed from the website. When operating in a production environment, you generally want to avoid including data-cslp attributes in your site's HTML tags or enabling the live preview feature. To manage this, you can implement conditional statements to control the live preview functionality based on the current environment.</li>
</ul><pre>ContentstackLivePreview.init({ &nbsp; &nbsp; enable: process.env.CONTENTSTACK_ENVIRONMENT !== "production" // returns false and disables the live-preview in production environment &nbsp; &nbsp; cleanCslpOnProduction: process.env.CONTENTSTACK_ENVIRONMENT === "production" // returns true and cleans data-cslp attributes in production environment &nbsp; ... }</pre>

<ul>
 <li>editButton: The editButton object provides functionality to manage the "Edit" button in your application, whether you're inside or outside the Live Preview portal. It offers several key features, including edit button visibility and&nbsp;control over the inclusion or exclusion of the "Edit" button within or outside the Live Preview panel, You can also adjust the button’s positioning based on your needs. Following keys enables you to customize editButton object:<ul>
 <li>enable: This key accepts boolean values, which&nbsp;let's you specify whether you want to display the “Edit” button or not. the default values is true.</li>
 <li>exclude: This key provides you with the option to exclude the editButton from either inside or outside the Live Preview portal for certain conditions. It is of type “Array” with any one of the following string values:<ul>
 <li>insideLivePreviewPortal is used when you want to remove the "Edit" button from within the Live Preview portal.</li>
 <li>outsideLivePreviewPortal is used when you want to remove the "Edit" button from outside the Live Preview portal.</li>
 </ul>
 </li>
 <li>includeByQueryParameter:&nbsp;This boolean property&nbsp;is used to override the cslp-buttons query parameter. You can set this to true/false to enable/disable the "Edit" button option, respectively. By default it is set to true</li>
 <li>position: This property lets you customize the "Edit" button’s placement using one of eight predefined positions. It accepts the following values: left, right, top-left (or top), top-right, top-center, bottom-left (or bottom), bottom-right, and bottom-center.</li>
 </ul>
 </li>
</ul>
example:<pre>ContentstackLivePreview.init({ &nbsp; &nbsp; ... &nbsp; &nbsp; editButton: { &nbsp; &nbsp; &nbsp; &nbsp; enable: true, &nbsp; &nbsp; &nbsp; &nbsp; exclude: ["outsideLivePreviewPortal"], &nbsp; &nbsp; &nbsp; &nbsp; includeByQueryParameter: false, &nbsp; &nbsp; &nbsp; &nbsp; position:'top-right', &nbsp; &nbsp; } });</pre>
 
<ul>
 <li>debug: Setting debug: true in ContentstackLivePreview.init() enables debugging mode for the Live Preview functionality. This mode is useful for developers as it provides additional logging and detailed information about the Live Preview's internal processes and interactions. When you're done with debugging, it's generally a good idea to set debug to false or remove the debug option to avoid unnecessary logging in a production environment.</li>
</ul>

EXAMPLE:<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.init({ &nbsp;&nbsp;&nbsp;&nbsp;stackDetails: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;apiKey: "your-stack-api-key", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enironment: "your-environment-name", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;branch: "your-branch-name" &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;enable: true, &nbsp;&nbsp;&nbsp;&nbsp;ssr: false/true, });</pre>



<h3>3.&nbsp;Update GraphQL API Request</h3>
To allow graphql API&nbsp;to fetch preview content, we need to append live preview hash and preview token in headers of API request and update url hostname to graphql preview hostname.
<ul>
 <li>preview_token: The preview_token is used to&nbsp;authenticate API requests to fetch preview content.</li>
 <li>live_preview:&nbsp;When you open any entry in a stack where the live preview feature is enabled, a Live Preview Hash(Session ID) is generated in the background. This hash is a unique identifier that can be used to save and fetch data to be displayed in the live preview panel.</li>
 <li>hostname:&nbsp;The hostname property is optional and is used to define the endpoint that the application will connect to for fetching the live preview data. GraphQL&nbsp;API hosts according to regions:
 <ul>
 <li>US (North America, or NA):&nbsp;graphql-preview.contentstack.com</li>
 <li>AWS EU:&nbsp;eu-graphql-preview.contentstack.com</li>
 <li>Azure NA:&nbsp;azure-na-graphql-preview.contentstack.com</li>
 <li>Azure EU:&nbsp;azure-eu-graphql-preview.contentstack.com</li>
 <li>GCP NA:&nbsp;gcp-na-graphql-preview.contentstack.com</li>
 </ul>
 </li>
</ul>
 
<blockquote>
 Note: If you are using framework which does strong caching like NextJS, then add no caching in fetch request like cache: "no-store" otherwise live preview might not work properly.
</blockquote>
<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; const graphqlUrl = new URL( `https://graphql.contentstack.com/stacks/${CONTENTSTACK_API_KEY}?environment=${CONTENTSTACK_ENVIRONMENT}`, ); const GRAPHQL_HOST_NAME = "graphql.contentstack.com"; const LIVE_PREVIEW_HOST_NAME = "graphql-preview.contentstack.com"; function getHeaders() { const headers = new Headers(); headers.append("Content-Type", "application/json"); headers.append("access_token", CONTENTSTACK_DELIVERY_TOKEN); return headers; } const gqlRequest = async (gql) =&gt; { const hash = ContentstackLivePreview.hash; const headers = getHeaders(); if (hash) { headers.append("live_preview", hash); headers.append("preview_token", CONTENTSTACK_PREVIEW_TOKEN); graphqlUrl.hostname = LIVE_PREVIEW_HOST_NAME; } else { graphqlUrl.hostname = GRAPHQL_HOST_NAME; } const res = await fetch(graphqlUrl.toString(), { method: "POST", headers: headers, body: JSON.stringify({ query: gql, }), cache: 'no-store', }); return res; }</pre>




<h3>Configure Live preview Across Pages - CSR Powered website</h3>
ContentstackLivePreview.onEntryChange()&nbsp;method executes when an entry content is being changed, inside this method, you can add logic to fetch preview content.&nbsp;&nbsp;<pre>import React, { useEffect, useState } from "react"; import ContentstackLivePreview from "@contentstack/live-preview-utils"; const updateData = () =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;const fetchedData = gqlRequest(query); &nbsp;&nbsp;&nbsp;&nbsp;setData(fetchedData); }; React.useEffect(() =&gt; { &nbsp;&nbsp;&nbsp;ContentstackLivePreview.onEntryChange(updateData); }, []);</pre>

In the above example
<ul>
 <li>updateData()&nbsp;function is responsible for fetching new data and updating the state.</li>
 <li>ContentstackLivePreview.onEntryChange(updateData) registers the updateData function to be called whenever an entry is updated, it&nbsp;fetches the draft/preview content and updates the component's state with setData&nbsp;i.e.&nbsp;data is being updated and re-rendered&nbsp;on every change happening in the entry.</li>
</ul>

<script src="https://cdn.jwplayer.com/players/vxNczpsk-b769H14u.js"></script>

<h3>Configure Live Preview Across Pages - SSR Powered website</h3>
Pass query parameters from the URL into the setConfigFromParams() method of Live Preview which extract and store the hash, making it accessible via ContentstackLivePreview.hash. To achieve this, create a middleware and execute the following command:<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.setConfigFromParams(searchParams) // You could use objects provided by the frameworks as well.</pre>

<script src="https://cdn.jwplayer.com/players/RZt9lymL-b769H14u.js"></script>

Live Preview - GraphQL API

<h3>Live Edit Tags</h3>Live edit tags enable you to quickly navigate to&nbsp;the field that holds the website content shown in the Live Preview pane. By clicking the "Edit" button next to a content block in the preview pane, you'll be taken to the corresponding field within the entry. If the field contains a reference to another entry, you will be directed to the editor page of that referenced entry. The&nbsp;<a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/about-javascript-live-preview-utils-sdk">Live Preview Utils SDK</a>&nbsp;searches for the elements which contain the edit tags referred to as&nbsp;data-cslp. Edit tags contain the information about where your field exists in the entry. The structure of the&nbsp;edit tag&nbsp;(field location in the entry) you can pass against the&nbsp;data-cslp&nbsp;attribute is as follows:<pre>{content_type_uid}.{entry_uid}.{locale}.{field_uid}</pre>Here's a sample field path<pre>home.blt80654132ff521599.en-us.modular_blocks[0].teaser.heading</pre> Note: If the field is nested within another complex field, such as Modular Blocks, provide the field path as follows:&nbsp;{modular_block_field_UID}.{block_UID}.{field_UID}. For a website built using Contentstack's&nbsp;<a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/about-javascript-delivery-sdk/">JavaScript Delivery SDK</a>, you can use the&nbsp;addEditableTags()&nbsp;method to automatically generate the edit tag for you.&nbsp;<h3>Import the addEditableTags() method</h3> Install Contentstack Utils from npm using the following command:<pre>npm i @contentstack/utils</pre>import&nbsp;addEditableTags using the following commands:&nbsp;<pre>// utils.js import {addEditableTags} from "@contentstack/utils”</pre><h3>Generate edit tags for entry content</h3>To generate entry content, navigate to the code responsible for delivering the entry content. After retrieving data from Contentstack, the resulting entry object is passed to the addEditableTags() method to add edit tags to the previewed entry content.<pre>addEditableTags(entry, content_type_uid, tagsAsObject, locale)</pre>here ,&nbsp;<ul><li>entry:&nbsp;entry object you fetched from Contentstack SDK/API call</li><li>content_type_uid:&nbsp;is the unique ID of the current entry’s content type</li><li>tagsAsObject:&nbsp;By default,&nbsp;tagsAsObject&nbsp;is set to&nbsp;false, and it appends&nbsp;data-cslp&nbsp;in the form of a string cause as follows:</li></ul><pre>'data-cslp=path.to.field'</pre><ul><li>If&nbsp;tagsAsObject&nbsp;is set to&nbsp;true, the&nbsp;data-cslp&nbsp;attribute is returned in object format as follows</li></ul><pre>{'data-cslp: path.to.field'}</pre><ul><li>locale: The locale code used to fetch entry. </li></ul>The&nbsp;addEditableTags() method adds a new key-value pair at every level of your&nbsp;entry result object. where,<ul><li>Key is denoted by $&nbsp;sign</li><li>Value is an object which contains the field name and data-cslp details.</li></ul>For example, if you pass the following object to&nbsp;the&nbsp;addEditableTags&nbsp;method<pre>{ "heading": "Exploring the Vineyards: A Journey through Wine Country", "description": "As a seasoned traveler, you understand the allure of exploring new destinations. One such destination that has been gaining popularity is the wine country.", "cta": { "text": "Learn More", "url": "/explore-the-vineyards" }, }</pre> The result returned will look like:<pre>{ "heading": "Exploring the Vineyards: A Journey through Wine Country", "description": "As a seasoned traveler, you understand the allure of exploring new destinations. One such destination that has been gaining popularity is the wine country.", "cta": { &nbsp; "text": "Learn More", "url": "/explore-the-vineyards", "$": { "text": { "data-cslp": "text_banner.blt6fb37c46b9d17365.cta.text" }, "url": { "data-cslp": "text_banner.blt6fb37c46b9d17365.cta.url" } } }, "$": { "heading": { "data-cslp": "text_banner.blt6fb37c46b9d17365.heading" }, "description": { "data-cslp": "text_banner.blt6fb37c46b9d17365.description" }, "cta": { "data-cslp": "text_banner.blt6fb37c46b9d17365.cta" }, } }</pre><h3>Generate Edit tags example - REST</h3>Once you have retrieved data using the Contentstack, utilize the addEditableTags() function. Pass the retrieved entry into this function to incorporate edit tags into the draft entry content effectively. The following example is using&nbsp;JavaScript Delivery SDK to fetch content.<pre>// utils.js export const getEntryByUrl = async (contentTypeUid, locale, entryUrl) =&gt; { try { const result = Stack.ContentType(contentTypeUid) .Query() .language(locale) .where('url', `${entryUrl}`) .toJSON() .find() addEditableTags(result[0][0], contentTypeUid, true, locale) const data = result[0][0] return data } catch (error) { &nbsp; throw error &nbsp; } }</pre><h3>Generate Edit tags example - Graph QL</h3>Locate the section of your website's code responsible for fetching content from Contentstack. To ensure proper functionality of live editing, it's crucial to retrieve&nbsp;system system {uid}&nbsp;from GraphQL at the root of the query and&nbsp;system {uid, content_type_uid}&nbsp;for all references.Here is an example of the&nbsp;gqlRequest()&nbsp;method for your reference: <pre>export const getHeaderRes = async (): Promise =&gt; { const gql = ` query HeaderQuery { all_header { total items { title logoConnection { edges { node { url filename } } } navigation_menu { label page_referenceConnection { totalCount edges { node { ... on Page { title url system { uid content_type_uid } } } } } } notification_bar { show_announcement announcement_text { json } } system { uid } } } } `;</pre> Next, include _content_type_uid and uid alongside system, and assign the values from system.content_type_uid to _content_type_uid&nbsp;&nbsp;and system.uid to uid:<pre>const transformed = { ...header, logo: header.logoConnection.edges[0].node, navigation_menu: header.navigation_menu.map((item: any) =&gt; ({ ...item, page_reference: item.page_referenceConnection.edges.map((edge: any) =&gt; ({ ...edge.node, uid: edge.node.system.uid, _content_type_uid: edge.node.system.content_type_uid, })), })), uid: header.system.uid, notification_bar: { ...header.notification_bar, }, };</pre> Include data-cslp&nbsp;parameters in transformed response by using addEditableTags() method from @contentstack/utils<pre>addEditableTags(transformed, "header", true);</pre><h3>Set up the Live Preview Utils SDK</h3>To navigate to the correct stack it is required to provide&nbsp;the stackDetails object parameter to the live preview initialization method.<pre>ContentstackLivePreview.init({ ... stackDetails: { apiKey: "your api key", environment: "your environment", branch: "your branch" }, clientUrlParams: { host: "app.contentstack.com",// NA region host }, })</pre> Note: The host value is&nbsp;based on the region where your stack is located<ul><li>US (NA) region host: app.contentstack.com</li><li>EU region host: eu-app.contentstack.com</li><li>Azure NA region host:&nbsp;azure-na-app.contentstack.com</li><li>Azure EU region host:&nbsp;azure-eu-app.contentstack.com</li><li>GCP NA region host:&nbsp;gcp-na-app.contentstack.com</li></ul><h3>Configure live edit tags across webpages</h3><h5>For pure HTML tags (tagsAsObject:false) example:&nbsp;</h5>To add edit tags to your website's HTML:<ol><li>Find the HTML Section: Locate the part of your HTML code where you want to include edit tags.</li><li>Add Edit Tags: To access an edit tag, fetch the path to the field in your entry data and add a dollar sign ($) before the last field in the path.<ul><li>For instance, if the path to your data is data.description.height, the edit tag should be data.description.$.height.</li></ul></li></ol>Example snippet:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9561e0d5f6257c5e/67e1c8296678fd4011aeaa06/ImplementingLivePreview_L7_img-1.png" alt="ImplementingLivePreview_L7_img-1.png" height="auto"/><h5> </h5><h5>React-based Components (tagsAsObject:true) example:&nbsp;</h5>For React-based Applications&nbsp;you can set&nbsp;tagsAsObject to&nbsp;true, by enabling this you will receive edit tag details in object format.&nbsp;You need to destructure the object while passing it within the JSX element.Let's add edit tags to following JSX snippet:&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3ff4792d476ebc4/67e1c88d0b0fc52dadb4b1d4/ImplementingLivePreview_L7_img-2.png" alt="ImplementingLivePreview_L7_img-2.png" height="auto"/>After adding edit tags the above JSX will be:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfc04529a9ee43a32/67e1c8ade6ff22567b0d1756/ImplementingLivePreview_L7_img-3.png" alt="ImplementingLivePreview_L7_img-3.png" height="auto"/>

Live Edit Tags

<h3>What is&nbsp;Contentstack Google Chrome Extension?</h3>
The Contentstack Google Chrome Extension enables users to seamlessly transition from a live webpage to its corresponding entry in Contentstack.
When viewing a webpage powered by Contentstack, users with editing permissions will notice an edit button at the bottom right or left of the page. Clicking this button directs them to the corresponding entry in Contentstack.
This feature significantly reduces the time and effort needed to locate specific entries within Contentstack’s web application. It also optimizes the editing experience by allowing users to update content instantly.
 
Steps to setup Chrome Extension:
<ol>
 <li>Install extension from <a href="https://chrome.google.com/webstore/detail/contentstack/kliacmaffhaakhphcelpjcmienmikgoa">Contentstack Google Chrome Extension</a>.</li>
 <li>In the pop-up enter stack and domain&nbsp;settings and button settings. Add the Stack API Key,&nbsp;Hosted Domain Name or Host of your website and select the Region of your organization. 
 <img asset_uid="blt7e91b21db8560d2a" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e91b21db8560d2a/67e1cb4c29f30c8409f8e1c0/ImplementingLivePreview_L8_img-1.png" alt="ImplementingLivePreview_L8_img-1.png" height="auto" />
 </li>
 <li>Add the following attributes to the body tag&nbsp;of you websites page:</li>
</ol>
data-pageref: Used to identify the entry UID of the current page data-contenttype: Used to identify the content type UID of the entry data-locale: Used to identify the local of the entry for the current page
Since you might need to configure these three parameters for each page (if there are more than one page in your website), consider creating a helper function and call it on every page.<pre>export const setDataForChromeExtension = (data: { entryUid: string, contenttype: string, locale: string }) =&gt; { document.body.setAttribute('data-pageref', data.entryUid) document.body.setAttribute('data-contenttype', data.contenttype) document.body.setAttribute('data-locale', data.locale) }</pre>


Alternatively you can add these attributes to div tag tag of your component in the website<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6eeb151ea083de4c/67e1cbf8848c63859acfd7b1/ImplementingLivePreview_L8_img-2.png" alt="ImplementingLivePreview_L8_img-2.png" height="auto" />

After setting this up you will be able to see a button on your webpage which on clicking redirects you to the corresponding entry in Contentstack. 

<script src="https://cdn.jwplayer.com/players/IgGPJf3M-b769H14u.js"></script>

Chrome Extension

<h3>Installing a training instance</h3>
The video below offers a step-by-step visual walkthrough of the process for setting up a training instance in Contentstack. It covers everything from signing up for a training instance to accepting your stack invitation and configuring your account. By the end of this guide, you’ll have your own training instance linked to your organization and stack. This environment will be available to you for 30 days, allowing you to explore and practice using Contentstack’s features. Whether you’re new to Contentstack or looking to enhance your skills, this training instance will give you hands-on experience in a real-world setup.

<script src="https://cdn.jwplayer.com/players/gpZI0u68-b769H14u.js"></script>

<h3>Setting up and Understanding Live Preview in CSR Mode</h3>
The video below provides a detailed, step-by-step visual walkthrough of setting up your stack and code base to enable Live Preview in Client-Side Rendering (CSR) mode. Throughout this course, it will guide you from the basic implementation of Live Preview in your Contentstack stack to the necessary code modifications for enabling Live Preview in a CSR website built with Next.js 14, running locally. It will explain the specific changes required in the code, the reasoning behind them, and how they impact the Live Preview functionality. By the end of this walkthrough, you’ll see exactly how Live Preview will look and work once everything is set up.

<script src="https://cdn.jwplayer.com/players/Q4EQkDSV-b769H14u.js"></script>

<h3>Setting up and Understanding Live Preview in SSR Mode</h3>
The video below provides a detailed, step-by-step visual walkthrough of setting up your stack and code base to enable Live Preview in Server-Side Rendering (SSR) mode. Throughout this course, it will guide you from the basic implementation of Live Preview in your Contentstack stack to the necessary code modifications for enabling Live Preview in a SSR website built with Next.js 14, running locally. It will explain the specific changes required in the code, the reasoning behind them, and how they impact the Live Preview functionality. By the end of this walkthrough, you’ll see exactly how Live Preview will look and work once everything is set up.
 
<blockquote>
 Note: In the SSR video we used a sample SSR app made in NextJS14 with Live Preview 2.0. This might differ from the one present in Sample Starter Apps.
 Sample Env For SSR:<pre>#create environment file name as .env.local #and place following configuration data. CONTENTSTACK_API_KEY=YOUR_API_KEY CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT # For live preview CONTENTSTACK_PREVIEW_TOKEN= CONTENTSTACK_APP_HOST=app.contentstack.com CONTENTSTACK_API_HOST=cdn.contentstack.io CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com CONTENTSTACK_LIVE_PREVIEW=true CONTENTSTACK_LIVE_EDIT_TAGS=true #site-map NEXT_PUBLIC_HOSTED_URL=http://localhost:3000 # Requires host url for sitemap. Localhost:3000 is set as default value # For Live preview default value is to true to disable live preview set CONTENTSTACK_LIVE_PREVIEW=false # For live edit tags default value is set to false to enable live edit tag set CONTENTSTACK_LIVE_EDIT_TAGS=true # For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com # For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com # For setting custom host add CONTENTSTACK_API_HOST=for(NA: cdn.contentstack.io, EU: eu-cdn.contentstack.com)</pre>
</blockquote>

<script src="https://cdn.jwplayer.com/players/IAemzpqv-b769H14u.js"></script>

Comprehensive guide to setting up CSR and SSR for Live Preview

<h3>Limitations of Live Preview</h3> <ul><li>Incompatibility with websites using third-party website builders or CMS for HTML generation.</li><li>Previewing an individual component is only possible when it is referenced in a page entry.</li><li>Lack of compatibility with native mobile applications.</li><li>Restrictions on previewing content based on user role permissions for accessing entries, specific environments, and languages.</li><li>Requirement for websites to be Iframe-compatible to prevent CORS (Cross-Origin Resource Sharing) errors during preview.</li></ul>

Limitations of Live Preview

<h3>Additional Resources
 </h3><ul><li>Read the Contentstack Docs about <a href="https://www.contentstack.com/docs/developers/set-up-live-preview">Live Preview</a></li><li>Live Preview <a href="https://www.contentstack.com/docs/faqs#live-preview-faqs">FAQs</a></li><li><a href="https://www.contentstack.com/docs/developers/sample-apps">Starter Apps </a>which includes Live Preview implementation</li><li>Live Preview <a href="https://www.contentstack.com/blog/product-updates/live-preview-paves-the-way-for-the-future">Blog</a></li><li>Academy Playground <a href="https://github.com/contentstack/contentstack-academy-playground">Github Repo</a></li></ul>

Additional Resources and References

Implementing Live Preview

Course_ImplementingLivePreview.jpg

About Personalize

Creating a Personalize Project and Experiences

Working with Attributes

Creating Audiences

Creating Events for A/B Tests

Adding Audiences to Experiences

Working with Entry Variants

A/B Testing and Audience Impersonation

In the&nbsp;Personalize Foundations&nbsp;course, you will explore the essentials of delivering tailored content to your audience through Contentstack's personalization features. The course covers the challenges of personalization, such as scalability and complexity, and presents a solution that balances simplicity and flexibility. You'll learn how to set up projects, configure segmented experiences, run A/B tests, and leverage attributes and audiences to deliver the right message at the right time. With practical guidance on creating dynamic user experiences, this course aims to improve engagement, conversions, and customer loyalty through effective personalization.

Learn the fundamentals of Contenstack Personalize

Personalize Foundations

Personalize_Foundations_Thumbnail.jpg

The Profile

Lytics 101: Common Schema

Common Schema

Lytics 101 Course Thumbnail

Lytics 101: Scoring Intro

Scoring Intro

Behavioral Scores

Interest Scores

Audience Membership

Custom Modeling

Welcome to Lytics 101! This course is your starting point for mastering the fundamentals of customer data and profiles in Lytics. We’ll explore how to build rich, real-time profiles, uncover actionable insights, and leverage powerful tools like behavioral scores, interest signals, and dynamic audiences. By the end of this course, you’ll have the foundation needed to personalize engagement and make data-driven decisions with confidence. Let’s get started!

Lytics 101

thumb-test.png

<h2>What is Automate?</h2>Automate is a user-friendly visual workflow builder designed for business users and developers. It empowers you to effortlessly create and manage complex, multi-step processes through intuitive clicks instead of delving into code. This simplification streamlines the integration of the Contentstack platform&nbsp;into your composable architecture, alleviating the associated technical complexities. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf9681be1b6d35416/6625c430700d6cafe6a666b9/AH-image1.png" alt="AH-image1.png" height="auto"/>When someone opts for a headless CMS, they embrace the concept of "composing" a best-of-breed solution for themselves. Composability revolves around the idea of "plug-and-play," but not all competitors in the market offer true composability. This is where Automate sets itself apart.While other headless CMS competitors may provide some degree of automation, their automation is often limited to their CMS only.&nbsp;Contentstack's Automate extends its capabilities across the composable marketplace beyond the CMS.In other words, Automate is the first-ever automation solution that seamlessly integrates and functions across the composable stack! It empowers users to automate tasks within Contentstack's CMS and throughout their entire digital experience ecosystem. By leveraging Automate, users can create dynamic workflows while automating publishing, approvals, archiving, and other content operations without needing custom development. Its intuitive visual workflow builder and pre-built "recipes" enable users to streamline their content operations, regardless of technical expertise, efficiently.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt190acdddc8aac224/6625c4fb210d90d2483a3240/AH-image2.png" alt="AH-image2.png" height="auto"/><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta8ff7ac243b34016/6625c57424e1812b95acc90a/AH-image3.png" width="auto" alt="AH-image3.png" height="auto" max-width="auto" style="max-width: auto;width: auto;height: auto;"/><h2>Examples</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf12e36182ffa4624/6625c5afc9de46bfffd472c6/AH-image4.png" alt="AH-image4.png" height="auto"/><h3>Example Use Cases:</h3>Content Enrichment: When content goes into a workflow stage, it executes an Automation to fetch information from external systems to write back to Contentstack. Rapid Prototyping: When you have an idea for a new process or concept, you can play around with it quickly in Automate by pointing and clicking to connect the APIs. Workflow Orchestration: With Automate, you can expand your content lifecycle to define events across the entire business process, not just inside Contentstack, such as marketing campaigns or newsletters.<h3> Simple Automation Script</h3>Let's say you have a blog website and want to automate the publishing process of new blog posts.&nbsp;Your workflow for Automate could look like this:<ol><li>Trigger:&nbsp;When a new entry is created in the "Blog" content type.</li><li>Condition:&nbsp;Check if the blog post's author is in an "Editor" role.</li><li>Action:&nbsp;If the condition is met, automatically set the "Status" of the blog post to "Review."</li><li>Notification:&nbsp;Send an email notification to the "Reviewers" group to review the new blog post.</li><li>Review and Approval:&nbsp;The reviewers can review the blog post, make any necessary changes, and approve it for publishing.</li><li>Action:&nbsp;If the blog post is approved, set the "Status" to "Published."</li><li>Action:&nbsp;If the blog post is rejected, set the "Status" to "Draft" and notify the author for revisions.</li></ol>With this workflow in place, whenever a new blog post is created, the Automate will automatically move the content through the different stages, notify the relevant users, and update the status based on the reviews and approvals.This automation can save time, reduce manual errors, and ensure a smooth content publishing process. Contentstack's Automate empowers users to design and implement customized workflows, tailoring them to meet their organization's specific content management requirements.Another example of an&nbsp;event&nbsp;is when a&nbsp;content entry&nbsp;is&nbsp;published&nbsp;or&nbsp;saved. When an&nbsp;event&nbsp;is triggered, we can use an&nbsp;Automate Connector&nbsp;to integrate with an external platform and perform an&nbsp;action&nbsp;using content from Contentstack. Pre-built&nbsp;Automate Connectors&nbsp;make setting up and configuring the integrations very easy. This course will show many examples of using these&nbsp;Automate Connectors&nbsp;to create integrations with search platforms, email systems, and commerce. <h3>Three reasons to use Automate</h3><ol><li>Integrate apps &amp; tools faster.Reduce integration time with an intuitive visual workflow builder that enables teams to connect Contentstack's CMS to the rest of the tools in their composable stack--all with clicks, not code.- Empower any user to create integrations with an easy-to-use visual editor - Execute complex actions defined by custom event triggers - Leverage pre-built “recipes” to get started quickly - Eliminate costly mistakes &amp; middleware</li><li>Eliminate the headache and costs associated with developing, hosting, and maintaining middleware by managing your integration solutions in one place.- Reduce complexity and increase efficiency by managing all your integrations in one centralized location. - Save money by removing the costs of hosting and managing middleware infrastructure. - Simplify your tech stack by eliminating the need for middleware development. - Streamline content &amp; development operations</li><li>Level up your content ops game and streamline content governance with advanced features that automate content workflows and provide greater visibility and control.- Automate publishing, approvals, archiving, and other content creation workflows. - Push content changes to all of your digital experience channels at once. - Assign advanced permissions and access controls for enterprise-level content governance.</li></ol>Automate ability to traverse the composable stack eliminates the need for costly middleware and offers unparalleled flexibility and efficiency. It opens up new possibilities for organizations to enhance their content operations, achieve faster time-to-market, and unlock the full potential of their digital experience stack.

What is Automate

<h2>Creating a Project in Automate</h2>
When you&nbsp;create a project&nbsp;in Automate within Contentstack, it means you are setting up a dedicated space to manage and execute your automation tasks.
By creating a project, you can automate various content-related tasks, reducing manual effort, improving efficiency, and ensuring consistency in your content management processes.
<h3>Steps to Create a 'New Project' in Automate</h3>1. Log in to your Contentstack account and navigate to the Automate section from the left navigation panel. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt29d01db612819a0b/6648ba4c16e6bf37bb590c44/automate-section.png" alt="automate-section.png" height="auto" />
 2. Click on the'New Project' button to create a new project.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1a56786c25015b54/6648bb616d705597e74d9090/new-project.png" alt="new-project.png" height="auto" /> 3. This opens a dialog box where you can provide a name and description(as optional) for your project. This helps you identify and organize your automation tasks effectively. 4. Click on the&nbsp;'Create'&nbsp;button. 5. After successfully creating the project, you can start building an&nbsp;automation.
<h2>Creating an Automation</h2>Creating a&nbsp;new automation&nbsp;inside a project in Contentstack's Automate allows you to define and set up specific automated tasks or workflows to streamline your content management processes.&nbsp;It helps you set up specific steps that will be performed based on the specified conditions. Once you define these steps, Contentstack Automate will run through the designated steps.
1. Navigate inside the previous&nbsp;project that you created and click on the 'New Automation' button.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt55529f56aa4828f0/6648bc25d4d02e992a2eab6d/create-project.png" alt="create-project.png" height="auto" /> 2. This opens a dialog box where you can provide a name and description&nbsp;(optional) for your automation.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5852cf6e9447a81d/6648bd9352619d711ea90a13/new-automation-dialog.png" alt="new-automation-dialog.png" height="auto" /> 3. Click on the&nbsp;'Create' button. 4. After successfully creating the automation, you can start configuring the trigger&nbsp;and action steps.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte4704e39fdbc450e/6648bdef5fd9af818c70e24e/trigger-action-sterps.png" alt="trigger-action-sterps.png" height="auto" />

<h2>Limitations of Automate</h2>
<ul>
 <li>
 By default, each organization will be enrolled in the Explorer Plan, which is included at no cost and allows up to 200 executions per month (200 soft cap and 200 hard cap).
 </li>
 <li>
 The maximum number of&nbsp;projects&nbsp;allowed per organization is&nbsp;50.
 </li>
 <li>
 The maximum number of&nbsp;automations allowed per project&nbsp;is&nbsp;50.
 </li>
 <li>
 The maximum number of&nbsp;steps allowed per automation&nbsp;is&nbsp;15.
 </li>
 <li>
 The&nbsp;maximum number of loops per Repeat Path is 100.
 </li>
 <li>
 Currently, organization members can only view and edit their own projects.
 </li>
 <li>
 Currently, organization members can only view and edit their own projects.
 </li>
 <li>
 There is no support for nesting within Conditional Path and Repeat Path steps.
 </li>
 <li>
 The Pause and Response action connectors cannot be used within Conditional Path and Repeat Path steps.
 </li>
 <li>
 Automate is a plan-based feature, and the number of executions allowed depends upon the Automate pricing plan that is activated for a particular organization.
 </li>
 <li>
 Organizations that have upgraded to a paid plan will have a soft cap for executions (when reaching this threshold they will be notified by email), and a hard cap that is 5x the number of the soft cap. After the organization hits the hard cap, automations will be temporarily disabled for that month.
 </li>
</ul>
<h2>Further Reading</h2>
<ul>
 <li>
 <a href="https://www.contentstack.com/docs/developers/automation-hub-guides/create-an-automation/">More about 'Create a New Automation'</a>
 </li>
 <li>
 
 <div><a href="https://www.contentstack.com/docs/developers/automation-hub-guides/edit-automation-details/">Edit an existing Automation</a></div>
 
 </li>
 <li>
 
 <div><a href="https://www.contentstack.com/docs/developers/automation-hub-guides/delete-automation/">Delete an existing Automation</a></div>
 
 </li>
 <li>
 
 <div><a href="https://www.contentstack.com/docs/developers/automation-hub-guides/limitations-of-automation-hub">Automate Limitations - Review maximum number of projects, automations and steps</a></div>
 
 </li>
</ul>

Creating a New Project

First Automate Project Walkthrough

<h1>Exercise Review: Your First Automation Hub Project</h1>1. The Automation Hub Project contains one or more automations. The configuration settings and authorizations are shared within an Automation Hub project.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdfe3ff2a3c263cbe/6648c1205c24835191bc345b/er-create-automation.png" alt="er-create-automation.png" height="auto"/>2.&nbsp;The Contentstack Trigger Connector allows us to listen and react to events occurring within the Contentstack UI. For example, the publish entry or save entry events.&nbsp;<img asset_uid="blt84323b82694e0c34" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt84323b82694e0c34/6648c1a5d4d02eecc82eab76/config-trigger.png" alt="config-trigger.png" height="auto"/><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt66a6986f45bfa9df/6648c202acadaf48b07282dc/trigger-types.png" alt="trigger-types.png" height="auto"/>3. The Action step receives the JSON from the Entry in the event and can access the properties of the Entry. &nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7209e595367da050/6648c24e0b508a7d34dcfc62/test-trigger.png" alt="test-trigger.png" height="auto"/><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd7d3aaaee993018a/6648c2613092d0864a63f98d/test-trigger2.png" alt="test-trigger2.png" height="auto"/>4. Access the content fields of the Entry using the 'body.data.entry' property in the Body of the email. Other connectors allow similar access to the Entry content in the Action step.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt07960e4f683f1151/6648c2c24ac76e5e0740f842/email-automate.png" alt="email-automate.png" height="auto"/>

Exercise Review: Your First Automation Hub Project

Settings & Options

<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt13fb0843f8d32f85/6648dc36dda14b1dbfdff5d7/types-of-triggers.png" alt="types-of-triggers.png" height="auto"/>In Contentstack,&nbsp;Triggers are conditions or invocation points that begin, or "fire off", an Automation when an event occurs.&nbsp; Events supported include: actions within Contentstack such as a Save or Publish event,&nbsp; scheduled event, receiving a webhook call from an external platform, or deploying an app with the Contentstack Launch product.&nbsp; Triggers and events help automate a business workflow to accomplish required tasks.In the real world,&nbsp;Triggers are like sensors or switches that detect specific events or conditions and initiate a series of actions or workflows in response. They act as the starting point for automation, signaling when something specific happens and prompting the system to perform predefined tasks.<h2>What are Triggers?</h2><ul><li>First, let's look at an analogy.&nbsp; Imagine a scenario with a high-tech security system installed in your house. This system includes motion sensors, door sensors, and cameras, all connected to a central control panel. These are all "triggers" that wait for motion. Then, they send a signal with information about the motion (photo / time / device ID) to the control panel, which serves as the hub for automation and security.&nbsp; After the hub receives the trigger notification, it can perform a series of actions customized by the type of information received - for example, play a small sound for a door sensor or send a video to the cloud for a camera sensor.</li><li>In this scenario, triggers in the Automation Hub can be compared to the various sensors placed throughout your house. When a trigger event occurs, such as a motion sensor detecting movement or a door sensor detecting an unauthorized entry, it sends a signal to the central control panel.</li><li>For instance, if a trigger event is defined to activate when a new article is published, it will automatically initiate a series of actions like sharing the article on social media platforms, sending notifications to subscribers, or updating relevant databases. The trigger serves as the starting point for these actions, ensuring that the appropriate automation processes are set in motion based on the defined events.</li></ul>Triggers in Automation Hub detect specific events or conditions within Contentstack. These events can range from content publishing, content updates,&nbsp; API calls, or scheduled time intervals. When a trigger event occurs, it activates the automation workflow associated with it.<h2>Types of Connection Triggers</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt973d0a0974d50e66/6648dc9f0bbc6203ad7fabbf/types-of-triggers.png" alt="types-of-triggers.png" height="auto"/><ol><li>Contentstack:&nbsp;This connector allows you to create triggers based on content-related events, such as creation, update, publish, or delete actions within Contentstack itself.</li><li>HTTP:&nbsp;The HTTP connector allows you to create triggers based on incoming HTTP requests from external services or applications. You can configure webhooks or receive notifications from external systems.</li><li>Launch:&nbsp;The Launch connector enables you to create triggers based on events within Contentstack's Launch environment. The launch is a product by Contentstack that provides a robust way to manage and deliver content to various digital channels.</li><li>Scheduler:&nbsp;The Scheduler connector enables you to create triggers based on a predefined schedule or time interval. You can set up triggers to execute actions at specific times or recurring intervals.</li></ol>Each connector provides specific functionalities to trigger actions based on different events or conditions within Contentstack or external systems. We will explore them in detail very soon.

Understanding Triggers

Using Trigger Connectors

<h1>Understanding Connectors&nbsp;</h1>Connectors in Automation Hub understand different systems' specific requirements and capabilities, whether content management systems, marketing automation platforms, or third-party services.<h2>What are Connectors?</h2>Connectors&nbsp;are like bridges that connect different systems and enable smooth communication and data flow between them. They act as intermediary components that facilitate the exchange of information, triggering actions, and automating processes.<h2>Example</h2><ul><li>Imagine you have a large city with multiple transportation systems like roads, railways, and airports. Each system operates independently and has its own unique functions and rules. However, for efficient transportation and logistics, you need a way to connect these systems and enable the smooth movement of people and goods.</li><li>In this scenario, connectors in the Automation Hub are like well-designed interchanges, terminals, and transfer points that ensure a seamless flow of traffic between the different transportation systems. They understand the needs and protocols of each system and provide a standardized interface for the vehicles to enter, exit, and transfer between them.</li></ul>

Using Connectors

Action Connectors

<h2>Automate Connectors</h2>Automation Hub&nbsp;connectors&nbsp;are third-party applications that you can use with Automation Hub to automate certain tasks. Here are a few connectors you can set up quickly and use in an automation.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt450a11a187293158/6648df3f015b1c5aaa56ef88/automate-connectors.png" alt="automate-connectors.png" height="auto"/>Here are some examples of actions you can perform in Contentstack's Automation Hub:<ul><li>Update Content:&nbsp;Imagine you have a library, and when new books arrive, your librarian automatically updates the catalog with the book's information, including its title, author, and genre. Similarly, the "Update Content" action in Contentstack automatically modifies specific fields or attributes of a content entry when triggered.</li></ul> <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd5d421643619410c/6648dfa60a0de6ffe5314ce9/update-entry.png" alt="update-entry.png" height="auto"/>Publish Content:&nbsp;Think of a newspaper editor who, upon finalizing an article, presses a button to send it for printing and distribution to the subscribers. In Contentstack, when triggered, the "Contentstack Action - Publish Content" automatically publishes content to your website, mobile app, or any other digital channels.&nbsp; For example, the Trigger may be Entry Update, so every time an Entry is saved. the Automation Hub re-publishes the content to an 'Instant Preview' frontend site.&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3fb4550b9d2c404f/6648dfe34ac76e417540f869/publish-entry.png" alt="publish-entry.png" height="auto"/>Notify Team:&nbsp;Consider a fire alarm system in a building that detects smoke or fire and immediately alerts the building occupants with loud sirens and flashing lights. Similarly, the "Email by Automation Hub" and "Slack" actions in Automation Hub send notifications or alerts to designated team members, such as sending an email or a message in a collaboration tool like Slack, when a trigger event is detected.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt01249a627ac710d3/6648e00d0a0de65c88314ced/communicate.png" alt="communicate.png" height="auto"/>Create Task:&nbsp;Picture a project manager who wants to create a Jira task when an item is assigned in Workflow.&nbsp; When an Entry is set to a workflow stage in Contentstack, an Automation is triggered to create a new Jira task.&nbsp; In Contentstack, when triggered, the&nbsp;<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/jira/">"JIRA" action</a>&nbsp;generates new tasks or assigns tasks to team members in Jira and works together with the content workflow.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt472505ba83ebeb1f/6648e04916e6bf7142590c5b/choose-connector.png" alt="choose-connector.png" height="auto"/><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2bd9a0b07a06bf3b/6648e0674284321e941989a0/connector-detail.png" alt="connector-detail.png" height="auto"/>

Automate Connectors

<h2>Types of Action Connectors</h2>In Contentstack's Automation Hub, several types of action connectors are available. These action connectors allow you to define specific tasks or operations to be executed when a trigger event occurs.&nbsp; &nbsp;Each connector represents a specific integration or service that can perform actions in your automation workflows.Each connector receives JSON from the previous steps and can use a&nbsp;<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/transform">Transform connector</a>&nbsp;to massage or directly consume the data. If you want to connect to a service not listed here, then the&nbsp;<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/http-action">HTTP Action</a>&nbsp;can send JSON to any 3rd-party web service.<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors">Here are the types of action connectors in Contentstack's Automation Hub</a>:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt61d6e1debdf89919/6648e12516e6bf4543590c61/types-of-connectors.png" alt="types-of-connectors.png" height="auto"/><ol><li>CMS:<ul><li>Contentstack Action:&nbsp;Performs content-related actions such as&nbsp;'Get All Content Types,' 'Get All Entries,' 'Delete an Entry,' 'Add Items to a Release,' 'Clone a Release,' 'Create a Release,' 'Delete Items from a Release,' 'Deploy a Release,' 'Get All Items in a Release,' 'Get All Releases,' 'Get Single Release,' 'Get User Information,' 'Create an Entry,' 'Entry Workflow Stage,' 'Localize an Entry,' 'Publish an Entry,' 'Publish an Asset,' 'Unpublish an Entry,' 'Get Single Entry,' 'Update Entry.'</li></ul></li><li>CI/CD Platform:<ul><li>CircleCI,&nbsp;TravisCI:&nbsp;Integrates with CircleCI, TravisCI for continuous integration and delivery workflows.</li></ul></li><li>Communication:<ul><li>Email by Automation Hub:&nbsp;Sends emails as an action within Contentstack's Automation Hub.</li><li>Mailgun:&nbsp;Integrates with the Mailgun email service for sending emails.</li><li>PubNub:&nbsp;Integrates with the PubNub platform for real-time messaging and communication.</li><li>Pusher:&nbsp;Integrates with Pusher for real-time push notifications.</li><li>SendGrid:&nbsp;Integrates with SendGrid for sending emails.</li><li>Slack:&nbsp;Sends messages or notifications to Slack channels or users.</li><li>Twilio:&nbsp;Integrates with Twilio for SMS and voice communication.</li></ul></li><li>Artificial Intelligence:<ul><li>ChatGPT:&nbsp;Uses OpenAI's ChatGPT for AI-powered chatbot capabilities.</li></ul></li><li>Digital Asset Management:<ul><li>Cloudinary:&nbsp;Integrates with Cloudinary for digital asset management and manipulation.</li><li>Aprimo:&nbsp;Integrates with Aprimo's digital asset management platform.</li></ul></li><li>eCommerce:<ul><li>BigCommerce:&nbsp;Integrates with the BigCommerce eCommerce platform.</li></ul></li><li>FaaS (Function-as-a-Service):<ul><li>AWS Lambda:&nbsp;Executes serverless functions on the AWS Lambda platform.</li></ul></li><li>Hosting:<ul><li>Launch:&nbsp;Performs actions within Contentstack's Launch environment.</li><li>Heroku:&nbsp;Integrates with Heroku for application hosting and deployment.</li><li>Netlify:&nbsp;Integrates with Netlify for static website hosting and deployment.</li><li>Vercel:&nbsp;Integrates with Vercel for static website hosting and deployment.</li></ul></li><li>Development:<ul><li>Code Block:&nbsp;Executes custom code or scripts as an action within Contentstack's Automation Hub.</li></ul></li><li>Database:<ul><li>Airtable:&nbsp;Integrates with Airtable, a collaborative database and project management tool.</li></ul></li><li>Messaging Queue:<ul><li>AWS SQS:&nbsp;Integrates with AWS Simple Queue Service for messaging and queuing capabilities.</li></ul></li><li>Notification Service:<ul><li>AWS SNS:&nbsp;Integrates with AWS Simple Notification Service for sending notifications to various endpoints.</li></ul></li><li>Project Management:<ul><li>Jira:&nbsp;Integrates with the Jira project management tool.</li></ul></li><li>Translation Platform:<ul><li>Smartling:&nbsp;Integrates with Smartling, a translation management platform.</li></ul></li><li>Search &amp; Discovery:<ul><li>Algolia:&nbsp;Integrates with Algolia for search and discovery capabilities.</li><li>Constructor:&nbsp;Integrates with Constructor for site search and search analytics.</li><li>Elasticsearch:&nbsp;Integrates with Elasticsearch for powerful search and indexing capabilities.</li></ul></li><li>Storage:<ul><li>AWS S3:&nbsp;Integrates with AWS Simple Storage Service for storing and retrieving files and objects.</li></ul></li><li>Storage:<ul><li>AWS S3:&nbsp;Integrates with AWS Simple Storage Service for storing and retrieving files and objects.</li></ul></li><li>Utility:<ul><li>Data Store:&nbsp;This helps you store keys and their corresponding values within a database that you can retrieve later. With the Data Store connector, you can also store and fetch the data stored during execution.</li><li>HTTP Action:&nbsp;This enables you to perform HTTP requests as an action within Contentstack's Automation Hub. You can send HTTP GET, POST, PUT, DELETE, or PATCH requests. This connector is valuable for integrating with external systems or triggering actions in other applications.</li><li>Pause:&nbsp;This lets you pause existing automation.</li><li>Transform:&nbsp;Helps in manipulating texts and numbers as required. It helps you to manipulate and structure data according to your needs. For example, suppose in the previous trigger; specific data is selected to be displayed. In that case, the action defined by the Transform connector can manipulate or change to meet your display requirements.</li><li>Response:&nbsp;Helps determine the status of your configured action. It notifies users about the success or failure of a configured action with a response.</li><li>RTE Formatter:&nbsp;Helps convert content within the JSON Rich Text Editor into HTML or text formats.</li><li>Utility:&nbsp;Helps to manage your automation workflow. With the wait action, you can put your automation on hold for some time before the following automation action runs. </li></ul></li></ol>

Types of Action Connectors

Automations in Marketplace

Using Trigger Conditions to Control an Automate Execution

Using Conditionals When Publishing to Production

Using the HTTP Connector with a Publish Event

Using HTTP Listeners

<h1>HTTP Listener</h1>The&nbsp;HTTP Listener&nbsp;connector allows you to create automated workflows to&nbsp;receive incoming HTTP requests&nbsp;and trigger specific actions based on the received data. This endpoint listens to incoming HTTP requests and processes them according to your workflow.&nbsp; An HTTP endpoint is provided that an external platform or external webhook can use and send JSON data to Automation Hub.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8c471a1cdcd30f3e/664947c35c248385cfbc34f9/http-listener2.png" alt="http-listener2.png" height="auto"/><h2>Example</h2>Here's an example to illustrate the use of the HTTP Listener connector:Let's say you have an e-commerce website, and you want to trigger an automation workflow whenever a new order is received through an API call.<ol><li>Set up the HTTP connector&nbsp;-<ul><li>In Automation Hub, select the "HTTP" connector.</li></ul></li><li>Configure the HTTP trigger -<ul><li>Configure the HTTP method (e.g., POST) trigger&nbsp;and define any required authentication or headers.</li><li>Define the specific endpoint or route corresponding to the URL generated for the order creation API call.</li><li>Set any required headers or parameters to match your API requirements.</li></ul></li><li>Define subsequent actions -<ul><li>Once the HTTP connector trigger receives the HTTP request, you can define subsequent actions in the workflow.</li><li>Add actions such as validating the order, updating inventory, sending confirmation emails, or integrating with other systems.</li></ul></li><li>Test and deploy the workflow -<ul><li>Test the workflow by simulating an API call to the defined endpoint and verifying that the trigger is activated.</li><li>Ensure that the subsequent actions in the workflow, such as order processing and system integration, are executed as expected.</li><li>Once tested, activate the workflow and&nbsp;be ready to process incoming API requests.</li></ul></li></ol>In this example, the HTTP connector acts as a trigger, allowing you to listen for incoming API calls and initiate the defined automation workflow. You can perform various actions within the workflow based on the received order data, such as updating databases, triggering notifications, or performing business logic.Using the HTTP connector as a trigger provides flexibility in integrating external systems or services with Contentstack's Automation Hub. You can easily automate processes, streamline data flows, and orchestrate complex workflows by leveraging the HTTP connector's ability to listen for incoming HTTP requests.

Understanding HTTP Listeners

<h1>Scheduled Jobs</h1>The&nbsp;Scheduler by Automate&nbsp;connector in Contentstack allows you to schedule and automate tasks or workflows at specific times or intervals. It acts as a trigger to initiate an automation workflow based on the defined schedule.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt63e0fdbddb2882fe/66494833342fb531a162ccc5/scheduled-jobs.png" alt="scheduled-jobs.png" height="auto"/>Let's consider a scenario where you want to send a daily email newsletter to your subscribers at a specific time using Contentstack's Automate:<ol><li>Set up the 'Scheduler by Automate' connector and trigger -<ul><li>In Automation Hub, select the 'Scheduler By Automate' connector.</li><li>Configure the scheduler trigger by specifying the Time Zone and Unix Cron Pattern.&nbsp;Specify the exact time or interval you want the automation workflow to be triggered.</li></ul></li><li>Define subsequent actions -<ul><li>Once the scheduler trigger activates the workflow, you can define subsequent actions.</li><li>Add actions to generate the email newsletter content, fetch subscriber data, and send personalized emails.</li></ul></li><li>Test and deploy the workflow -<ul><li>Test the workflow by manually triggering it or waiting for the scheduled time.</li><li>Verify that the workflow executes as expected, generating and sending the email newsletters to subscribers.</li><li>Once tested, activate the workflow and&nbsp;automate the daily email newsletter process.</li></ul></li></ol>In this example, the Scheduler by Automation acts as a trigger, allowing you to schedule the execution of a workflow at specific times or intervals. The automation workflow can perform various actions, such as generating dynamic content, fetching data from external sources, and sending emails to subscribers.Using Scheduler by Automation, you can streamline recurring tasks, automate time-based processes, and ensure consistent and timely execution of workflows within Contentstack's Automate.

Understanding Scheduler by Automate

<h1>Launch Connector</h1>The&nbsp;Launch&nbsp;connector&nbsp;is a feature that allows you to initiate deployments of websites hosted on the Contentstack-powered jamstack platform called "Launch." Whether your website's content is managed by a different CMS (headless or traditional), you can use Launch to quickly host such sites.&nbsp;You can easily trigger deployments by creating a new project in Launch and connecting it to your GitHub or GitLab repository. This seamless integration streamlines the deployment process for your websites, making it efficient and hassle-free.<h2>Launch Connector for Action</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdda2557e6e507603/66494908efc97a69cb4c0ac4/launch-connector.png" alt="launch-connector.png" height="auto"/>Let's consider an example where&nbsp;the team sets up a scheduled job to automatically deploy new code builds for your website at midnight every Sunday by&nbsp;using the Scheduled Jobs Trigger with Launch Action Connector:<ol><li>Set up the 'Scheduler by Automate' connector and trigger -<ul><li>In Automate, select the 'Scheduler By Automate' connector.</li><li>Configure the scheduler trigger by specifying the Time Zone and Unix Cron Pattern.&nbsp;Specify the exact time or interval you want the automation workflow to be triggered. Here, at midnight every Sunday.</li></ul></li><li>Define 'Launch Connector' action&nbsp;-<ul><li>Once the scheduler trigger activates the workflow, you define the Launch connector in the action.</li><li>This action deploys the build for the authorized and selected Launch project.</li></ul></li><li>Test and deploy the workflow -<ul><li>Test the workflow by manually triggering it or waiting for the scheduled time.</li><li>Verify that the workflow executes as expected, deploying the build to the set environment.</li><li>Once tested, activate the workflow&nbsp;and automate your website build deployment.</li></ul></li></ol>This approach proves beneficial as the team can confidently plan and execute updates without disrupting the website's live performance.<h2>Launch Connector for Trigger</h2><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1d6b0a82057555c3/664949670b508aef4fdcfd1e/launch-connector-for-trigger.png" alt="launch-connector-for-trigger.png" height="auto"/>Let's consider an example where we set up 'Launch as the trigger' for the automation. Whenever a deployment on Launch fails, the automation automatically sends an email notification to a designated group of users using the 'Email by Automate' action connector:<ol><li>Set up the 'Launch' connector and trigger -<ul><li>In Automate, select the 'Launch' connector.</li><li>Configure the 'Deployment' trigger where you select the event as&nbsp;'Deployment&nbsp;failed'&nbsp;for the selected Launch project.</li></ul></li><li>Define 'Email by Automate' action&nbsp;-<ul><li>Once the scheduler trigger activates the workflow, you define the 'Email by Automate' connector in the action.</li><li>This action will email the list of users(specified during the setup) when the Launch deployment fails.</li></ul></li><li>Test and deploy the workflow -<ul><li>Test the workflow by manually triggering it or deploying the Launch project.</li><li>Verify that the workflow executes as expected, deploying the build to the set environment.</li><li>Once tested, activate the workflow&nbsp;and automate your website build deployment status.</li></ul></li></ol>This example demonstrates how Automate can be used to proactively notify the team about deployment issues, allowing them to address and resolve any potential challenges promptly.

Launch Connector

<h2>Data Store Connector</h2>The Data Store connector in Automate provides a convenient way to store key-value pairs within the Contentstack database. These key-value pairs can be used to store any data you want to retrieve and use later in your automation workflows. The Data Store connector allows you to store data during the execution of automation and fetch it when needed.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt93f2a8b94bd49abf/66494a0f4ac76e5d8f40f8fc/data-store.png" alt="data-store.png" height="auto"/>Key Features of the Data Store Connector:<ol><li>Data Storage -&nbsp;The Data Store connector can store data as key-value pairs. Each pair consists of a unique key and its corresponding value. The data stored can be of any type, including strings, numbers, booleans, and even complex data structures like objects or arrays.</li><li>Data Retrieval -&nbsp;Once data is stored using the Data Store connector, you can retrieve it later within the same automation or across different workflow steps. This lets you pass data between different actions and conditions, making your automation more dynamic and versatile.</li><li>Persistent Storage -&nbsp;The data stored using the Data Store connector is persistently saved within the database. This means that even if the automation execution is paused or stopped, the data will still be available when the execution resumes.</li><li>Instance-Specific Data -&nbsp;The Data Store connector allows you to store and fetch data specific to the current instance of an automation execution. This enables you to manage data at the instance level and avoids conflicts or data interference between different executions of the same automation.</li></ol>Use Cases of the Data Store Connector:<ol><li>Configuration Management -&nbsp;You can use the Data Store connector to store configuration settings, such as API keys, credentials, or connection details, that need to be accessed by multiple actions or steps within automation.</li><li>Data Transfer and Transformation -&nbsp;The Data Store connector can transfer data between different automation steps. For example, you can store data in one step and fetch it later to perform transformations or calculations in subsequent steps.</li><li>State Management -&nbsp;If your automation involves multiple conditional branches or loops, the Data Store connector can help manage the automation's state by storing and updating relevant data as the automation progresses.</li><li>Error Handling and Recovery -&nbsp;The Data Store connector can store error messages or status flags during the execution of automation. This can aid in error handling and recovery strategies.</li></ol>In summary, the Data Store connector in Automate provides a flexible and efficient way to store and retrieve data within your automation workflows. It enables you to create more sophisticated and data-driven automations, enhancing efficiency and productivity in your processes.<h1>HTTP Action Connector</h1>An HTTP action connector is a utility connector that interacts with external services, APIs, or web endpoints using the Hypertext Transfer Protocol (HTTP). You can send HTTP requests (such as GET, POST, PUT, DELETE) to remote servers, receive responses, and potentially process or transform the data through this connector.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf8395252dca738e0/66494a5b0bbc628ea47fac08/http-connector.png" alt="http-connector.png" height="auto"/>Key Features of an HTTP Action Connector:<ul><li>HTTP Methods -&nbsp;Supports various HTTP methods like GET, POST, PUT, and DELETE, allowing you to interact with different parts of an API.</li><li>Request Configuration -&nbsp;You can configure headers, query parameters, request body, and other settings required for the API request.</li><li>Response Handling -&nbsp;Typically, you can extract data from the response, handle status codes, and parse the returned data (often in JSON or XML format).</li><li>Authentication -&nbsp;Supports various authentication mechanisms, such as API keys, OAuth tokens, or basic authentication.</li><li>Error Handling -&nbsp;Provides options to handle errors, retries, and timeouts to ensure robust interactions with the API.</li><li>Customization -&nbsp;Allows you to customize and manipulate the data before sending the request or after receiving the response.</li></ul>Use Cases for HTTP Action Connectors in Utility Connectors:<ol><li>Data Integration -&nbsp;You can use the HTTP action connector to fetch data from external sources like APIs and synchronize it with your Contentstack content. For example, automatically pulling data from a third-party system and updating content entries.</li><li>Third-Party Services -&nbsp;Integrate with third-party services like email platforms, messaging services, or social media APIs to trigger actions based on content changes.</li><li>Content Enrichment -&nbsp;Utilize external services to enrich your content. For instance, automatically tagging content with relevant keywords using a natural language processing API.</li><li>Webhooks: Receive and process data from external sources through webhooks. The HTTP action connector can parse and handle incoming webhook payloads.</li><li>Content Delivery: Trigger HTTP requests to deliver content to external systems. This could involve publishing content to a website or an external database.</li><li>Data Migration: Use the HTTP action connector to migrate content from one system to another by sending appropriately formatted API requests.</li></ol>In summary, An HTTP action connector is a tool in workflow automation platforms that lets you interact with external services via HTTP requests. In Contentstack Automate, it can help integrate data, trigger actions based on content changes, enrich content, manage webhooks, deliver content, and handle data migration.<h1>Utility Connector - Wait Action</h1>The Utility action connector helps to manage your automation workflow. With the wait action, you can put your automation on hold for some time before the following automation action runs.You can set up three actions: Wait, Continue Automation If, and Continue Repeat If.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1902cd2c8600e1b4/66494ade0bbc6207ac7fac0c/wait-action1.png" alt="wait-action1.png" height="auto"/><h2>Example: Wait connector in Repeat Path</h2>Let’s see a simple use-case of the Utility connector using Repeat Path.Wait action is useful while working with bulk data. Previously, if the number of API requests exceeded the defined limitation, the automation failed automatically due to rate limiting.In this example, we are sending bulk data through the HTTP action with a limitation of 5 API requests per second, and we will use the Wait action to delay the API request per second to create multiple entries in Contentstack. We will also see how the user receives an error message in the Execution Log section for exceeding the rate limit.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd87d2c9ea470f3bc/66494b00b2e852f9f0451976/wait-action2.png" alt="wait-action2.png" height="auto"/>For examples of every Utility option, please see the&nbsp;<a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/utility" target="_self">Automate Utility documentation</a>.<h2>Transform</h2>Transform does exactly what it sounds like - transforming data from one format to another. More specifically, it allows the developer to specify the JSON format that will be passed to a future Automation step and use the data and properties from Entries or other objects and properties available.For example, our external system expects a JSON object with a title, content property, and date. Using Transform, we can create a new JSON object with only 3 properties and fill in the data from Contentstack objects in the Automation.In the screenshot below, we are creating a new JSON object with a property called 'result' containing the value of the Entry's name field capitalized.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0b5daaf2141713c8/66494b574b531e4547c328ba/transform2.png" alt="transform2.png" height="auto"/><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8d241b3597b12963/66494b57015b1c360b56effa/transform1.png" alt="transform1.png" height="auto"/>

Utility Connectors

Use Case: Translation with ChatGPT

Automate is a user-friendly visual workflow builder designed for business users and developers. It empowers you to effortlessly create and manage complex, multi-step processes through intuitive clicks instead of delving into code. This simplification streamlines the integration of the Contentstack platform&nbsp;into your composable architecture, alleviating the associated technical complexities.Pre-requisites: 1. Account in Contentstack with access to a Stack as an Administrator or Developer. If possible, please create a new Stack to use only with the Partner Courses.2. A basic comprehension of the Contentstack platform, extensions, and integrations.3. Comfortable taking a screenshot or a movie of your screen. The free browser tool 'Loom' is one of many ways to do this.4. Contentstack Community account. If you do not have one, visit&nbsp;community.contentstack.com/&nbsp;and register for a new account. You can adjust your email notifications under your profile at&nbsp;https://community.contentstack.com/settings/general&nbsp;﹥ Settings.

Automate Fundamentals

Automate Foundations Thumbnail

Automate Foundations

Search 2.0

This video describes the search capabilities within the Contentstack CMS

Learn how to search in Contentstack

Using Search Explainer Thumbnail

Using Search

Master the art of searching with Contentstack Academy's guide and learn to efficiently find and filter content with advanced search techniques.

Cs Intro-to-cs-teams-and-taxonomy V1 4.19.24

A small group demo on Contentstack's Teams and Taxonomy feature.

Teams and Taxonomy Demo

Teams And Taxonomy Webinar Thumbnail

Teams & Taxonomy Webinar

Cs Intro-to-live-preview V1 3.22.24

In this webinar we review the benefits of having Live and Release preview in the Contentstack CMS.

Live and Release Preview Webinar 

Live Preview And Release Preview Webinar Thumbnail

Live Preview & Release Preview Webinar

Discover how Timeline allows you to navigate through time to see how your future content changes will appear, compare different stages of updates, and collaborate on upcoming changes—all within Contentstack.

Cs Intro-to-timeline V1 7.19.24