Configure Agentforce Service Agent to Initiate Context-Driven Conversations on the Salesforce Mobile App

Due to the limited screen space on mobile devices, auto-triggering Agentforce Service Agent when a user enters a search query may be intrusive and distracting to the user. For an elevated experience, create a custom LWC component for your experience site that allows users to choose whether they want Agentforce Service Agent to help them with their queries. This feature is designed to enhance user experience by providing a more intuitive interaction with Agentforce Service Agent. Customize the name and appearance of the custom component to match your experience site’s theme.

Required Editions

View supported editions.

Before you begin, make sure the custom component is visible only on the Salesforce mobile app and not on the desktop site.

Create and deploy a custom LWC component for your experience site that fetches the user information.

In the newly created custom LWC component folder, use this template of the custom component.

Replace [Master Label] and [Description] as shown in this .js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>62.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>[Master Label]</masterLabel>
<description>[Description]</description>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
</LightningComponentBundle>

Configure the .js file. Name the custom event.

import { LightningElement } from 'lwc';

export default class BannerForUnifiedSearchMobile extends LightningElement {

handleClick() {
var clickedEvent = new CustomEvent('custombuttonclicked',
{
bubbles: true,
composed: true
});
// Dispatches the event.
window.dispatchEvent(clickedEvent);
}
}

Replace [Button Label] and [Mobile Button] as shown in this .html file.

<template>
    <lightning-button label=[Button Label] onclick={handleClick} class=[Mobile Button]></lightning-button>
</template>

Configure the .css file.

.mobile-button {
 display: none;
}

@media (max-width: 768px) {
 .mobile-button {
 display: inline-block;
 }
}

In the Experience Site Builder, drag your custom LWC component on the Search Results page.

Go to Settings | Advanced | Edit Head Markup. Paste ‌this sample script into the head markup. Make sure you use the same event name as configured in step 1.b.

<script>
window.addEventListener('custombuttonclicked', function() {
try {
embeddedservice_bootstrap.utilAPI.launchChat().then(() => {
//do something
}).catch(() => {
alert("MIAW not ready yet!");
});
} catch(error) {
alert("MIAW not initialized yet!");
}
});
</script>

Save and publish your changes.