Help Hub Component
The Help Hub component for Flutter seamlessly integrates a comprehensive help center and an AI chatbot into your app, offering users effortless access to support and information across mobile platform
Components Visuals

Installation
To use the helphub component , you need to install questlabs_flutter_sdk
package into your project
First, navigate to the root directory of your Flutter project. Open the
pubspec.yaml
file using your preferred code editor.Under the
dependencies
section in yourpubspec.yaml
file, add the following line to include thequestlabs_flutter_sdk
packageAfter saving your changes, open your terminal or command prompt and run the following command to fetch the new dependency
dependencies:
questlabs_flutter_sdk:
git:
url: "Replace with your github URL"
ref: master
flutter_bloc: ^8.1.6
Props of help hub Component
questProvider
QuestProvider
Provides necessary configuration such as API key, entity ID, and optional theme settings
Yes
apiKey
String
API key to authenticate requests.
Yes
entityId
String
Entity ID associated with the quest.
Yes
themeConfig
QuestThemeConfig
Customizes theme settings like background color, font style, border color, button color, etc.
No
primaryColor
Color
Sets the primary color of the component .
no
secondaryColor
Color
Sets the secondary color of the component .
no
buttonColor
Color
Defines the color of buttons within the component .
no
backgroundColor
Color
Specifies the background color of the component .
no
borderColor
Color
Defines the color of the component's border.
no
fontStyle
String
Sets the font style for text within the component (e.g., "poppins"
)
no
helpHubProps
HelpHubProps
Contains user ID, quest ID, token, and display options for the "Helphub Component"
Yes
userId
String
Unique user identifier.
Yes
token
String
Token for authenticating the user session.
Yes
campaignId
String
Unique campaign identifier.
Yes
You can customize the UI with the type of QuestThemeConfig would be
themeConfig: QuestThemeConfig(
secondaryColor: Colors.red,
primaryColor: Colors.blue,
buttonColor: Colors.yellow,
backgroundColor: Colors.yellow,
fontStyle: "libre baskerville",
borderColor: Colors.red
)
Basic Usage:
In your
main()
function, ensure you initialize the app and dependencies as follows:
void main() {
runApp(const MyApp());
getItInit();
getIt<SharedPref>().init();
}
Add the following
BlocProvider
setup to yourproviders
list to initialize theHelpHubCubit
for state management:
providers: [
BlocProvider(
create: (context) => getIt<HelpHubCubit>(),
),
],
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:questlabs_flutter_sdk/questlabs_flutter_sdk.dart';
void main() {
runApp(const MyApp());
getItInit();
getIt<SharedPref>().init();
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => getIt<HelpHubCubit>(),
),
],
child: MaterialApp(
title: 'Flutter Demo',
home: HelpHubComponent(
helpHubProps: HelpHubProps(
userId: 'userId',
token: "token",
campaignId: 'campaignId',
),
questProvider: QuestProvider(
apiKey: "apiKey",
entityId: "entityId",
themeConfig: QuestThemeConfig(
// secondaryColor: Colors.green,
// primaryColor: Colors.blue,
// backgroundColor: Colors.yellow,
// buttonColor: Colors.yellow,
// fontStyle: "poppins",
// borderColor: Colors.red
)
),
)
),
);
}
}
Watch the video below for a step-by-step guide on testing the helphub component in your Flutter project.
Last updated