HelpHub

Components Visuals

Overview

Visual 1

Visual 2

Visual 3

Visual 4

Visual5

Installation

To install the Quest react-native-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-native-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 HelpHub component into your React native application, follow these steps

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

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

import { QuestProvider,HelpHub} 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 HelpHub component are userId, questId, token.

Props of HelpHub Component

The HelpHub styleConfig component accepts the following props

Home

Props Name	Type	Require	Details
Form	ViewStyle	Optional	Main View Style
Heading	TextStyle		Home Heading Text style
SubHeading	TextStyle		Home SubHeading Text style.
sendMessageViewStyle	ViewStye		Send Message VIew Style
sendMessageTitleStyle	TextStyle		Send Message Title Text Style
sendMessageDescriptionStyle	TextStyle		Send Message Description Text Style
communityMainViewStyle	ViewStyle		community Main View Style
communityDemoViewStyle	ViewStyle		community Demo View Style
communityTitleStyle	TextStyle		community Title Text Style
communityDescriptionStyle	TextStyle		community Description text Style
searchMainViewStyle	ViewStyle		search Main View Style
searchViewStyle	ViewStyle		search View Style
searchListItemTitleStyle	TextStyle		Search List Item Title Text Style
getupdateMainViewStlye	ViewStyle		get update Main View Stlye
getupdateHeaderTextStyle	TextStyle		get update Header Text Style
getupdateTitleStyle	TextStyle		get update Title Style
getupdateTitle2Style	TextStyle		get update Title2 Style
getupdateDescriptionStyle	TextStyle		get update Description text Style
getupdateDescription2Style	TextStyle		get update Description2 text Style
getupdateButtonStyle	ViewStyle		get update Button Style
getupdateButtonTextStyle	TextStyle		get update Button Text Style
complateProfileView	ViewStyle		complate Profile View Style
complateProfileHeaderTextStyle	TextStyle		complate Profile Header Text Style
complateProfileDescriptionStyle	TextStyle		complate Profile Description Text Style
satisfiedMainViewStyle	ViewStyle		satisfied Main View Style
satisfiedTitleStyle	TextStyle		satisfied Title Style
satisfiedDescriptionStyle	TextStyle		satisfied Description Style
satisfiedFooterTextStyle	TextStyle		satisfied Footer Text Style

Chat

Props Name	Type	Require	Details
Form	ViewStyle		Msin View Style
Heading	TextStyle		Topbar Heading Style
SubHeading	TextStyle		Topbar SubHeading Style
Searchbox	ViewStyle		Search box View Style
chatButton	TextStyle		chat Button View Style
chatButtonText	TextStyle		chat Button Text Style
privetChatHeaderTextStyle	TextStyle		privet Chat Header Text Style
chatTitleText	TextStyle		chat Title Text Style
chatTitleDescription	TextStyle		chat Title Description text Style
message	ViewStyle		message View Style
chatInputViewStyle	ViewStyle		chat Input View Style

Help

Props Name	Type	Require	Details
Form	ViewStyle		Main View Style
Heading	TextStyle		Topbar Heading Style
SubHeading	TextStyle		Topbar SubHeading Style
Searchbox	ViewStyle		Search box View Style
FaqTextStyle	TextStyle		Faq Text Style
Heading	TextStyle		Card Heading Style
SubHeading	TextStyle		Card subHeading Style

Update

Props Name	Type	Require	Details
Form	ViewStyle		Main View Style
Heading	TextStyle		Topbar Heading Style
SubHeading	TextStyle		Topbar SubHeading Style
Searchbox	ViewStyle		Search box View Style
timeText	TextStyle		time Text Style
Heading	TextStyle		Card Heading Style
SubHeading	TextStyle		Card subHeading Style

Tasks

Props Name	Type	Require	Details
Form	ViewStyle		Main View Style
Heading	TextStyle		Topbar Heading Style
SubHeading	TextStyle		Topbar SubHeading Style
Searchbox	ViewStyle		Search box View Style
tasksStepTextStyle	TextStyle		tasks Step Text Style
Heading	TextStyle		Card Heading Style
SubHeading	TextStyle		Card subHeading Style

Example Usage

import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import {HelpHub,QuestProvider} from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
         entityId="Your-Entity-id"
         >
        <HelpHub
        questId=""
        token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJ1LWM5YmM3ZWEyLTE1NTgtNDg4OC05NmIxLWY3YWZkZmU2OTZkMSIsImlhdCI6MTcxMjA1OTk4MywiZXhwIjoxNzEyNjY0NzgzfQ.iz6CMwk8NSb07--IZC6_RNAJS5LVRnhA-6Z-Xm9EmEY"
        userId="u-c9bc7ea2-1558-4888-96b1-f7afdfe696d1"
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "lightgray",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});

Demo