Explore. Build. Grow
Explore. Build. Grow

Our flexible three-stage framework to craft digital experiences.

Learn more
Expertise
Outcomes
View our portfolio
View our portfolio

Explore our range of digital solutions.

Learn more
Industries
Optimizely
Optimizely

Kentico
Kentico

Umbraco
Umbraco

DXP
Headless
Cloud Platforms
Marketing Optimisation
Contact Us
Contact Us
Explore. Build. Grow
Explore. Build. Grow

Our flexible three-stage framework to craft digital experiences.

Learn more
Expertise
Outcomes
View our portfolio
View our portfolio

Explore our range of digital solutions.

Learn more
Industries
Optimizely
Optimizely

Kentico
Kentico

Umbraco
Umbraco

DXP
Headless
Cloud Platforms
Marketing Optimisation
Contact Us
Screenshot of Kontent's Web Spotlight interface
Home / Insights / ＿

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
Andy Thompson

07 September 2020

4 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="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.

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.

Andy Thompson
Andy Thompson

07 September 2020

4 minute read

Enjoyed this article? Share it...

Our Kontent.ai expertise

Luminary has some of the most experienced headless CMS experts in the world, including Kontent.ai MVPs Andy and Adam, as well as Emmanuel, the developer of the first Kontent powered website in the world!

Picture of Luminary CTO Andy smiling with a black background

Andy Thompson

CTO, Kontent.ai MVP, Kentico MVP, Owner

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

Adam Griffith

Adam Griffith

Managing Director & Owner

Adam is a trusted advisor for our clients, and welcomes new clients to the Luminary community.

UNICEF Australia

UNICEF Australia engaged Luminary to undertake a complete website rebuild, from discovery through to continuous improvement.

Melbourne Airport

Implemented by Luminary and designed by Hardhat, the Melbourne Airport website is a future-focused digital platform built on headless CMS platform Kontent.ai.

3D cartoon image of a rocket launching

7 min read

We rebuilt our website on the Jamstack (without changing CMS)

You may not notice just by looking at it, but a few weeks ago we launched a completely rebuilt front end (or 'head') for our website. The new Jamstack tech is great, but the coolest part of all is that there was zero downtime, no content freeze, and no SEO impact (except positive!), as our existing headless CMS remained unchanged behind the scenes.

Andy Thompson
Andy Thompson

05 July 2022

7 minute read

Cancer Council Australia

Cancer Council is the nation’s leading cancer charity, and the only Australian charity working across every aspect of every cancer.

legalsuper

legalsuper approached Luminary following a significant brand refresh and was faced with the predicament of redesigning and redeveloping their existing website or investing in a new build on a more suitable technical platform to suit their future needs.

 Emmanuel Tissera

Emmanuel Tissera

Technical Director, Umbraco MVP

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

Luminary Tech Lead Emmanuel Tissera working on laptop with Raddo and Tony

1 min read

Luminary announced as Kentico Kontent Premium Partner

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

Tami Iseli
Tami Iseli

24 April 2020

1 minute read
HealthyLife website

Healthylife

Healthylife – part of the Woolworths Group – is a digital startup that provides customers with health and wellness advice, services and products.
Cute dog looking wistful

Pet Culture

Backed by Woolworths and pet insurance specialists PetSure, PetCulture is a new online destination for pet owners.
What is headless cms

7 min read

What is a composable DXP?

As enterprises increasingly look to adopt Headless CMS, best-of-breed SaaS services, and API-first microservices architectures, the role of the traditional monolithic Digital Experience Platform (DXP) is gradually being reduced in many cases. Yet the requirement for a full suite of complementary digital marketing and experience management services remains. Enter: the composable DXP.

Andy Thompson
Andy Thompson

11 May 2022

7 minute read

5 min read

How do you handle online forms with Kontent.ai?

There are a few questions we regularly field when introducing the concept of a Content as a Service to people. After explaining the terms 'headless' and 'microservices', we invariably hit the topic of online forms - a staple feature of any traditional web CMS, but curiously absent from the feature list of your modern-day headless CMS.

Andy Thompson
Andy Thompson

03 June 2022

5 minute read

 Picture of front end developer, Drew

Drew Foster

Technical Director

As Technical Director, Drew's focus is on supporting and mentoring our front end development team.

8 min read

Is a headless CMS good or bad for SEO?

Using a headless CMS for a website isn't going to hurt your SEO. It sure doesn't guarantee good results, but when implemented properly, it can be unbeatable.

Andy Thompson
Andy Thompson

19 November 2020

8 minute read

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.

Keep Reading

Want more? Here are some other blog posts you might be interested in.

Follow
Contact Us
1300 554 891
hi@luminary.com

Our locations

Stay informed
Our best articles, observations and news delivered to your inbox
Subscribe
Flags

We acknowledge the Traditional Custodians of the land on which we work, live and engage. We pay respect to Elders past and present.

Luminary is a registered trademark of Luminary Digital Pty Ltd

Terms of Services
Privacy Policy