Cross-Selling Component

Boost revenue and enhance user satisfaction with our automated upselling. Tailored suggestions for additional services or products are seamlessly offered based on individual product usage, optimizing

To unlock early access to the component Get Access

Installation

To install the Quest react-sdk into your project, follow these steps:

  • Open your terminal/command prompt.

  • Navigate to your project's root directory using the cd command if you're not already there.

  • Run the following command to install the quest-sdk package using npm:

npm install @questlabs/react-sdk

This command will download and install the package and its dependencies into your project.

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

Features

  • Responsive Interface: LIT offers a user-friendly and adaptive interface, ensuring a seamless and enjoyable user experience across various devices.

  • Real-time Collaboration: Enable effective teamwork with LIT's real-time collaboration features, allowing users to work together on projects and documents simultaneously.

Props of Cross-Selling Component

The Cross-Selling component accepts the following props

Prop NameTypeRequiredDetails

heading

string

required

The title or heading of the Cross-Selling

userId

string

required

The unique identifier of the user.

description

string

required

A brief description for the Cross-Selling

token

string

required

An authentication token or API key necessary for accessing Cross-Selling or quest data.

questId

string

required

The unique identifier for the Cross-Selling or quest.

shareButtonText

string

optional

The text of the Avail Now.

gradientBackground

boolean

optional

This gives gradient background to the component.

primaryDescription

boolean

optional

The description when gradientBackround is true.

primartHeading

string

optonal

The text or heading when gradientBackround is true.

showDays

boolean

optional

To show the days in Timer .

expireDate

number

optional

To set expiry Date to Cross-Selling component.

claimRewardHandler

function

optional

Function triggered on claiming the reward.

backButtonTrigger

function

optional

Function triggered on clicking the back button.

uniqueEmailId

string

optional

Unique email ID.

uniqueUserId

string

optional

Unique user ID.

styleConfig

object

optional

An object containing CSS properties for styling various components within the cross selling process, including form, headings, descriptions, buttons,timer and footer.

You can customize the UI with type of styleConfig would be

styleConfig?: {
       Form?: CSSProperties,
        BackgroundWrapper?: CSSProperties,
        Heading?: CSSProperties,
        Description?: CSSProperties,
        PrimaryButton?: CSSProperties,
        SecondaryButton?: CSSProperties,
        Timer?: {
            primaryColor: string,
            secondaryColor: string,
            backgroundColor: string
        },
        Footer?: CSSProperties
    }

Usage

To integrate the Cross-Selling component into your React application, follow these steps

  • Import the CSS: In your JavaScript or TypeScript file where you're using the Cross-Selling, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

import '@questlabs/react-sdk/dist/style.css'
  • Import the Cross-Selling Component: Import the CrossSellingcomponent from the @questlabs/react-sdk package.

  • Import the QuestProvider Component: Import the QuestProvider component from the @questlabs/react-sdk package.

import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';
  • Pass the Required Props: Pass the required props to the QuestProvider. The required props are apiKey, apiSecret, and entityId. and required props for the CrossSellingcomponent are userId, questId, token

<QuestProvider
  apiKey="your-api-key"
  entityId="your-entity-id"
>
  <CrossSelling
    userId="your user-id"
    token="your-token"
    questId="your quest-Id"
  />
</QuestProvider>

Replace "your-api-key" and "your-entity-id" with your actual Quest API credentials

Replace "your-token", "your userId", "your-questId" with your actual configuration details.

Example Usage

Here's an example of how to use the CrossSelling component within your React application

import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="k-xxxxxdc-ac8f-x1-xxx8b-a175xxxxx"
        entityId="e-xxxx-b75b-xxxx-be9a-ee11f0f0xxxx"
      >
       <CrossSelling
          userId="your user-id"
          token="your-token"
          questId="your quest-Id"
          iconColor="bxx"
          bgColor="#8B0xxx"
          color="xxxx"
          showDays="true"
          gradientBackground="false"
        />
      </QuestProvider>
    </div>
  );
}

export default App;

The above example uses all the props.

Last updated