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

Overview

Visual 1

Visual 2

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

QuestProvider

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;

CrossSelling

  <CrossSelling
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
    // children
</CrossSelling>

Header

<CrossSelling.Header />

MainContent

<CrossSelling.MainContent >
    <CrossSelling.Icon 
        type=""
    />
    <CrossSelling.Timer />
    <CrossSelling.EmailInput />
    <CrossSelling.ActionButtons />
</CrossSelling.MainContent>

Preview

<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>

---

Example Usage

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

CrossSelling

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;

CrossSellingPreview

import { QuestProvider, CrossSellingWrapper } 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 
      >
       <CrossSellingWrapper
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
          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: {},
          }}
          showFooter={false}
        />
      </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