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.

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 Tutorial, 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 TutorialComponent: Import the CrossSelling component 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, and entityId. and required props for the CrossSelling component are userId, questId, token

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

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

Code & Steps

import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
      <CrossSelling> </CrossSelling>
      </QuestProvider>
  );
}

export default App;

Example Usage

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

import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
        <CrossSelling
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
           <CrossSelling.Header  />
           <CrossSelling.Content />
           <CrossSelling.MainContent >
             <CrossSelling.Icon />
             <CrossSelling.Timer />
             <CrossSelling.EmailInput />
             <CrossSelling.ActionButtons />
           </CrossSelling.MainContent>
         </CrossSelling>
      </QuestProvider>   
      </div>
  );
}

export default App;

The above example uses all the props.

Props of Cross-Selling Component

The Cross-Selling component accepts the following props

Prop Name
Type
Required
Details

heading

string

optional

The title or heading of the Cross-Selling

headingColor

string

optional

for heading color

color

string

optional

for text or descirption color

userId

string

required

The unique identifier of the user.

description

string

optional

A brief description for the Cross-Selling

iconColor

string

optional

set icon color

primaryHeading

string

optional

main heading that's show on top of the component

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 .

expiryDate

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.

showFooter

boolean

optional

true: show quest footer fasle: hide footer

variation

string

optional

for creating different-2 variation

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.

styleConfig = {{
    Timer: {
        TimerCard: { },
        backgroundColor: "",
            primaryColor: "",
                secondaryColor: ""
    },
    BackgroundWrapper: { },
    Description: { },
    EmailError: {
        errorStyle: { },
        text: ""
    },
    Footer: {
        FooterIcon: { },
        FooterStyle: { },
        FooterTextStyle: { },
        FooterText: ""
    },
    Form: { },
    gradientDescription: { },
    gradientHeading: { },
    Heading: { },
    Icon: { },
    Input: { },
    Label: { },
    PrimaryButton: { },
    SecondaryButton: { },
}}

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.

You can customize the UI with type of styleConfig would be

PreviousReferral ComponentsNextMiscellaneous

Last updated