Getting Started with the Shopping Muse Chat Template

The Shopping Muse Chat template is a chat interface for product discovery through conversation, powered by the Shopping Muse (Assistant) API, Visual Search API, and product recommendations. This template enables a responsive chat experience on both desktop and mobile web, enabling users to ask questions, receive personalized product recommendations, upload images as queries, and request visually similar products.

Create a Shopping Muse Experience Web campaign 

1. In Experience Web, create a new Notification campaign.
2. Set your position and frequency, and then set the trigger as follows:
   1. Select Advanced.
   2. Make sure Element click is selected, and enter .dy-chat-cta as the class selector. This is the default class used by all our out-of-the-box entry point templates.
       
      This configuration ensures that all entry points using this class will activate the Shopping Muse chat interface when using the Shopping Muse Chat template. 
   3. Click Next.
3. In the new experience screen, name your experience, and then click New Variation.
4. In the Variation screen, name your variation, and then select the Shopping Muse Chat template.

Shopping Muse Chat template configuration

In just a few quick and easy configuration steps, you’ll be ready to launch a Shopping Assistant that’s fully tailored to your brand:

Step 1: Enter the API key

Enter your client-side secret API key in the variable. This key links to your website's specific section and product feed. Each section has its own unique key—never use a staging (STG) key in a production (PROD) environment, or vice versa. See Getting Started with Shopping Muse to learn more about generating the key.

Step 2: Configure the chat layout

Configure general layout elements, such as the assistant's display name, icon, font, and color palette.

Step 3: Create a welcome screen

The Shopping Muse Chat template includes 2 built-in welcome screen options:

Basic	Grid

If you decide to use the grid layout, you must select a recommendation strategy to populate the grid slots with products. You can also manually pin specific products to individual slots to control the product display from the strategy configuration.

Step 4: Define some inspirational suggestions

As part of the welcome screen in both layouts, the template enables you to inspire users with query suggestions that demonstrate how to interact with Shopping Muse, helping them get the most out of the experience. Out-of-the-box, you can define 4 inspirational suggestions. 

Step 5: Enable Visual Search and Visual Similarity

The Shopping Muse Chat template integrates two independent Dynamic Yield features:

• Visual Search: Users can upload an image to find similar and relevant products. 
   → Prerequisite: The Experience Search app must be activated and configured in your account. Contact your customer success manager for assistance.
• Visual Similarity: Users can click the similarity icon in Shopping Muse widgets to view visually similar items. 
   → Prerequisite: AdaptML must be enabled and configured with an appropriate strategy. Alternatively, you can use Keyword Similarity or Viewed Together strategies. Contact your customer success manager for assistance.

Step 6: Customize the product tile layout

This group of variables lets you customize the look and feel of each product tile within the Shopping Muse widget, as well as define the chat behavior when a user clicks a product:

• Main Text: The primary text displayed below the product image, typically used for the product or brand name. Use the exact column name as it appears in your product feed.
• Secondary Text: The secondary text shown below the product image, often used for additional product details. Again, use the exact column name from your product feed.
• Price: Displays the current, discounted price.
• Previous Price: Displays the original, pre-discount price.
• Product Preview:
  • New Tab: Opens the product page in a new browser tab when clicked.
  • Quick View: Opens the product page in an overlay, similar to a quick view interface.
• Elements to Hide from Quick View: If using quick view, some product page elements might not be relevant. List any CSS selectors (comma-separated) in this variable to hide them from the quick view display.

Step 7: Set a response for customer care situations

In addition to recommending products, Shopping Muse can recognize when a user needs customer support. In the Chat template you can configure an appropriate response to display when this intent is detected, which can also specify the support channels the user can use.

Triggering Shopping Muse chat (entry points) 

For a streamlined onboarding and implementation experience, the Shopping Muse Chat template is designed to activate automatically when a click is tracked on an element that matches a predefined CSS selector (for example, <dy-chat-cta>). The clickable element must include a CSS class that matches your trigger configuration to ensure reliable triggering, especially when multiple entry points exist on the same page.

There are two ways to implement Shopping Muse Chat entry points: Directly in the website codebase by your developers or using a Dynamic Yield campaign. 

Using a Dynamic Yield campaign

With this method, you implement a clickable element through a Dynamic Yield experience that includes the CSS selector used to trigger Shopping Muse Chat template. To simplify the process for you and reduce costly development time, we've designed additional out-of-the-box templates that expedite the implementation. These templates are preconfigured with the required CSS selector, ensuring seamless integration with your Shopping Muse Chat campaign.

Using manually embedded code

With this method, you add the relevant CSS class to an existing native element to trigger the Shopping Muse Chat template upon click.

Ensure the element includes the CSS class that matches your trigger configuration.

Shopping Muse events

The Shopping Muse chat template sends several custom events that help you track user interactions and measure engagement. You can use these events for reporting, attribution, and optimization across Dynamic Yield.

Event types

The Shopping Muse template sends the following custom events:

Reporting and attribution behavior

All Shopping Muse events listed above are reported as custom events. Because they follow standard attribution rules, these events can also be attributed to other campaigns if they occur within the attribution window period. This includes attribution in the Shopping Muse app report and in other applicable campaign reports.

How to use the Shopping Muse events

You can use these events to:

• Analyze engagement with the chat experience
• Build audiences based on Shopping Muse behavior
• Optimize campaigns that interact with or depend on Shopping Muse activity