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.

Features

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

Installation

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 Alokai 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.

Frontend Implementation

Add the ASM panel component to your layout:

1. Add the ASM panel component to your layout

In your root layout file, add the <AsmPanel /> component. Also, provide the newly added translations to the main layout. To do that, you need to include the SapAsm key to the <NextIntlClientProvider /> component:

// storefront-unified-nextjs/app/[locale]/layout.tsx

import './globals.scss';
import { AsmPanelClient } from '@sf-modules/sap-asm'; // ...

export default async function RootLayout({ children, params: { locale } }: RootLayoutProps) {
  // ...

  return (
    // ...
    <NextIntlClientProvider messages={pick(messages, 'Notifications.NotificationAlert')}>    <NextIntlClientProvider messages={pick(messages, 'Notifications.NotificationAlert', 'SapAsm')}>      <PublicEnvProvider>
        <Providers initialCurrency={currencies} sdkOptions={sdkConfig}>
          <AsmPanelClient />          {children}
        </Providers>
      </PublicEnvProvider>
    </NextIntlClientProvider>
    // ...
  );
}

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, e.g.: https://my-domain.com/category?asm=true. 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 here. 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.

Customer Search

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.

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.