Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Personal Shopper
Official extension
Version: 0.13.12
Latest version: 0.13.12

Personal Shopper is a platform that allows businesses to host live shopping sessions in the store, enabling real-time interaction with customers. During these sessions, a personal shopper can showcase products, answer questions, and add products to the customer's cart. This interactive shopping experience is designed to engage customers, increase sales, and build brand loyalty.

Personal Shopper is designed for sellers who want to show new collections to high-value customers or B2B clients. These customized live sessions are intended to provide a more personalized shopping experience than public Live Shoppings.

The Personal Shopper app is compatible with desktop and mobile devices.

{"base64":"  ","img":{"width":600,"height":1164,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":6848804,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/60782333/256605109-90187b7b-4b83-4869-9296-a84aceefe0bb.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250218%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250218T165232Z&X-Amz-Expires=300&X-Amz-Signature=627af447b3325a4ebd5e6f16e8accef6d52768b7c04e4ef0f5a5c64dfaea919a&X-Amz-SignedHeaders=host"}}
{"base64":"  ","img":{"width":960,"height":695,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1522908,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/60782333/256603012-1c5f304f-8fc0-42c5-a0b7-829425562f10.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250218%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250218T165232Z&X-Amz-Expires=300&X-Amz-Signature=10c5bafbbdac6a01c0c51fda24dd46bbafcd3a0d90dc7427ed2c3316a28cfa18&X-Amz-SignedHeaders=host"}}
Personal Shopper on mobilePersonal Shopper on desktop

During a live in the Personal Shopper app, the personal shopper and the customers have access to various features and functionalities. Here are some of the key features and their respective availability for personal shoppers and customers:

FeatureDescriptionAdvisorCustomer
Camera and microphone settingsControl the camera and microphone settings to turn them on or off during the call.
Share live linkShare the live link with others to enable additional participants to join the conversation.
Screen sharingShare screens to allow participants to view the entire screen or specific applications.
ChatCommunicate through text messages to exchange information and facilitate real-time conversation.
File sharingSend files during the call to enable the sharing of relevant documents or images.
Search for specific products and provide recommendations to the customer.This allows the shopper to immediately add the recommended products to the cart and complete the purchase seamlessly within the same process.
Satisfaction surveyComplete a survey to provide feedback on the call experience, ensuring service quality and gathering valuable insights for improvement.
Product highlight and add to cartWhen an advisor sends a product, customers can add it to their cart immediately, selecting any variations within the same modal, with a notification confirming it was added.
Picture in PictureWhen the customer clicks the Picture in Picture icon, the sales associate's image appears in a smaller window. This allows the customer to browse the website while keeping the advisor visible.

Personal Shopper is available in the following languages: English, Spanish, Portuguese and Catalán.

To get started, follow this guide to install the Personal Shopper app in your VTEX environment.

Before you begin

Personal Shopper is a paid app with different subscription plans: Standard and Pro. The subscription cost depends on your chosen plan, with each providing a specific number of monthly live stream minutes.

For more information about plans and pricing, see the Personal Shopper page.

Finally, before proceeding with this guide, you must install VTEX IO CLI on your machine. For more information, check the guide VTEX IO CLI.

Installation

To install the Personal Shopper app, follow the steps below.

We recommend creating a workspace. Otherwise, it will be installed in the main workspace by default.

Prerequisites

  • It is necessary to have the CLI VTEX. Go to the next documentation for install it: VTEX IO CLI

Initial Steps for VTEX IO and VTEX CMS/Headless accounts

  1. Open the terminal and log in to your VTEX account using VTEX IO CLI.

  2. Install the Personal Shopper app by running the following command:


    _10
    vtex install vtexventures.personal-shopper-free


For VTEX IO

  1. In the manifest.json file, add the Personal Assistant app to the list of peer dependencies for the theme:


    _10
    "peerDependencies": {
    _10
    "vtexventures.personal-shopper-free": "0.x"
    _10
    }

  2. Add the pa-widget block to display a call-to-action button in the page. For example:

  • Product Details Page (PDP) (product.json):

_10
{
_10
"store.product": {
_10
"children": ["pa-widget"]
_10
}
_10
}

  • Home page (home.json):

_10
{
_10
"store.home": {
_10
"blocks": ["pa-widget"]
_10
}
_10
}

  1. Deploy your changes to the Store Theme app by publishing a major version. For details, refer to the guide: Making Your New App Version Publicly Available.

Note: Adding a new peer dependency to the Store Theme app requires deploying a new major version of the app. After making the changes, publish this new major version and install it in a productive workspace (not master) to ensure it works as expected before deploying it to the live environment.

  1. In the productive workspace, follow the guide Migrating CMS Settings After a Major Update to update the content for the new version.

    Note: Proceed with caution to avoid deleting store content..

  2. Validate the workspace and confirm the configured content. Once ready, promote the workspace to master (it will be automatically deleted after promotion).


For VTEX CMS/Headless

Note: Wherever you find {{nameOfTheAccount}} you must replace it with the name of the account/store.

  1. Add global script.

Load the following script in a global place on the page, it must be executed only once. A valid example is in the commonScripts template.


_10
<script
_10
type="module"
_10
id="pa-widget-script"
_10
src="https://cdn-personalshopper.nizza.com/widget-script/prod/pa-ws-index.js?account={{nameOfTheAccount}}"
_10
></script>

{"base64":"  ","img":{"width":1092,"height":507,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":126344,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/refs/heads/main/images/personal-shopper-common-scripts.png"}}

  1. Add widget button on the home or product detail page (PDP).

Add the web-component <pa-widget-legacy></pa-widget-legacy> in the home or pdp.


_10
<pa-widget-legacy></pa-widget-legacy>

  • Home page:

    {"base64":"  ","img":{"width":1022,"height":536,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":135325,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/refs/heads/main/images/home-page.png"}}

  • PDP page:

    {"base64":"  ","img":{"width":1028,"height":556,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":150919,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/refs/heads/main/images/pdp-page.png"}}


Latest Steps for VTEX IO and VTEX CMS/Headless accounts

UI Admin

Configure Personal Assistant Setting

In VTEX admin Navigate to: Personal Shopper > Settings > Personal Shopper Setup > General Settings.

The following fields need to be configured:

  • URL Client: This is the public domain of your store. Example: https://www.your-store.com/.

  • Store Name: This is the name of your store. It must be configured because it is associated with the emails sent to customers and personal shoppers. Example: Your Store Name.

See also
VTEX App Store
VTEX IO Apps