Vue Storefront is now Alokai! Learn More
Assisted Service Mode

SAP Commerce Cloud: Assisted Service Mode

The Assisted Service Mode (ASM) is a module that allows customer support agents to emulate customers and perform actions on their behalf. This powerful tool provides a seamless way for support agents to assist customers in real-time, enhancing the overall customer experience.


The Assisted Service Mode module provides a set of features designed to enhance customer support process, such as:

  • UI component to manage the emulation process
  • Customer search with autocomplete
  • Emulation of the customer's account
  • Cart binding
  • Session timer
  • Customer 360 view
  • Additional API methods on the middleware layer


Prerequisite: Make sure you have the @vsf-enterprise/unified-api-sapcc package at least in version 0.22.4 installed in your project.

Add the module files

To install the module, you need an enterprise license and credentials. Contact your Customer Success Manager if you're already a customer. If you're not a customer yet, contact our sales team.

From the root of your project run the following command:

npx @vsf-enterprise/storefront-cli add-module sap-asm -e [sapcc,sapcc-b2b]

Follow the instructions in the command line to complete the installation. To make sure the installation is finished, go to the apps/storefront-middleware/sf-modules folder and check if there's a folder named sap-asm inside.

Middleware Extension

This module expands your SAP capabilities with essential middleware methods. Extend your middleware configuration to start using the Assisted Service Mode (ASM).

// storefront-middleware/integrations/sapcc/config.ts

import type { MiddlewareConfig } from "@vsf-enterprise/sapcc-api";
import type { ApiClientExtension, Integration } from "@vue-storefront/middleware";
import { asmExtensionFactory } from "@sf-modules-middleware/sap-asm"; import { multistoreExtension, unifiedApiExtension } from "./extensions";

// ...

export const config = {
  location: "@vsf-enterprise/sapcc-api/server",
  configuration: {
    // ...
  extensions: (extensions: ApiClientExtension[]) => [
    ...(IS_MULTISTORE_ENABLED === "true" ? [multistoreExtension] : []),
    asmExtensionFactory(),   ],
} satisfies Integration<MiddlewareConfig>;

The ASM module requires an overridden version of the logoutCustomer method. To enable that version, edit the Unified extension:

// storefront-middleware/integrations/sapcc/extensions/unified.ts

import { createUnifiedExtension } from "@vsf-enterprise/unified-api-sapcc";
import { asmOverrideMethods } from "@sf-modules-middleware/sap-asm"; // ...

export const unifiedApiExtension = createUnifiedExtension({
   methods: {      override: {        ...asmOverrideMethods     },    }, // ...

Then, export the type of the new extension in the types.ts file in the root directory of the Middleware.

// storefront-middleware/types.ts

export {
  type UnifiedEndpoints,
} from "./integrations/sapcc/types";

export type { AsmEndpoints } from "@sf-modules-middleware/sap-asm"; 

Frontend Implementation

Add the ASM panel component to your layout:

1. Extend SDK configuration

First, you need to add the newly installed extension to the SDK config. To do so, edit the sdk/sdk.config.ts file in your Next.js Storefront directory.

// storefront-unified-nextjs/sdk/sdk.config.ts

import { contentfulModule } from '@vsf-enterprise/contentful-sdk';
import { CreateSdkOptions, createSdk } from '@vue-storefront/next';
import type { UnifiedEndpoints } from 'storefront-middleware/types'; import type {   UnifiedEndpoints,   AsmEndpoints, } from 'storefront-middleware/types'; 

export const { getSdk } = createSdk(options, ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
  unified: buildModule(middlewareModule<UnifiedEndpoints>, {
    apiUrl: `${middlewareUrl}/commerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
  asm: buildModule(middlewareModule<AsmEndpoints>, {     apiUrl: `${middlewareUrl}/commerce/asm`,     defaultRequestConfig: {       headers: getRequestHeaders(),     },   }),   contentful: buildModule(contentfulModule, {
    apiUrl: `${middlewareUrl}/cntf`,

export type Sdk = ReturnType<typeof getSdk>;

2. Add the ASM panel component to your layout

In your main _app.tsx file, add the AsmPanel component along with the useAsmUi hook:

// storefront-unified-nextjs/pages/_app.tsx

import { useEffect, useState } from 'react';
import { NextPage } from 'next';
import type { AppProps } from 'next/app';
import { AsmPanel, useAsmUi } from '@sf-modules/sap-asm'; // ...

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const notification = useNotification();
  const { isVisible } = useAsmUi();   // ...

  return (
    // ...
        // ...
        <div className={classNames(fontHeadings.variable, fontBody.variable, 'font-body')}>
          {isVisible && <AsmPanel />}          <Component {...pageProps} />
    // ...

For better performance, consider loading the AsmPanel component lazily. Combined with the isVisible property from the useAsmUi hook it will only be loaded when required by your CS agent. You can achieve it by using the Next.js's dynamic function.

// storefront-unified-nextjs/pages/_app.tsx

import dynamic from 'next/dynamic';

const AsmPanel = dynamic(() => import('@sf-modules/sap-asm/components/AsmPanel'), {
  ssr: false,

How to use the ASM module

UI Panel

The ASM module introduces an additional panel to the user interface. This panel is where the ASM Agent logs in using a single login form. Once logged in, the agent can search for a specific customer.

You can display the ASM panel by adding the asm=true query parameter, f.e.: You can add this parameter to any page URL to open the ASM panel since the component is added globally on the app level.

Logging in as an ASM Agent

To login as an ASM Agent, you need to provide the credentials of the Customer Support Agent. This user must have the necessary permissions to access the ASM module. You can configure it in SAP Backoffice. Logging in with a regular customer account credentials will be rejected.

ASM Agent login form

Only one user session can be active at a time. You can either be logged in as a ASM Agent or the customer, but not both at the same time. If you are logged in as a customer, you need to log out before logging in as an ASM Agent.

Once logged in as an ASM Agent, you can search for a customer by typing their name, email, or any other identifying information. The ASM module will display a list of matching customers, and you can select the one you want to emulate. Customer search

Emulating a Customer

When you select a customer to emulate, the ASM module will switch to the customer's account. The cart, personal data, and other information will be displayed as if you were the customer. During the emulation, every action that you will perform will be done on behalf of the customer, such as:

  • Adding or removing products from the cart
  • Changing the quantity of products in the cart
  • Modifying the customer's personal data
  • Applying discounts
  • Creating and viewing orders

Emulation Control

The ASM Agent can stop the emulation at any time and start it again for a different customer. This flexibility allows the agent to assist multiple customers in a single session.

Customer emulation

Cart Binding

During the emulation, the ASM Agent can bind a different cart ID to the emulated customer.It can be achieved by providing a new cart ID within a modal. This action will replace current customer's cart. This feature allows the agent to manage the customer's shopping cart effectively. Bind cart to customer

Only a cart created by logged out customer or created without an active emulation can be bound to the emulated customer's account.

Customer 360 View

View all the customer's information in one place. The ASM module provides a 360 view of the customer, including personal data, orders, and other relevant information. This feature allows the ASM Agent to quickly access the customer's details and provide better support. Customer 360 View

Session Timer

While the ASM Agent is logged in, a timer is displayed Session timer, showing the time remaining until the ASM Agent's session automatically ends. This feature ensures that the agent's access to the customer's account is limited and secure.

Session time will be prolonged after each page navigation or page refresh.

The Assisted Service Mode (ASM) module is a powerful tool for enhancing customer support. By allowing agents to emulate customers and perform actions on their behalf, it provides a seamless and efficient way to assist customers in real-time.