Connections 2025 Demo: Boost Telecom Revenue with Personalized Upselling

This solution was presented at Salesforce Connections 2025, June 12th. It showcases how you can personalized your website based on a chat conversation you have with a Agentforce chatbot. The demo can be tested by going to the following link.

NOTE: You can ask about mobile devices, mobile plans, internet plans, bundles, entertainment or streaming options to trigger a personalization. Please keep in mind that the Agent will be able to understand only simple inquiries as this is just a simple demo.

DISCLAIMER: This software is to be considered "sample code", a Type B Deliverable, and is delivered "as-is" to the user. Salesforce bears no responsibility to support the use or implementation of this software.

Table of Contents

• Connections 2025 Demo: Boost Telecom Revenue with Personalized Upselling
• Table of Contents
  • What does it do?
  • How does it work?
    • Architecture diagram
  • Demo: Agentforce chat personalization
  • Technologies used
• Configuration
  • Requirements
  • Setup
    • Local environment configuration
    • Development
    • Salesforce environment
      • Data Cloud
      • Salesforce Flows
      • Personalization
      • Prompt
      • Apex Class
      • Custom Metadata Types
      • Agentforce
  • Deployment
    • Can I deploy this anywhere else other than Heroku?
• Kudos
• License
• Disclaimer

---

What does it do?

This project demonstrates how to leverage Salesforce Personalization to tailor a user’s experience based on real-time chat interactions. By integrating an Agentforce chatbot with Salesforce Data Cloud event streaming, the application listens for user messages in chat sessions.

The chat messages are then picked up by the Salesforce backend and makes it ready for Salesforce Personalization.

When an incoming message is detected, it triggers a network call to the Salesforce Personalization which delivers individualized recommendations. This ensures that web content, product suggestions, and visual styling are dynamically adapted to each user’s conversation context, providing a customized and engaging experience.

How does it work?

Architecture diagram

The application flow is the following:

Client

1. The user navigates to the website URL
2. The browser sends a request to the hosting server, in this case that is a Heroku dyno
3. The Heroku returns HTML and Javascript, and Javascript hydrates the website
4. During the page load, the Data Cloud Web SDK also gets loaded into the website
5. During the page load, the Salesforce Embedded Chat also gest loaded into the website
6. Various web events get captured based on the pre-defined web event JSON schema and custom react useSalesforceInteractions.ts hook
7. As part of the website load, the Agentforce chat also gets initialized
8. The deviceId is automatically generated by the Data Cloud Web SDK once the SDK is successfully loaded
9. The deviceId is then provided to the Agentforce chat on every sent message via the Prechat API

Salesforce Backend

1. The incoming chat message from the Agentforce chat is picked up by a Salesforce Agent
2. The Salesforce Agent has a dedicated Topic assigned to it
3. The assigned Topic has an Action that invokes a Salesforce Flow
4. Salesforce Flow takes the provided chat message and the deviceId from the Agent Action
5. The Flow invokes a custom Prompt
6. The custom Prompt is instructed to deduce the product category based on the provided chat message and the provided product catalog
7. Once the LLM deduces the product category, it will then return that in a specific format: category,id
8. The returned data gets passed back to the Salesforce Flow
9. Salesforce Flow takes the provided product category data and passes it off to a custom Apex class
10. The custom Apex class writes the data back to the Data Cloud's real-time Data Graph

Client Personalization

1. The client sends a message to the Salesforce Personalization endpoint via the Data Cloud Web SDK once the Agentforce chatbot responds
2. The Salesforce Personalization engine queries the real-time Data Graph for latest data
3. The Salesforce Personalization engine decides what the are appropriate product recommendations
4. The client receives the product recommendations from the Salesforce Personalization endpoint
5. Finally, the client makes the changes on the web page

Demo: Agentforce chat personalization

Technologies used

Client

• Vite
• React
• TypeScript
• Zustand
• Tailwind
• Data Cloud SDK
• Salesforce Embedded Chat

Salesforce

• Salesforce Data Cloud
• Data Cloud Data Graphs
• Salesforce Flows
• Apex
• Prompts
• Salesforce Personalization
• Agentforce

Configuration

Requirements

To run this application locally, you will need the following:

• An active Salesforce account with Data Cloud, Embedded Service, and Personalization provisioned
• Node.js version 20 or later installed (type node -v in your terminal to check). Follow instructions if you don't have node installed
• npm version 10.0.0 or later installed (type npm -v in your terminal to check). Node.js includes npm
• git installed. Follow the instructions to install git
• [deployment only] A Heroku account

Setup

Local environment configuration

The first step is to clone the repository and install the project dependencies for the client folder via a terminal interface by running the npm install in the proper folder:

Client:

cd salesforce-connections-demo/client
npm install

The second step is to create a .env file in both the client folder. Find the .env.example files, copy and rename it to .env.

Client:

cd salesforce-connections-demo/client
cp .env.example .env

Edit the newly created .env files and update the variables with your account specific information.

# Salesforce Data Cloud details
VITE_DATA_CLOUD_WEB_SDK_URL=

# Embedded chat details
VITE_CHAT_ORG_ID=
VITE_CHAT_SCRIPT_URL=
VITE_CHAT_INSTANCE_URL=
VITE_CHAT_EMBEDDING_URL=
VITE_CHAT_EMBEDDING_API_NAME=

# Salesforce Personalization recommendation endpoint
VITE_PERSONALIZATION_ENDPOINT=

Once all of this is done, you are ready to run the application locally!

Development

To run the application locally, use the command line, navigate to the client folder, ensure the dependencies are installed properly, and run the following:

cd salesforce-connections-demo/client
npm run dev

This will automatically run the development server. Your client app will run on http://localhost:5173.

When you make changes to your code, the server will automatically restart to fetch new changes.

Salesforce environment

In order for this application to work end to end, there are several Salesforce configuration steps that have to happen first.

Data Cloud

1. Within Data Cloud, the first step is to configure a Website connector using the provided web event schema.
2. Configure Data Streams for the newly configured Website connector and map the fields appropriately for both behavior and individual data streams (if you don't want to use custom events, Product Browse Engagement is the only DMO you should map for the behavioral events)
3. The Chat Activities, User Logged In, and User Logged Out are custom Data Model Objects that have a N:1 relationship to the Individual DMO
4. Ensure you have a real-time Identity Resolution running
5. Create a real-time Data Graph

Please note that the Chat Activities, User Logged In, and User Logged Out are custom Data Model Objects and are NOT needed for this demo. They are here as an example if you want to track these custom events

Please note that if you don't want to use custom events, just use the Product Browse Engagement in your real-time Data Graph

6. Create an Item Data Graph

7. Create a Calculated Insights:

SELECT ssot__GoodsProduct__dlm.ssot__Id__c AS goodsProductsId__c, ssot__GoodsProduct__dlm.ssot__Name__c AS productName__c, COUNT(ssot__GoodsProduct__dlm.ssot__Id__c) AS ProductGeneral__c FROM ssot__GoodsProduct__dlm GROUP BY goodsProductsId__c,productName__c

8. Map the product catalog files
9. Map the Goods Products DMO

10. Create a custom DMO Goods Related Items and create N:1 relationship to Goods Products DMO

11. Create a custom DMO Goods Category and map it

Salesforce Flows

Create two flows, one for the Agentforce chat and one for fetching product categories