SitecoreAI

Building an Image Map Editor for the SitecoreAI Marketplace

Tobias Studer

Tobias Studer

— 5 min read
Building an Image Map Editor for the SitecoreAI Marketplace

Since the Early Access days of XM Cloud, we experimented with different ways to extend or customize the Sitecore editor. While customization was possible within your application’s boundaries, there were no official extension points. That changed with the introduction of the SitecoreAI Marketplace - and we’re excited to explore these new capabilities.

Setting the scene

We wanted to build an image component with interactive elements. As a content author, you should be able to select an image and define clickable areas that display a dialog with more details. On the website, the component looks like this:

An interactive graphic component

The hard part wasn’t rendering the component—it was creating an intuitive editing experience so authors wouldn’t need external tools to define clickable areas.

Our solution? A custom field extension for the Marketplace.

Building the Data Foundation

Before diving into the fun part, we needed a solid data structure. This is classic Sitecore development:

  • Dialog Items: Define fields for each interactive point on the image (Interactive Graphic Point).
  • Folder Structure: Organize these items for better management.
The data model for the dialogs

Additionally, we define a datasource item:

  • Datasource Item: Holds the component’s fields, including one that assigns available Interactive Graphic Points. This makes it easier to hand over point items to our Marketplace plugin.
The content item for the component

The plugin itself is connected to the InteractiveGraphicPlugin field on the template. To connect a template field to a Marketplace App (custom field extension), set the field type to Plugin and add the App ID in the source field.

Define the plugin field in the data template

Configuring the Marketplace App

To add a Marketplace App to SitecoreAI, open the App studio from the Cloud Portal and click Create app. Our plugin will not be public, so we select Custom and click Create.

Create app dialog

You will then be asked to configure your app. As we only want a Custom field for the Page builder, we enable the corresponding switch and set a Route URL.

Configure the app in the App studio

You will not yet have a Deployment URL of your app. Skip this step for now. We can go back here later and update the configuration.

Implementing the app

We based our app on the Sitecore Marketplace Starter template on GitHub. The app persists data as a string, so we chose JSON to store clickable areas with coordinates, dialog links, and types:

{
    "areas": [
        {
            "x": 7.801418439716312,
            "y": 39.425992693584206,
            "link": "Interactive-Graphic-Point-2",
            "type": "point"
        },
        {
            "x": 48.02431610942249,
            "y": 25.21429765287362,
            "link": "Interactive-Graphic-Point-3",
            "type": "point"
        },
        ...
    ]
}

Our app, which is a custom editor to add, update and remove clickable areas on the image and link them to a dialog, also needs the information about the image and the available dialogs. Unfortunately, it does not seem that you can pass the values of additional fields to the app at this point in time. Therefore, we had to work around this limitation by allowing the content authors to copy and paste the relevant information to the editor.

The component in Page builder

To load the editor, you copy the data, click Open app and paste the information to the dedicated field.

The custom image map editor

To add a new point, you can click anywhere in the image. The coordinates get calculated automatically and you only need to assign a link to the desired dialog. You can also click an existing point to edit or remove it. Once you are done, click the Save and Close button to write the data back to the plugin field.

Hosting the app

Marketplace apps need hosting. We used Vercel, where our SitecoreAI head app already runs. With GitHub integration and automatic deployments, hosting is effortless. The Vercel domain becomes your Deployment URL in App Studio.

Vercel hosting of the image map editor

Installing the app

Once your Marketplace App is ready, you can activate it. As a last step, you need to install it in all SitecoreAI environments that need access.

Installing the Marketplace App

Checking the permissions

After we set up and installed the app, not all content authors had full access to it. For most users, the Open app button in Page builder was missing. As it turns out, you have to allow access to non-admin users in the Admin panel of the portal. By default, the users do not have access to the Marketplace App.

Allow access in the admin portal
💡
By default, a user does not have access to a Marketplace App. You need to enable it in the admin portal. Without access, the Open app button will be missing in Page builder.

Wrapping Up

Building a custom Image Map Editor for SitecoreAI Marketplace was more than just a technical exercise - it showcased how flexible and powerful the new extension points can be. By combining Sitecore’s robust data model with a lightweight, hosted app, we created an intuitive experience for content authors without relying on external tools.

While the solution works well, there are limitations—such as the inability to pass additional field values directly to the app. These constraints require workarounds like manual copy-paste, which isn’t ideal. We’re excited to see how Sitecore evolves its Marketplace capabilities and hope future updates will make integrations even more seamless.

Read more