Xperience by Kentico Refresh - February 20, 2025

Check out this month's addition to Xperience by Kentico. We added several exciting enhancements like AI powered image transformations, a preview of our upcoming visual Email Builder, and form submission admin notifications! But, of course that's not all, so read on to learn about the updates we've just delivered in Xperience by Kentico.

AI powered image transformations with AIRA

Images are a key part of most digital experiences. Marketers want to grab the attention of their customer with visuals that complement the design and customer experience of their digital channel - web, email, or mobile.

Not only are images a key part of a marketing message's impact, but with internet connected experiences those images need to be optimized - faster loading experiences have a higher chance of converting.

In December we enabled 1-click image optimization for image assets uploaded to Xperience by Kentico's Content hub to help marketers solve this challenge without additional steps or needing to understand the technical details. However, image file size optimization (compression) is only one part of the story. Images should also fit the experience.

To help tailor images to each experience, we added image variants and smart cropping for marketers using AIRA, Xperience by Kentico's AI for recommendations and assistance.

Image variants and focal points

Let's assume we have a grid of products and images, like the Dancing Goat website product listing.

Web developers have tools to help them fit an image into a specific component or web page design, like the CSS object-fit property. Object-fit supports letterboxing or cropping, but in a very primitive way. If an image has a key point-of-interest we always want displayed, there's basically no intelligent way control this - CSS doesn't know anything about the image it's cropping.

What about marketers? Sure, they could review every image, open up an image editing tool, and perform a crop for each image size variation they need.

But they also have more important things to focus on!

To explore this challenge further, the marketers for Dancing Goat coffee want to add a new Bolivia Finca Illimani coffee product and receive the following product image.

This product image won't win any awards 😅, but it could work as both a hero and a product image and it reinforces the point that marketers don't always get to choose the materials they're given. Wouldn't it be great if they could rely on Xperience to help them make this image work in the product grid without manually editing it?

First, they define a new Square asset variant in Xperience. This ensures they'll always have a 1:1 dimension variant for each uploaded image asset, perfect for grids where every item needs to be the same square shape.

We upload the new product image by dragging it to the Content hub - Xperience creates the new Image content item for us with a pre-optimized image asset. Then we edit the image asset and select a focal point. The focal point is used to set the preferred crop for each variant - in this case we have one variant named Square.

This upload-and-crop process was straightforward and didn't require me to use external tools. I didn't need to remember which image variants are important for the design of my digital channels because they're already set up in Xperience.

After publishing the new Bolivia Finca Illimani product (using Xperience's cascade publishing to also publish its linked image) I can reload the product listing on the website and see the cropped variant.

Auto focal point detection with AIRA

What if I told you we can use AIRA to select the focal point, saving one additional step for every variant we define for every image uploaded?

With AIRA enabled in my Xperience by Kentico application, the image's focal point was intelligently selected for me.

If our website design requires new image variants of different dimensions we can add them to the asset configuration, AIRA determines the focal point for all existing images, and Xperience will generate the cropped variants on-demand. It just works.

To finish our story, the Dancing Goat marketing team learns the original image was intended as a promotional banner 🤷. Knowing this, they create a new image variant named Banner.

Thanks to AIRA the focal point for the new variant is auto-selected and the cropped image is ready to be used 🎉!

We add a hero banner image widget to the Products listing page. The widget uses the Banner variant and now a single image asset appears twice on the same page without extra work from the marketing team!

ASP.NET Core image tag helpers

We've seen how image variants are great for marketers but they might increase code complexity for developers who now need to manage accessing URLs and image dimensions for multiple variants of every image.

To help simplify their code we've introduced several new composable image tag helpers, letting them dial-in the right amount of support from Xperience to compliment their custom HTML.

// Prefills the image URL into the src or srcset attribute.
<img kxp-img="@Model.ContentItemAsset" ... />

// Prefills the image dimensions into the width and height attributes.
<img kxp-img="@Model.ContentItemAsset" 
     kxp-img-dimensions ... />

// Specifies which image variant should be rendered in kxp-img
<img kxp-img="@Model.ContentItemAsset" 
     kxp-img-dimensions 
     kxp-img-variant="variantCodeName" ... />

<picture>
    <source media="..." 
            kxp-img="@Model.ContentItemAsset" 
            kxp-img-dimensions 
            kxp-img-variant="variantCodeName1" ... />
    <source media="..." 
            kxp-img="@Model.ContentItemAsset" 
            kxp-img-dimensions 
            kxp-img-variant="variantCodeName2" ... />
    <img kxp-img="@Model.ContentItemAsset" 
         kxp-img-dimensions ... />
</picture>

We chose attribute-style tag helpers so you can apply them to native <img> and <source> elements and use any CSS classes or other HTML attributes you want.

No-code Email Builder

Marketers need to reach their customers across all the digital channels their customers prefer using. Email has been around for a long but it is still an incredibly popular channel for marketers and customers.

Today, Xperience by Kentico's email channel is template driven with an authoring experience in the administration UI and built on an underlying macro technology. This approach is convenient for quick edits, but it doesn't scale for more complex email templating scenarios.

Additionally, marketers are rarely the persona who updates code-focused marketing email templates, because email HTML authoring is really, really difficult to get right.

There are efforts to make email HTML more consistent and accessible, but even if that happens we will still have some technical complexity that easily gets in the way of marketers using email as a digital channel.

To align with Xperience by Kentico's overall no-code product design for the marketer experience, we've added a visual Email Builder this month, which is in preview and available for developers to explore.

Email Builder preview

We're releasing the Email Builder as a preview feature for a few reasons.

1. We believe releasing preview features is perfectly aligned with our iterative and monthly approach to product updates, and we look for opportunities to enable and enhance features in smaller bites.
2. We want to get feedback on the Email Builder's technical aspects and tune them up for next month's "production ready" update.
3. The Email Builder is leveraging ASP.NET Core Razor components. We want to give developers time to familiarize themselves with this technology before they're expected to use it in production (more on this further down 👇).

Templates, Sections, and Widgets oh my!

Developers and marketers should find themselves immediately familiar with the Email Builder design concepts even if the underlying technology is new.

Developers will author templates, sections, and widgets and marketers can expect the visual builder UI to work the same way as the website Page Builder we all know and love. The Email Builder's component properties use the same UI Form Components you know from the Page Builder and throughout Xperience's administration UI.

Do you love the flexible content selection experience of the combined content selector? Great, use it!

Need to go and retrieve some bespoke data from the database to populate Widget's template? Go for it, you have the full power of Xperience's dependency injection and data retrieval APIs.

MJML support

Even with the ability to author email HTML in Razor component code files with strongly typed C# and logical templates, sections, and widgets, developers have a bit of an uphill battle. Did I mention email HTML is difficult to get right?

Thankfully, there's a popular library/technology named MJML which was built to make authoring email HTML much, much easier.

Just as an example, these 15 lines of "MJML" markup generate 138 lines of the ugly email HTML that works in all email clients.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-image width="100px" src="..."></mj-image>

        <mj-divider border-color="#F45E43"></mj-divider>

        <mj-text font-size="20px" color="#F45E43" 
                 font-family="helvetica">
          Hello World
        </mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Great! How does this help Xperience by Kentico developers?

We've integrated MJML into the Email Builder as a built-in and natively supported feature! That means you can author all of your email templates with MJML's syntax and know the generated email HTML sent to your recipients will handle all the complex edge cases for you.

You can find the details in our documentation covering the Email Builder's MJML support.

Introducing Razor components to Xperience by Kentico

Now for the .NET shaped elephant in the room. Why are we using Razor components? Why not just use MVC and the website Page Builder we already have?

Well, Microsoft continues to invest in Blazor and Razor components as the clear answer to MVC's weak component capabilities and we want to adopt ASP.NET Core features as they mature and become the de-facto standard in the framework.

Adopting Razor components with the Email Builder is also a great place to start because email rendering has very little to do with the HTTP request and response design that MVC technologies (like Controllers, Tag Helpers, and View Components) are based on.

Razor components are designed to be rendered without an HTTP request or in the background (hm... just like email 🤔) - this is a great way to support future scalability in email rendering and sending in Xperience.

When will the Email Builder be ready?

We're hard at work preparing the Email Builder's production-ready release for our March 2025 Refresh.

And, just like all Xperience by Kentico features, we'll continue to iterate and improve on the Email Builder's capabilities with personalization, which is planned for April's Refresh.

We're eager to hear your thoughts about the new Email Builder, so read the documentation, try it out, and then send us some feedback on our product roadmap.

Allowed web page content types and scopes

As a website channel and content model grows, so does the number of available web page content types and places to create web pages in a website's tree.

Although marketers trained on Xperience by Kentico might know where they should and shouldn't create specific pages, wouldn't it be great if Xperience knew? It could present marketers with the right content type options that make sense for each area of a website page tree when adding any page.

Anyone familiar with Kentico's previous products will be familiar with the concept of allowed page types and scopes, which we've now brought to Xperience by Kentico.

Limiting article web page creation

Here's a quick example of what it looks like for a marketer creating a new web page under the Products page in a website channel last month.

Not only is the marketer presented with a large number of web page content type options that probably don't make sense, there are some like Home page that absolutely don't make sense.

We definitely don't want to allow a marketer to create a new Home page and they definitely don't want to spend time trying to understand why it's an option.

Let's tune things up using allowed content types.

We can define where our Product section content type is allowed to be created with allowed parents and define which content types can be it's child pages with allowed children.

In this screenshot we limited the allowed children to Coffee page, Grinder page, and Products section content types - no Home page 😅.

Now, when we create a new page under the Products page it's a much nicer experience because there are only 3 content types to choose from.

Simple👍!

When managing a content type you can also see its scopes. Unlike allowed parent and child content types, which focus on specific types of content, scopes are path and channel based.

Because scopes are channel-based (you can have different scopes for each website channel) they are authored in the Channel management application's website channel details view.

You can read more about scopes and how they complement allowed content types in the documentation.

Notifications

We enabled management of built-in notifications for marketers back in our November 2024 Refresh. Initially we made it possible to customize the email content and templates of those notifications or create completely custom notification emails tailored to your business needs.

This month we're adding more functionality to administration notifications with form submission notifications.

Form submission notifications

Although marketers could always configure form autoresponder emails sent to customers after they submit a form there hasn't been an easy way to alert administration users of the same event without custom development.

Form submission notifications can be managed from the Notifications application in Xperience.

Creating a notification for the Form submission event type reveals some additional fields unique to this event - Forms and Recipients.

Administrators can easily define which users receive email notifications for every Form Builder form in Xperience used in any website channel. You can use the same notification for multiple forms or send the same email to multiple users.

If we use the same notification for multiple forms, how do we know which form was submitted when we receive the notification email?

Email templates and some notifications fields support a simple macro syntax. This syntax is intentionally simple so it can be used by marketers, since they are often responsible for managing both the Form Builder forms and their submission notifications.

We can use macro values like {{FormName}} in the Subject field to quickly identify at a glance in our email inbox which form was submitted when multiple forms share the same notification.

We can optionally embed the form submission data in the email body using {{FormData}} and even generate a link with {{FormLink}}, making it seamless for marketers to navigate from their inbox to the recorded customer engagement.

As always, many more details about form submission and other notifications can be found in the documentation.

AIRA Unified - the AIRA Companion App

We know marketers are working both in and out of Xperience by Kentico, and we recognize the importance and impact of bringing the world of "other tools" and devices into Xperience to reduce context switching with intuitive user experiences.

We also realize there's a big opportunity to bring Xperience out to the world of these tools and devices to fit into existing marketer workflows.

Our initiative to create a fully connected digital experience ecosystem is called AIRA Unified.

Our first step on this journey with Xperience by Kentico is released this month in preview - the AIRA Companion App (ACA).

This app is a progressive web app and open-source integration which can be added to your Xperience by Kentico application. It's found at the Xperience by Kentico Unified GitHub repository.

Although in preview, the ACA already provides real-time insights about your Xperience application - like what content is scheduled to publish, your email delivery and engagement stats, and information about contact groups - through a chat interface.

You can also upload image assets directly from your mobile device into Xperience's Content hub through the ACA.

AIRA's genAI context is aware of Xperience's features and best practices for using Xperience from the perspective of a marketer, so feel free to ask it some questions about Xperience!

You can dive deeper into the details of AIRA Unified and the AIRA Companion App in our dedicated Kentico Community Portal blog post Expanding DXP beyond boundaries.

AIRA is still in preview, but we're planning to make it production-ready in March for all Advanced license tier subscriptions.

Xperience Portal and SaaS

We've added an improved DataProtection API implementation to Xperience by Kentico for SaaS deployments, allowing users to stay logged into the Xperience administration after deployments.

New SaaS projects using our project templates will have this enabled by default and existing projects can enable it with a single line of code.

if (builder.Environment.IsQa() 
    || builder.Environment.IsUat() 
    || builder.Environment.IsProduction() 
    || builder.Environment.IsEnvironment(CloudEnvironments.Custom))
{
    // ...

    builder.Services.AddXperienceCloudDataProtection(builder.Configuration);
}

Users in the SaaS Xperience Portal can opt-in or out of notifications of DDoS attacks mitigated by Cloudflare, the CDN and WAF service provider we use for our SaaS customers.

If users cannot access their Xperience Portal account they can self-service reset their multi-factor authentication configuration.

Finally, if you can now easily identify the primary contact of a SaaS tenant in the Xperience Portal's Users list by the blue crown icon next to their Role.

.NET API Reference

A much missed and requested feature for Xperience by Kentico was not in the product itself but instead was technical documentation of Xperience's public .NET API.

This is now available at https://api-reference.kentico.com and will be automatically kept up-to-date with every Refresh. This link is also discoverable from the documentation's API Examples section.

Big thanks to the engineers and technical writers who made this possible 👏👏.

What's next?

As always, check out our documentation Changelog for the full Refresh feature and technical details.

We hope these new capabilities, features, and API improvements unlock solutions for you. Try them out, let us know 👋 what you think.

For the next Refresh we are planning a lot!

• Content version history and rollback
• A production-ready Email Builder
• The first iteration of Customer journeys
• Production ready AIRA and AIRA powered content tagging and metadata
• Administration web page search
• A new, simplified content retrieval API

These updates will, as always, accompany a number of UX and developer-focused improvements.

Check back next month for another Xperience by Kentico Refresh review!