Back to Blogs

Easily Integrate with Your Marketing Technologies with Contentstack CMS Custom Fields

Dhaval MajithiaAug 03, 2018

Talk to an expert

about something you read on this page

Contact an expert
Blog Illustration for Extension@2x.jpg

This is one of our biggest announcements ever: Contentstack introduces Experience Extensions, a series of features and a new integration architecture to extend the capabilities of Contentstack. Experience Extensions allows the content editor experience to be customized and extended. It also allows Contentstack developers to create richer content experiences for their end-user audiences. This is big news in the CMS world, where traditionally you were limited to the capabilities provided by a single vendor’s CMS product or suite, or you would create a custom CMS stack using a mix of third party and open source plugins. The latter typically resulted in a ‘Frankenstein’ CMS stack that was both difficult to support and scale.

Custom Fields for Custom Needs

In the first installment to Experience Extensions, we just released a feature called “Custom Fields." As the name implies, a Custom Field allows a developer to create a non-standard field (i.e., one that isn’t provided by Contentstack’s editor by default). It provides a place to capture new information or properties about a content entry and can be either static or dynamic in nature. After a developer creates the Custom Field, content managers can use it as part of their content updates, i.e., creating or editing content entries.

You can add just about any kind of field—from simple ones such as a color picker for your ecommerce site or a YouTube video selector for your video streaming site to more complex ones such as video editors or a selection field that fetches values through APIs—in your content types.

Imagine the power it gives to you.

This flexibility for developers, in turn, makes the CMS more rewarding and valuable for content managers. They are no longer bound to the predefined fields or UI that Contentstack offers. Adding a new custom field is as simple as forwarding your request to the developer of your stack (and writing a few lines of code on the developer’s end).

What Can You Build with Custom Fields?

A lot.

Since it accepts custom code, you can create just about any kind of field. Let’s look at some common types of custom fields that you can create and use.

Star Rating field – Provide ratings by selecting stars

This field lets a user provide a rating (e.g., three out of five) through selecting visual stars. When stars are selected, it saves a corresponding integer in the CMS backend.

Video selector – Browse and select videos

This field displays the visual interface of a video platform – such as Brightcove or Ooyala – to the user. The user can browse videos and select the required one from the available videos directly from within Contentstack’s editor.

Conditional fields — Auto populate list of states based on a selected country

When an option is selected in the ‘Country’ field (e.g., US), the other field ‘Languages’ automatically populates the languages of that country (e.g., English, Spanish, French, Chinese). The user can then choose from the options provided.

Color picker – Pick a color from a list of options

This displays a set of colors to choose from. When a color is chosen, the corresponding color code or color ID is saved in the backend. This is ideal for e-commerce sites where the user can pick a color for the selected shirt or t-shirt.

Photo capturer – Capture images through the device’s camera

This field lets the user capture photos through the device’s camera. The photos may be saved as assets in the backend. It is ideal for food review forms, customer feedback forms, etc.

Code editor – Input and edit any code in the code editor

This field provides a code-editor interface to users for entering code. It helps the user format the code and enter relevant syntaxes, methods, etc.

Key-value field – Enter a key and a corresponding value in the field

The user can provide a key and associate a value with it.

Product Catalog – Search external product databases

This displays all the products of your e-commerce website to the Contentstack user within the field. The user can simply pick any product as the value of that field.

Add Marketo / Salesforce cookie – Track user interaction across web/Marketo/Salesforce

This field lets you track the details/information of the users of your website, Marketo account or Salesforce account by simply dropping in a .JS code snippet.

Marketo Tracking – Apply lead scoring

Pull the Marketo code snippet and add it to the contentstack global content type.

Integrate field storage system – Fetch files saved in your DAM

This field fetches and displays the files that you have saved in your DAM platform, e.g. Egnyte. The user can then browse these files and select the required one from the available options.

How do Custom Fields and Experience Extensions Work in Contentstack?

Working with Custom Fields as part of Contenstack’s Experience Extensions is easy. Contentstack provides an Experience Extensions SDK that has all the functions and methods that you will need. This SDK is the link between your custom Experience Extension and Contentstack. Learn more about the Experience Extensions SDK.

Your custom code, which resides inside an ‘iframe,’ communicates with Contentstack through the SDK. Contentstack lets you include its design stylesheet so that your custom field’s design blends perfectly with our UI. Learn how to configure your custom code.

You can either use one of the pre-built templates provided by Contentstack or create a new one from scratch. Let’s look at an example where we create a color picker field.

In Contentstack, under ‘Extensions,’ create a new Extension, and provide the HTML code as shown below.

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src=""></script>
    <link href="" rel="stylesheet" type="text/css" media="all">
    <input type="color" id="html5colorpicker">

You can see that we have included Contentstack’s stylesheet in the code so that your customization doesn’t look out of place. We have also included the Experience Extensions SDK in the next line.

Next, you need to provide the custom code of your extension. Here’s the sample code for the ‘Color Picker’ custom field.

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src=""></script>
    <link href="" rel="stylesheet" type="text/css" media="all">
    <input type="color" id="html5colorpicker" onchange="colorChange()">
      // initialise Field Extension 
      window.extensionField = {};
      // find color input element 
      var colorPickerElement = document.getElementById("html5colorpicker");
      ContentstackUIExtension.init().then(function(extension) {
          // make extension object globally available
          extensionField = extension;
          // Get current color field value from Contentstack and update the color picker input element
          colorPickerElement.value = extensionField.getData();
        // On color change event, pass new value to Contentstack
        function colorChange(){

The ‘’ method is the most crucial element of the code given above. It fetches and saves the given input value in Contentstack.

Once you have configured the code, go to the Content Type builder, and look for the ‘Extension’ field on the left-hand side panel. Drag it onto your content type. In the dropdown list, you will now see the Custom Field that you just added. Select it and save the content type.

Now, when content managers create an entry for this content type, they will see the Custom Field within the entry page.

Do More with Experience Extensions and Custom Fields

With Experience Extensions, possibilities are endless. Read our documentation to get started with this feature. You can create a new Custom Field from scratch—see our step-by-step tutorial—or use our pre-built templates to get started instantly. And watch this space for even more enhancements to follow soon!

Share on:

Talk to an expert

about something you read on this page

Contact an expert

Recommended posts

Nov 21, 2023 | 5 min. read

Introducing Taxonomy: Establish scalable content best practices with control and ease

The power of advanced taxonomyIn today's fast-paced digital landscape, effective content organization and collaboration are crucial for businesses to stay competitive. While a headless content management system (CMS) offers increased flexibility and adaptability compared to legacy systems, it lacks the inherent structure that a legacy CMS provides.That's where Taxonomy comes in. Incorporating a taxonomy feature that integrates hierarchical structures and metadata elements capitalizes on the market demand for a more robust and well-rounded content management solution. This robust feature aims to streamline content management, enhance collaboration, and improve overall productivity at scale. The arrival of Taxonomy helps our customers scale content organization and role-based permissions, enabling users to manage large and complex data structures with ease while maintaining content security and separation. This innovative approach differentiates the Contentstack CMS and solidifies our position as a market leader in the enterprise content management space.What is Taxonomy?Taxonomy enhances content organization and enables content editors, particularly from larger enterprise environments, to handle vast and complex data structures with full control and ease. Taxonomy enables multiple ways to classify, organize and manage content, tailored to your organization’s specific needs. These classification methods can be structured hierarchically, relationally (may or may not be hierarchical), or as predefined lists based on metadata/attributes that can be applied across various use cases. Although its name, Taxonomy, implies categorization by hierarchy, it can be reused and repurposed to simplify content organization and management for large content volumes.Core featuresFor developersCreate: Create new taxonomies and terms. Developers are able to create sibling terms and child terms to establish a hierarchical structure for better content organization.Import & Export: Import one set of taxonomies and terms at a time, including nested terms, which helps save time and effort when managing a large number of taxonomies and terms.Content modeling with taxonomies: Associate specific taxonomies with content types, allowing for better organization and management of content. Developers can add a new taxonomy field, restrict which taxonomies can be tagged, and limit an editor's tagging options to the selected taxonomies.For business usersList view (coming in GA): Content editors are able to view a list of all taxonomies on the Settings page, displaying relevant information such as Name, Description, Referenced Terms, Modified At, and Created At. This allows users to see an overview of their taxonomies and understand the relationship between taxonomy terms and categorized entries.Navigating entries with taxonomy structure: Content editors can navigate their content using a tree-like nested taxonomy structure. This will provide content editors with an intuitive way to browse, manage, and categorize their content based on the taxonomy.Taxonomy-based search: When searching for content, content editors have two primary methods at their disposal. A basic search involves simply typing a keyword, such as ‘India’ into the search bar, which brings up all entries categorized with that term. For a more tailored approach, the advanced search option allows you to apply multiple conditions, enabling you to refine your query and get more specific results.Key benefitsSimplified content security & ownershipBusiness leaders need a content ownership process that makes sense and is secure. Taxonomy helps stratify access to content within a content type by taxonomy term, without requiring a content type to be duplicated. This ensures the correct people on the team have access and permission to create and manage content most relevant to their respective project(s). No more content confusion and interruption as teams grow or change over time.Manage large-scale content projectsManaging and organizing taxonomies of content for distinct business purposes on an aging legacy system is conducive to organizational limitations around long-term scalability and efficiency. With Taxonomy, manage and implement scalable content management processes for large-scale content projects across functions and systems with a direct line of sight.Gain full purview of content taxonomyBusiness teams need a way to effortlessly navigate to the content most relevant to their current priorities. Taxonomy helps provide navigation to content that spans multiple content types. It can mimic their site navigation structure or their own personalized ways of organizing content without having to understand the context of which content type their content lives in. With Taxonomy, manage and lead content projects from a single vantage point, giving you the confidence and assurance to execute.What's next?Taxonomy is a game-changer for content organization and collaboration. With its robust functionality and benefits, businesses can manage large-scale content projects, improve content security & ownership, and enhance overall content management experiences. By following best practices and leveraging the power Taxonomy, businesses can stay ahead in the digital landscape.Please note that Taxonomy is currently in its Early Access phase, and we appreciate your participation as early adopters. If you’re interested in joining our Early Access Program, please reach out to your Customer Success Manager. Your feedback will be invaluable as we work to refine and improve Taxonomy. Our goal is to roll out Taxonomy to all users in the near future, delivering a polished and valuable addition to your Contentstack experience.If you’re fascinated by the versatile options for classifying, organizing, and managing content, we invite you to dive into our Taxonomy documentation.

Nov 14, 2023 | 5 min. read

Fall platform recap: What’s new and what’s coming for Contentstack

Welcome back to the Fall edition of Contentstack Pulse, your trusted source for the most recent news on platform enhancements, roadmap updates, and comprehensive answers to frequently asked questions. In the season of change, we are excited to share the advancements that have taken place within our platform. Our commitment to innovation remains unwavering, focusing on creating an increasingly efficient and user-friendly environment for marketers and developers. So, let’s dive into the details of our latest updates and provide insights into the future at Contentstack.New for Contentstack Headless CMSContentstack AI Assistant:The newly launched array of AI features improves the content creation process even further. You can now harness the power of AI at the granularity of paragraphs, sub-paragraphs, sentences, and even individual words to improve your content quality. This new AI feature also provides custom prompts, ensuring you get a more personalized experience. The AI Assistant can now be powered by new models from Microsoft Azure and Amazon Bedrock, in addition to ChatGPT. And, if you’re looking to customize, Contentstack has now introduced custom icon upload, enabling you to add new icons that align more with your brand’s identity.In-platform Help Center:Contentstack understands that not everyone using our platform is an expert, so we introduced an in-platform Help Center. The Help Center provides information and assistance to users and developers alike. With this feature, Contentstack aims to help users save time, reduce clutter and confusion, ensure compliance, and increase productivity.New for Contentstack MarketplaceContent Model Templates:A collection of predefined content types and global fields that can be easily imported into a stack. These templates aim to accelerate content creation, ensuring your content is created even faster and on-brand. With this feature, you don’t have to start from scratch every time. The Content Model Templates in the Marketplace provide a ready-made content model that can be quickly imported into your stack for quick content creation.Contentstack Automation HubAmazon Bedrock Connector: New AI offerings, such as AI21 Labs, Anthropic’s Claude, and Amazon’s Titan models, improve many Gen AI use cases, giving users and developers access to more innovative solutions. With these new AI offerings, you can create automated tasks and processes that make it possible to accomplish more without significant manual effort.Contentstack LaunchOn-Demand Revalidation: This new feature ensures that content updates always display accurate information in real-time. It is ideal for businesses that want to avoid displaying inaccurate or obsolete information that can lead to confusion or loss of trust.And in the Spring, be on the lookout for:Teams & TaxonomyUsers can effortlessly build streamlined content using powerful tools designed for grouping and categorizing range, enabling efficient organization and easy access to relevant information. And with the new Teams feature, we provide organizations with a straightforward approach to team management and content ownership. Developer empowermentProvide developers with immediate, scalable application deployments using Contentstack’s hosting tool, Launch. Also, App version control and release notes allow developers to manage the rollout of new features to their users quickly.On-demand automation in the CMSTrigger automation on-demand right within the authoring interface of the CMS for things like SEO validation and other content readiness actions.Learn moreWith Contentstack’s latest product updates, you can now take advantage of numerous enhancements designed to improve your content creation experience. From the AI assistant to the In-platform Help Center and Content Model Templates, developers and marketers can access tools that can add value. Want to hear more about what we are doing? Check out our product updates here for the latest.Or contact our team here if you're curious how Contentstack can help your brand streamline content to deliver better digital experiences everywhere.Chalo!

Oct 17, 2023 | 3 min. read

Contentstack and the future of AI in digital experience platforms

IntroductionThe role of AI in shaping digital experiences is a subject of ongoing discussion and interest. A recent Gartner report, How to Realize Value From AI in Key WCM and DXP Use Cases, provides valuable insights into some key areas where AI can make a significant impact on Digital Experience Platforms (DXPs). In this post, we'll explore three of these areas and discuss Contentstack's approach to addressing the challenges and opportunities they present.1. Content Generation & Experience CompositionGartner's TakeGartner emphasizes that AI can automate content creation and management, making it efficient, relevant, and engaging. However, the underlying challenge lies in stitching content together across disparate systems and maintaining the human touch.Contentstack’s responseGartner's insights pose a real challenge: How can AI be leveraged to create scalable, compelling, and brand-consistent content? To address this, we introduced the AI Assistant, now generally available from our Marketplace. It utilizes AI models to assist in various content generation tasks, such as creating summaries, outlines, and headlines.Gartner also mentions the importance of underlying content metadata and how its impact on effective content generation at scale cannot be overstated. The AI Assistant is more than just an intelligent widget that can generate prompts; it’s been specifically designed for use in a headless CMS, leveraging its understanding of and access to content models and other platform details.Moreover, our commitment to versatility stands strong. Contentstack believes in offering choice. That's why we’ve expanded our AI vendor support, offering a range of AI models to power the AI assistant beyond OpenAI’s ChatGPT. These models, including those from our recently released Amazon Bedrock integration, such as AI21 Labs, Anthropic's Claude, and Amazon's Titan, provide flexibility and choice for enterprises with unique content generation needs.Addressing Gartner's concerns about maintaining brand voice, our AI Assistant features Custom Commands. This allows users to create bespoke prompts tailored to their brand's voice and specific platform configurations, ensuring that any AI-generated content is relevant and resonates with the brand's unique identity.Building on this foundation, we’re excited to share what’s next—On-brand Generative AI—enabling the AI Assistant to not only generate content at scale but craft it in alignment with a brand’s voice and tone.2. DX Delivery & PresentationGartner's TakeGartner highlights the rise of new DX channels like AR/VR, mixed reality, and IoT devices, which require uniquely tailored content presentation. Machine learning-based presentation is becoming the new standard.Contentstack's responseWe recognize the need for adaptive content delivery and presentation, which is why we've been incorporating AI into Automation Hub. This enables intelligent automation of content workflows and other related processes. For instance, you could create an automation that automatically tags content based on its attributes and context. These tags can then trigger the content to be sent to specific platforms, whether it's social media, mobile apps, or a targeted newsletter, ensuring that the right content reaches the right audience at the right time.Furthermore, when combined with Contentstack's front-end hosting tool, Launch, it plays a pivotal role in crafting smart workflows that can automate the delivery of digital experiences to all audiences and channels, regardless of scale or complexity.3. Personalization & OptimizationGartner's TakeGartner's report highlights that AI, particularly machine learning, is set to revitalize the field of personalization. It enhances traditional rule-based methods by offering a deeper, more individualized understanding of customer needs across the entire DX lifecycle. However, the report also notes the challenge of maintaining accurate and unbiased content classification.Contentstack's responseOne way that we’re preparing to advance AI-driven personalization is through our upcoming release of On-brand Generative AI. This technology utilizes retrieval-augmented generation (RAG) to anchor AI-generated content within the parameters of a customizable 'brand vault.' Managed by the organization, this vault informs the content produced by both the AI Assistant and Automation Hub, supporting a host of various use cases, including:GenAI personalization: Automatically target segments with GenAI.AI prompt chaining: Create complex yet consistent AI responses.AI analysis: Analyze logs, data, or schema and send reports.Fact checking: Use external sources to fact and quality check.Multi-source augmentation: Supplement AI interactions with data from external systems.Semantic source data: Create structured data for AI to ingest & learn.Dev intelligence: Code suggestions, checking, and suggestions.Project monitoring: Track progress and predict bottlenecks with AI analysis.Smart QA processes: Use AI to evaluate incongruencies in data and send alerts.ConclusionThe Gartner report serves as a valuable guide for the challenges and opportunities that lie ahead in the integration of AI into DXPs. At Contentstack, we're committed to evolving our platform to meet these challenges and seize these opportunities. Our ongoing work in AI—from our AI Assistant and Automation Hub to the forthcoming On-Brand Generative AI capabilities—are a reflection of this commitment. As we continue to innovate, we aim to set new benchmarks in helping our customers deliver exceptional digital experiences at scale.

Oct 06, 2023 | 5 min. read

Venus Design System 2.0: UI updates for enhanced user productivity

Introducing Venus Design System 2.0 In our relentless pursuit of delivering a seamless user experience for our users, we understand the importance of continuous improvement and iteration to achieve that goal. That’s why we’re thrilled to share our Venus Design System updates, focused on enhanced user productivity and accessibility. As you may recall, we chose Venus, like the Roman goddess of beauty and love. It is the visual expression of our love and care for our customers.  In this blog, we'll dive into the recent user interface (UI) updates for the content manager screens, taking you behind the scenes of the standardization of design components, user navigation, improved spacing, icon enhancements, and more. Buckle up as we explore these changes that will elevate your experience with our platform. UI elements & styling enhancements Refreshed cards on Stacks homepage These UI updates create a visually appealing and more informative card interface. You will find it easier to navigate and gain deeper information about each Stack. New background colors, icons, and sectioned design Improved text spacing for readability Added total user count per Stack Tooltips when hovering for truncated Stack names Enhanced accessibility Our accessibility improvements make the app more user-friendly and inclusive. Users with varying needs will experience enhanced readability, easier interaction, and consistent icon behavior, promoting a more accessible and enjoyable experience. Tooltips when hovering Updated fonts and spacing for headings (H1, H2, H3) Larger action buttons for improved navigation Standardized family of icons for greater cohesion Icons now function as buttons with primary, secondary, and tertiary states Updated user login experience These updates to our user login page introduce a more user-centric and efficient login experience, promoting ease of use, clarity, and an aesthetically pleasing interface. Updated user flow for login via SSO, now with buttons instead of tabs Validation messages are now shown below the text input fields The “Submit” buttons will be disabled until the validation passes Navigation & layout improvements Updated Entry & Asset List UIs The updated tabs components provide a more focused and efficient way to navigate through both the App's Entry & Asset List UIs, making it easier to switch between sections and find exactly what you need. New toggle navigation between Content Types and Labels tab Enhanced table filtering, which is now easily identifiable with a filter icon. Added pagination on the Entry List page Table resize functionality Added collapse/expand functionality for the left-hand side menu Table management and custom views With more organized and user-friendly table management, you can customize the table view and manipulate tables more easily, reducing frustration and errors. Improved table filtering with an identifiable filter icon Enhanced column management with functionality to freeze/unfreeze columns in table view Updated asset cards in the thumbnail view Improved spacing of asset results with a 4-grid or 8-grid view to prevent element misalignment Icon, button & alert refinements Removed icons for action buttons in pop-up modules Removing distracting icons on non-destructive action buttons allows you to focus on the task without unnecessary visual clutter, leading to a cleaner and more efficient user experience. Entry Editor These icon and text field changes enhance visual clarity and consistency, making creating and editing Entries easier, resulting in a more user-friendly content management experience. Cosmetic change of icons in entry outline from solid fill to stroke family icon Outlined border of the text field when you hover over a content block in the entry editor Alerts The defined alert colors help you quickly identify different types of alerts, reducing confusion and improving overall user communication within the app. Defined 4 new colors for different alerts  Information: blue Messaging: red, amber, gray What's on the way? In conclusion, our recent efforts to revamp our app's UI through Venus Design System 2.0 signify a pivotal moment in our commitment to delivering an exceptional user experience. The Venus redesign was just the beginning of this journey, and we're thrilled to see how this innovative design system is already making a positive impact. By meticulously auditing all app screens and implementing audit-suggested changes, we ensure a consistent and streamlined interface across the board. This initiative is more than just an update; it's a testament to our unwavering dedication to our customers' app experience. As we refine and evolve our UI, we're excited to see how these changes will empower you to navigate our app effortlessly and enjoy a more satisfying digital journey. Stay tuned for more exciting developments of our platform’s developer screens, and thank you for being part of our ongoing transformation.

Oct 04, 2023 | 3 min. read

Accelerate your digital experience skills with Contentstack's Developer Fast Track program

Experience Contentstack and accelerate your (DX) skills with our new Developer Fast Track programAs a developer, you understand that the technology world is constantly evolving, and staying up-to-date with new developments in the industry can be a challenge. Contentstack's Developer Fast Track program was designed to ease that burden. Our comprehensive program provides you with a 1-click platform trial plus full access to Contentstack Academy to help you learn how to maximize the capabilities of Contentstack's composable DXP.Are you ready to get your hands dirty?Real-world applicationsOne of the most significant benefits of the Developer Fast Track program is that it will provide hands-on experience inside the platform. With this, developers gain the experience to apply their knowledge immediately in real-world scenarios. Examples like:Development branching strategiesJSON rich text editingManaging apps with Developer HubApplication hosting with LaunchComprehensive trainingThe Developer Fast Track program offers customers comprehensive training, including onboarding, end-user training and app development. The onboarding process ensures that you are familiar with all policies and protocols, while the end-user training delivered through Contentstack Academy provides comprehensive guides to Contentstack's capabilities. Examples like:Launch: Empower Your Development WorkflowTake your composable projects live with Contentstack Launch. You'll learn how to create and deploy new Launch projects using GitHub repositories and file uploads and leverage Launch's automated build and redeploy capabilities to power up your CI/CD pipeline. Marketplace App Development: Turn Your Ideas into RealityUnleash your creativity with the Marketplace App Development. Learn how to create custom apps that cater to your unique business needs. Our expert instructors will guide you through the app development process, empowering you to leverage the full potential of our platform's ecosystem.Content Modeling: Elevate Your Content StrategyContent is at the heart of every successful digital experience. The Content Modeling course gives you in-depth insights into crafting and managing content that captivates your audience. Learn how to structure, organize, and optimize your content to enhance user engagement and drive conversions.Automation Hub: Simplify and Streamline Your WorkflowsEfficiency is key, and the Automation Hub course is your ticket to streamlining your workflows and automating repetitive tasks. Explore the power of automation and learn how to implement time-saving solutions within your projects. Accelerated learningThe program is structured to deliver maximum learning in minimum time. Through the program, you can quickly build proficiency in the Contentstack platform. The program is designed to provide developers with an immersive and intensive experience that accelerates their learning and equips them with all the necessary tools to succeed in their roles. Additionally, through the Developer Fast Track program, you’ll be able to tap into the wealth of knowledge and experience of the Contentstack team, further accelerating their development process.Want to hear more? Check out our Contentstack LIVE! episode with Eric Broadwater!With its hands-on platform experience, comprehensive training, and accelerated learning, this program will help you accelerate your composable DXP skills.If you are a developer looking to get your hands dirty, the Developer Fast Track is for you. Start building today.