🎉 Weekly Win (27/2021)
Tags: win, gatsby, development, lessonlearned
Published: 2021-06-30 20:04:47

##TL;DR
Kentico Kontent support is fantastic. If you're stuck, reach out to them!

##Why Did I Need Support?
Web Spotlight.

>*Sorry—web what, now?*
 
I'm glad you asked (otherwise this would have been a very short post indeed).

##Headless for Those with Heads
Kentico Kontent is a 100% headless CMS. It ticks all the boxes:
* API-first
* Technology agnostic
* Channel agnostic
* Software-as-a-Service
* Has the word "*content*" in its name, kinda.

All cool stuff, *but*...

If you're making websites with a headless CMS, then the fact you can't easily see what you're doing—outside of having the site open in another tab—can make updates a little tiring (a lot of clicking through nested content items to find that one bit of text you need to update).

⚠️ Personal Opinion Alert: [headless could be better](https://dev.to/meandmyrobot/headless-cms-just-isn-t-good-enough-26a6).

## Kentico Kontent is Better
A really great differentiator between Kentico Kontent and other headless CMS platforms is an app extension developed by Kentico called [Web Spotlight](https://webspotlight.kontent.ai/). Web Spotlight extends Kentico Kontent with visual page building.

![Image shows the Web Spotlight user interface. A web page has edit buttons beside the text.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baenurt7wzhn0xfpz3td.png)
<figcaption>Click the edit button (pencil icon) beside the text in your web page to edit the content in your content inventory.</figcaption>
&nbsp;

You can see the web page you're working on *within* the Kentico Kontent app. This provides an easy visual way to find and edit content, versus digging through your content model. *Sweeeeet* 🙌

## Let Me Play with the New Features—NOW!
Web Spotlight just released a bunch of new features. The biggest of these is the **Add Button**. This swanky feature allows editors to add components into the page they're working on.

![Image shows the updated Web Spotlight UI. The web page has circular add buttons that editors can press to add components to pages.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl1vsjlridktlx9fvg38.png)
<figcaption>New orange buttons! Click them to add or create components into your web page.</figcaption>
&nbsp;

Needless to say, once I spied the announcement on the update, I was eager to get the Add Button working on our site (Kontent + Gatsby). We're doing a bit of a refactor with the content model, so I'm already knee-deep in migration scripts. Where to start? The homepage.

###Steps
1. Read [the docs](https://github.com/Kentico/kontent-smart-link)
2. Make a feature branch
3. Make sure I'm on the latest version of the Kentico Kontent Smart Link SDK
4. Add some code (new data attributes)
5. Paranoid check I'm playing in the Kentico Kontent development environment and not production 😉
6. `gatsby develop -S` because I'm impatient and can't be bothered with ngrok at this exact moment
7. Update the homepage preview URL in Kentico Kontent to `https://localhost:8000`
8. See the new Add Button (\#*win*)
8. Click on the new Add Button (heart now racing)
9. And...

![WOMP WOMP](https://media.giphy.com/media/ySpxjJmsq9gsw/source.gif "WOMP WOMP")
<figcaption>WOMP WOMP.</figcaption>

## Sad Face 🙁
Nope. Error. Something about "*missing data attributes*"—even though they were right there in the code. RIGHT THERE. I should be looking pretty. All other Web Spotlight features are working. The Kentico Kontent SmartLink SDK is hooked up correctly. Why?!

## Support to the Rescue
I was about to stomp off to the kitchen to comfort eat when I spotted the wee-help-thingamajig in Kentico Kontent's UI:

![Support Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4qxkplkqv3w3xrqtw3m.png)
<figcaption>Talk to—and get support from—a REAL person.</figcaption>
&nbsp;

Yes. Yes, I do have questions. I quickly typed up the issue I was experiencing and within a minute a very polite and capable chap called Keith started helping me through the issue.

I explained that I was trying to set up the Add Button with a Linked Item Element (supported). We talked through the model, and I mentioned that the Linked Item Element was coming from a Content Snippet, and that this was the only thing that stood out as maybe being unique to what I was trying to do.

He agreed and said he'd go pester the developers to ensure that the use case of having the Add Button configured to a content element coming from a Content Snippet is actually supported.

## The Win?
It wasn't supported. Wait, isn't that a \#*fail* and not a \#*win*? Isn't now the time to slink off into the shadows and just avoid using the Add Button on the homepage?

Absolutely not! The \#*win* here is the support provided by Kentico Kontent. In less than a week the developers had coded, tested, and deployed a fix. Not only that, but Keith kept me up to date the entire time on their progress via the chat support feature in Kentico Kontent.

## It Works!
Behold. The first Add Button of many.

{% youtube G71NockBqdo %}
<figcaption>Adding a new component to the homepage. Refresh status and quick update thanks to Gatsby and incremental builds.</figcaption>
&nbsp;

Onwards with the refactoring!