Web Spotlight - visual page editing in Kontent (in less than a day)

Web Spotlight is a very exciting release for Kontent. As a pure-play Content-as-a-Service platform, its content management functions fit squarely in the 'headless CMS' category. This new feature allows you to connect a website 'head' and get a rich visual editing experience usually reserved only for traditional tightly coupled CMS platforms.

What is it, in a nutshell?

1. A new module within the Kontent interface, letting you browse your site using a traditional 'tree' style navigation that you would see in most web-focused CMS.
2. New 'Homepage' and 'Page' content types (which you can modify or replace as you see fit) and new 'Subpages' element which is similar to linked items, but specifically for linking web pages to each other.
3. Your live preview site shown inside Kontent alongside the tree for the page you have selected, with editable items and fields highlighted and linked with 'edit' icons.
4. The ability to edit those fields right there without leaving the Web Spotlight interface.
5. A 'Smart Link SDK' that you install into your preview site, regardless of the tech you used to build it. Jamstack, static, dynamic, PHP, .NET, it doesn't matter.

TL;DR? It looks like this:

Background reading:

• Kentico's own Web Spotlight microsite
• An introductory webinar from Kontent that shows it in action
• The documentation (for the nerds like me who just want to know how it works)
• A guide to implementation in existing websites by Tomas and Jan from Kentico

Implementation in a .NET Core website

As you may have read, we built our site on Kontent a couple of years ago. Our technology of choice was .NET Core MVC hosted in Azure Web Apps, which is very different to some of the more popular recent choices such as using a static site generator and the Jamstack. Luckily for us, this makes very little difference!

The process was the same as it is for any website:

1. Enable Web Spotlight (speak to your friendly local Kontent sales representative)
2. Connect your pages together in your content model using the new Subpages element
3. Install the Smart Link SDK in your preview site.

The documentation handles items 1 and 2 very nicely, so today I'll just touch on how I dealt with item 3 – installing it into my .NET Core MVC website.

Installing the Kontent Smart Link SDK

Installing the Smart Link SDK boils down to three steps:

1. Include a CSS stylesheet (from a CDN)
2. Include a JS script file (from a CDN)
3. Add data- attributes to your markup, to flag where content items and field values are in your markup.

You want your markup in your preview site to end up being littered with data-kontent-item-id and data-kontent-element-codename attributes, like so:

There are plenty of simple ways to do this in your code, but I wanted to implement it such that:

1. It only showed in my preview environment, not my live site
2. My Razor views stayed as clean and readable as possible, with little-to-no logic in them
3. It would be quick and easy to roll it out across the whole site, with tens or hundreds of views requiring tiny changes
4. It would be super easy to implement in any other/future sites (mine or yours!).

Enter: Tag Helpers.

Implementation as a .NET Core MVC Tag Helper

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;

namespace Luminary.WebApp.TagHelpers
{
    [HtmlTargetElement(Attributes = "kontent-*")]
    public class KontentTagHelper : TagHelper 
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);

            // only add data attributes if Web Spotlight should be active
            var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
            var isPreview = (environment == "Preview" || environment == "Development");

            if (isPreview)
            {
                var elementCodename = context.AllAttributes["kontent-codename"];
                var itemid = context.AllAttributes["kontent-id"];
                if (elementCodename != null)
                {
                    output.Attributes.Add("data-kontent-element-codename", elementCodename.Value);
                }
                if (itemid != null)
                {
                    output.Attributes.Add("data-kontent-item-id", itemid.Value);
                }
            }

            // remove original taghelper attributes
            output.Attributes.RemoveAll("kontent-codename");
            output.Attributes.RemoveAll("kontent-id");
        }    
    }
}

This custom tag helper lets me add the required attributes to my markup super easily using just kontent-id or kontent-codename, and make sure they only show in my development and preview environments (not the live site). To enable in-context editing of this very Code Snippet component I am using to demonstrate (very meta), I just then need to add my custom kontent-id and kontent-element attributes like so:

@model CodeSnippet
@{
    Layout = null;
    var pluginClass = @Model.ShowLineNumbers.IsYes() ? "line-numbers" : "";
    var languageClass = @Model.Language;
}
<div class="ct-code-snippet" id="@Model.System.Codename" kontent-id="@Model.System.Id">
    <div class="container" kontent-codename="@CodeSnippet.CodeCodename">
        <pre class="@pluginClass"><code class="language-@languageClass">@Model.Code</code></pre>
    </div>
</div>

Et voila – Web Spotlight now highlights my code snippet inside the interface as editable, and allows me to click the little edit icon to edit it in place, without leaving the Web Spotlight live preview interface.

The code snippet has been highlighted with a dashed blue outline, and a blue edit icon added top right.

Hot tip

If you add the Smart Link SDK to your site, but you don't have access to Web Spotlight, it will simply give you a 'deep link' from your preview site directly into Kontent (in a new tab) to edit the exact item and element you selected to edit. This is a huge quality of life improvement for your editors, so I'd recommend doing this on every Kontent website you produce, even without the full Web Spotlight functionality.

Availability

It's available right now! Go ahead and implement the Smart Link SDK immediately, and enablement of the full Web Spotlight experience is a simple server side switch away for your project (but of course it comes with a cost – talk to Kontent for that!).

If you're not a Kontent customer yet, you can use my special link to get an extended trial.