Getting Started

The Shopping Assistant SDK enables you to integrate AI-powered conversational shopping experiences into your e-commerce platform. This guide walks you through setting up the SDK to create intelligent chat interfaces that help customers discover products, get recommendations, and make informed purchasing decisions.

Who is this intended for?

This package is designed for developers building e-commerce platforms that require:

Conversational Commerce: AI-powered chat interfaces that help customers find products through natural language interactions.
Personalized Shopping: Smart product recommendations based on customer preferences and chat history.
Enhanced Customer Support: Automated assistance for product discovery, comparisons, and purchasing guidance.
Interactive Shopping Experiences: Engaging chat-based interfaces that improve customer engagement and conversion rates.

Prerequisites

Ensure the following before proceeding:

React (v18.2 or higher)
Node.js (v18 or higher)
npm or yarn for package management
A pre-existing React project

Installation

ℹ️

Note:

Refer to the Change Log page for details on the latest version, including its features, upgrades, and fixes.

Install the Shopping Assistant Components Package

Add the Unbxd Shopping Assistant components package to your project:

npm install @unbxd-ui/react-shopping-assistant-components

Or with Yarn:

yarn add @unbxd-ui/react-shopping-assistant-components

Install Shopping Assistant Hooks Package

For advanced customization and state management, also install the hooks package:

npm install @unbxd-ui/react-shopping-assistant-hooks

Or with Yarn:

yarn add @unbxd-ui/react-shopping-assistant-hooks

Setting up the UnbxdShoppingAssistantWrapper

The UnbxdShoppingAssistantWrapper is the core integration point for incorporating Shopping Assistant capabilities into your e-commerce platform. It handles state management, API communication, and conversation persistence.

Learn more about its configuration here.

UnbxdShoppingAssistantWrapper

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
 
<UnbxdShoppingAssistantWrapper
  siteKey="YOUR_SITE_KEY"
  apiKey="YOUR_API_KEY"
  storageType="LOCALSTORAGE"
  headers={{}}
  extraParams={{}}
>
  {/* Add your shopping assistant components here */}
</UnbxdShoppingAssistantWrapper>

Configure Headers

Headers can be configured to personalize the shopping assistant experience. The values passed here can be strings or functions.

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from '@unbxd-ui/react-shopping-assistant-hooks';
 
export function ShoppingAssistantWrapper() {
  return (
    <UnbxdShoppingAssistantWrapper
      ...
      headers={{
        'Unbxd-User-Id': 'user-123',
        'Unbxd-Device-Type': function (){
          return localStorage.get('device')
        }
        'Unbxd-Segment': () => {
          return getUserSegment(); 
        }
      }}
    >
      {/* Your components */}
    </UnbxdShoppingAssistantWrapper>
  );
}

Import and Use Components

Start leveraging pre-built components or build your own using hooks:

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { Chat, InputBar, Conversations } from "@unbxd-ui/react-shopping-assistant-components";
 
function ShoppingAssistantApp() {
  return (
    <UnbxdShoppingAssistantWrapper 
      siteKey="YOUR_SITE_KEY" 
      apiKey="YOUR_API_KEY"
      ...
    >
      <div className="shopping-assistant-container">
        <Conversations />
        <Chat />
        <InputBar />
      </div>
    </UnbxdShoppingAssistantWrapper>
  );
}
 
export default ShoppingAssistantApp;

Customize and Configure

Dive deeper into our documentation to explore customization options for chat components, conversation management, and hooks to align with your e-commerce requirements. Add your shopping assistant components as children inside the wrapper - either use our pre-built components from @unbxd-ui/react-shopping-assistant-components or create custom ones using hooks from @unbxd-ui/react-shopping-assistant-hooks.

Best Practices for Shopping Assistant

Follow these practices to get the most out of the Unbxd Shopping Assistant SDK:

Use Pre-Built Components: Leverage components like Chat, InputBar, and Conversations to streamline development and ensure compatibility with Unbxd's Shopping Assistant platform.
Initialize Early: Call the startNewConversation() function when your app loads to set up the conversation context and ensure smooth user experience.
Handle State Properly: Use the SDK's built-in state management to maintain conversation history and handle loading states effectively.
Customize Strategically: Modify behavior using hooks when necessary. Stick to default implementations to maintain stability and simplify maintenance.
Manage Conversations: Use the conversation management features to allow users to start new conversations, view history, and switch between different chat sessions.
Optimize User Experience: Implement proper loading states, error handling, and responsive design to create seamless chat experiences.
Leverage Documentation: Refer to examples and best practices in the SDK documentation to avoid pitfalls and ensure efficient implementation.

Next Steps

Explore our comprehensive documentation to learn more about:

UnbxdShoppingAssistantWrapper Chat component useShoppingAssistant

Introduction Changelog