# React SDK Components - [Onboarding](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding.md) - [Onboarding Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/onboarding-component.md): The Onboarding component is a versatile React component designed for creating interactive onboarding experiences. It allows you to guide users through a series of screens, collect their responses. - [Get Started Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/get-started-component.md): The GetStarted component is a part of the Quest Labs React SDK. It provides a quick start guide for users to explore and engage with Application. - [Tutorial/Quest List Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/tutorial-quest-list-component.md): A versatile UI element for managing and tracking task completion. Displays tasks, tracks progress with a progress bar, and shows checkmarks for completed tasks. - [Walk Through Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/walk-through-component.md): The WalkThrough component is used to guide users through a series of steps in a quest or tutorial. It provides a visual overlay with step-by-step instructions and can be customized to fit the specific - [Gamification](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification.md) - [Challenges Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/challenges-component.md) - [DailyStreak Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/dailystreak-component.md): The DailyStreak component is a versatile React component designed to display and track daily streaks for a specific metric. It provides visual indicators for the user's progress and includes customiza - [Leaderboard Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/leaderboard-component.md): The Leaderboard component efficiently displays and manages leaderboards in React, offering customizable styling. Users can easily monitor progress and compete through its clear interface. - [GamifiedQuiz component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/gamifiedquiz-component.md) - [User Assistance](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance.md) - [Feedback Workflow Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/feedback-workflow-component.md): A versatile interface for user communication, offering options to report issues, provide feedback, request features, or contact support, ensuring user engagement and problem-solving. - [Inline Feedback Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/inline-feedback-component.md): A user-friendly tool for collecting feedback, featuring email, message, name, and star ratings for effective user input. - [Survey Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/survey-component.md): Offer a versatile survey solution for your app, enabling comprehensive data collection across various use cases. Provide a dedicated Surveys category with diverse templates for seamless integration in - [Search Bar Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/search-bar-component.md): This component provides a search bar with customizable appearance and interactive search results. Users can navigate through search results using keyboard shortcuts and open relevant links. - [Help Hub Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/help-hub-component.md): The Help Hub component is a user interface component that offers a comprehensive help center feature within your application. It provides users with access to information, an AI chatbot. - [CreditsPopup Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/creditspopup-component.md): The CreditsPopup component is a React component that provides a customizable popup for displaying information, alerts, or notifications to users. - [Expansion](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/expansion.md) - [Referral Components](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/expansion/referral-components.md): The Referral components are reusable React components designed to facilitate user referrals and rewards. It allows users to earn rewards by sharing a referral code with friends. - [Cross-Selling Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/expansion/cross-selling-component.md): 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 - [Miscellaneous](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous.md) - [Confetti Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/confetti-component.md): This documentation provides information on how to use the confetti function to create a confetti animation on a webpage. - [Alert Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/alert-component.md): The toast notification system allows you to display temporary pop-up messages (toasts) with different styles (success, warning, info, error) in your application. - [Login Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/login-component.md): Our login component provides a simple means to incorporate secure user authentication into React apps. Easily tailor the login UI to fit your project's needs with various customization options. - [One to one Survey Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/one-to-one-survey-component.md): The Quest Survey component is a customizable feature that empowers users to create one-to-one surveys and quizzes. - [Pricing & Payment Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/pricing-and-payment-component.md): Empower users to design custom plans and effortlessly handle payments via Stripe with this versatile component. - [Badge Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/badge-component.md): The Badge component visually represents user achievements, showcasing earned badges within your application. - [Toast Service](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/toast-service.md): The Toast component is a React functional component responsible for displaying notifications to users in a non-intrusive and visually appealing manner. - [Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey.md): Your thoughts shape our tomorrow! Take a moment to share your insights in our survey and fuel our journey towards growth and excellence. Together, let's build a better future. - [User Experience Feedback Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/user-experience-feedback-survey.md): Rate your experience with us to help improve our services. Share specific thoughts and suggestions for enhancements to shape a more seamless journey. - [Feature Usage Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/feature-usage-survey.md): Discover and rate features to help refine our tools. Share your usage patterns and suggest enhancements to shape our platform's future. - [Customer Satisfaction Surveyy](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/customer-satisfaction-surveyy.md): Rate our service to help us improve and excel. Share the highlights of your experience and what made it memorable. Your feedback is our roadmap to better serve you. - [Net Promoter Score](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/net-promoter-score.md): Unlock the power of your advocacy score and shape our future with your feedback. Help us build trust and create valuable recommendations. - [Onboarding Experience Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/onboarding-experience-survey.md): Share your initial experience and whether you needed more guidance. Tell us about helpful tools and suggest improvements for a smoother journey. - [Customer Support Satisfaction Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/customer-support-satisfaction-survey.md): Rate our support services to help us excel and improve. Share your insights and join us in striving for customer care excellence. - [Embedded Analytics](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics.md) - [Line Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/line-chart.md): Optimize user engagement with activity trends and personalized analytics; discover untapped features and track performance benchmarks for continuous improvement. - [Scatter Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/scatter-chart.md): Analyze the correlation between feature usage and user success, using scatter plots to highlight the impact of analytics and benchmark achievements. - [Combo Bar/Line](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/combo-bar-line.md): Analyze feature adoption, track user success, and visualize efficiency gains with combined charts to highlight the impact of new tools and analytics. - [Stacked Bar Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/stacked-bar-chart.md): Analyze user engagement, track feature adoption, and display benchmark progress to optimize and improve performance. - [Horizontal Bar Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/horizontal-bar-chart.md): Compare feature effectiveness, track performance improvements, and illustrate engagement to highlight the impact of personalized analytics. - [Stepped Line Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/stepped-line-chart.md): Analyze step-by-step engagement changes, feature adoption, and benchmark achievements to boost activity, promote lesser-used functionalities, and enhance performance. - [Pie chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/pie-chart.md): Analyze feature usage, user engagement, and performance goal achievement to guide enhancements, reevaluate sections, and motivate continuous improvement. - [Doughnut Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/doughnut-chart.md): Analyze feature usage and user engagement by segment, and use benchmark visuals to guide training, boost satisfaction, and identify areas for improvement. - [Multi Series Pie](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/multi-series-pie.md): Analyze user engagement, feature adoption trends, and performance benchmarks by user group to identify usage patterns and enhance platform engagement. - [Bubble Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/bubble-chart.md): Compare feature usage, identify impactful analytics tools, and track benchmark progress with bubble sizes reflecting engagement, success, and goal attainment. - [Floating Bar Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/floating-bar-chart.md): Illustrate engagement score shifts, feature usage spread, and progress towards performance benchmarks to highlight the effectiveness of personalized insights and targeted improvements. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.questera.ai/questera-ai-sdks/react-sdk-components.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.