Environment-specific badges in the Optimizely CMS

Step 1: Add Environment Info to the UI

Create a custom UIDescriptor and a ComponentDefinition to inject a badge into the CMS UI.

using EPiServer.Shell;
using EPiServer.Shell.ViewComposition;

[UIDescriptorRegistration]
public class EnvironmentBadgeUIDescriptor : UIDescriptor
{
    public EnvironmentBadgeUIDescriptor()
        : base("environment-badge")
    {
        DisabledViews = new string[] { };
    }
}

Step 2: Add a Client Resource

Create a JavaScript file that will render the badge in the CMS UI.

define([
    "dojo/_base/declare",
    "epi/_Module",
    "dojo/dom-construct",
    "dojo/domReady!"
], function (declare, _Module, domConstruct) {
    return declare([_Module], {
        initialize: function () {
            this.inherited(arguments);

            var env = window.cmsEnvironment || "Production";
            var color = {
                Development: "#007bff",
                Staging: "#ffc107",
                Production: "#28a745"
            }[env] || "#6c757d";

            var badge = domConstruct.create("div", {
                innerHTML: env,
                style: `
                    position: fixed;
                    top: 10px;
                    right: 10px;
                    background-color: ${color};
                    color: white;
                    padding: 5px 10px;
                    font-weight: bold;
                    border-radius: 4px;
                    z-index: 9999;
                `
            }, document.body);
        }
    });
});

Step 3: Register the Module in module.config

<module>
  <clientModule initializer="environment-badge">
    <requiredResources>
      <add name="epi.shell" />
    </requiredResources>
  </clientModule>
</module>

Step 4: Set the Environment in Razor or Layout

In your _Layout.cshtml or a shared Razor view:

<script>
    window.cmsEnvironment = '@Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT")';
</script>

When editors log into the CMS, they’ll see a badge in the top-right corner showing the current environment, color-coded for clarity.