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

Web Spotlight is a brand new add-on for Kontent by Kentico that brings many of the features marketers miss from traditional web content management systems into their pure headless CaaS platform, including a tree-based navigation structure, real-time preview and in-context editing of pages. And the good news is, it is super easy to set up, regardless of what language you used to implement your website.

Andy Thompson pulling a funny face

By Andy Thompson, 5 minute read

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:

Kontent Web Spotlight interface

Click to view the screenshot in its full glory

Background reading:

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:

HTML code snippet with Smart Link SDK attributes

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="[email protected]">@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.

Kontent Smart Link SDK highlighting a code snippet component as editable

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.


Goodbye Kentico Cloud, hello Kontent!

Andy Thompson pulling a funny face

By Andy Thompson, News, Kentico, Kentico Cloud, Headless CMS 4 minute read

Kentico Cloud has undergone a rebrand, and is now called Kontent. In my opinion, it was long overdue! You might have seen the marketing from Kentico about the new name and image, but here are my thoughts on the transformation from the agency side.

Andy Thompson pulling a funny face

Andy Thompson

CTO, Kontent MVP, Xperience MVP

As our CTO, Andy heads up our developer teams, platforms and technology strategy.

Emmanual Tissera

Emmanuel Tissera

Technical Lead, Umbraco MVP

As Technical Lead, Emmanuel works closely with our clients while providing leadership and mentoring to the development team.

Thai Tran

Thai Tran

Web Developer

Thai is like the Swiss Army Knife of developers - flexible, adaptable and always dependable.

We built our new site using Kentico Cloud (and a few other microservices)

We built our new site using Kentico Cloud (and a few other microservices)

Andy Thompson pulling a funny face

By Andy Thompson, Strategy, Kentico, Development, Kentico Cloud, Headless CMS 10 minute read

We've been preaching the benefits of headless CMS and microservices architecture to our clients for a couple of years now. So I decided it was time to put my money where my mouth is!

Holding Redlich

Law firm Holding Redlich was looking for a site that would convey a sense of approachability and provide easy access to the firm's substantial library of content.

legalsuper

legalsuper chose to use Kentico Cloud – Kentico’s headless CMS offering – as the platform for its new website.

Luminary announced as Kentico Kontent Premium Partner

Luminary announced as Kentico Kontent Premium Partner

Tami Iseli

By Tami Iseli, 1 minute read

Luminary has become the fourth agency worldwide to be afforded Kentico Kontent Premium Partner status.