Contextual Help

This project was bootstrapped with Create React App and built with Fluent UI.

Contextual Help will give answers to questions directly in your product without requiring the user to browse your entire help documentation.

Download the package and it's dependencies.

npm i @lightningtools/contextual-help

Import in your react project.

import { ContextualHelp, IConfiguration, Themes, ILangData } from '@lightningtools/contextual-help/lib'

Add ContextualHelp component to your code.

 const closed = () => {
    console.log("Closed")
 }

  <ContextualHelp config= {config} theme={Themes.App} closed = { closed } /*langData={langData}*/ />

JSON config structure.

  const config: IConfiguration = {
  sections: [
    {
      id: 1,
      title: "Help & Customer Service",
      info: [
        {
        id: 1,
        title: "What is Amazon.com?",
        content:
          `<b>Amazon.com is a leading online retailer</b> of products that inform, educate, and inspire. 
                   The Amazon group also has stores in the Canada, Germany, France, Japan and United Kingdom. 
                   Because we exist "virtually" on the Web, we have unlimited shelf space and can offer a selection of over 
                   17 million titles including over 13 million Book titles and over <span style="background:yellow">1 million music titles</span>. Compare that to a 
                   typical physical-world book superstore, which carries around 170,000 books, or a typical physical-world music 
                   superstore, which carries around 34,000 CDs.`,
      }, {
        id: 2,
        title: "Why do I encounter various availability listings on your site?",
        content:
          `Titles have different availabilities simply due to their demand, proximity, and availability to Amazon.com. 
                   We also source our products from various distributors. The availability on products we obtain from distributors
                  may vary according to whether the distributor has the product in stock or not.
                  <p>If a title is listed as out of stock or unavailable, it means that it is not currently available to Amazon.com 
                  or not in stock through our distribution channels. However, you may still be able to sell out of stock items through our Marketplace feature.`,
      }, {
        id: 3,
        title: "What does the sales rank mean?",
        content:
          `<span style="background:lightgreen">Our sales rank is just like a bestseller list,</span> except instead of listing just the top 50 or so titles, 
                  it includes millions! The lower the number, the higher the popularity for that particular title in comparison
                  to other items listed. Items are ranked within their product category only, so a book, CD or DVD ranked at Number
                  1 is the best-selling book, CD or DVD at Amazon.com, but may not be the overall best-selling item.
                  Sales rank data is calculated hourly. <p>While we cannot provide specific information about our calculation formula, 
                  Amazon.com Marketplace sales are also included in the calculation. Please keep in mind that our sales rank figures
                  are simply meant to be a guide of general interest for the customer and not definitive sales information for 
                  vendors - we assume you have this information regularly from your distribution sources.`,
      }, {
        id: 4,
        title: "How do I find sales information for my title?",
        content:
          `We don't provide sales information to vendors at this time due to the competitive nature of our business. 
                   <span style="font-size:18px">It is recommended that authors/artists/actors contact their publisher/label/studio, or publishers/labels/studios 
                   contact their distributors, for more information concerning the sales of their titles.</span>`,
      }, {
        id: 5,
        title: "How do I promote my titles at Amazon.com?",
        content: `<div>
         <p class="lead">
         <span></span> 
         </p>
          
            
         <div id="GUID-F27D9117-4C11-4F4C-ADC1-65AD7324CF34__GUID-23032991-0A9F-4AB1-8338-7020D768D6BE">
         <a name="GUID-F27D9117-4C11-4F4C-ADC1-65AD7324CF34__GUID-23032991-0A9F-4AB1-8338-7020D768D6BE"></a>
         </div> 
         <p>
         <strong>What is Amazon.com?</strong>
         </p>
          
         <p>Amazon.com is a leading online retailer of products that inform, educate, and inspire. The Amazon group also has stores in the Canada, Germany, France, Japan and United Kingdom. Because we exist "virtually" on the Web, we have unlimited shelf space and can offer a selection of over 17 million titles including over 13 million Book titles and over 1 million music titles. Compare that to a typical physical-world book superstore, which carries around 170,000 books, or a typical physical-world music superstore, which carries around 34,000 CDs.</p>
          
         <p> 
         <strong>Why do I encounter various availability listings on your site?</strong>
         </p>
          
         <p>Titles have different availabilities simply due to their demand, proximity, and availability to Amazon.com. We also source our products from various distributors. The availability on products we obtain from distributors may vary according to whether the distributor has the product in stock or not.</p>
          
         <p>If a title is listed as out of stock or unavailable, it means that it is not currently available to Amazon.com or not in stock through our distribution channels. However, you may still be able to sell out of stock items through our Marketplace feature.</p>
          
         <p>
         <strong>What does the sales rank mean?</strong>
         </p>
          
         <p>Our sales rank is just like a bestseller list, except instead of listing just the top 50 or so titles, it includes millions! The lower the number, the higher the popularity for that particular title in comparison to other items listed. Items are ranked within their product category only, so a book, CD or DVD ranked at Number 1 is the best-selling book, CD or DVD at Amazon.com, but may not be the overall best-selling item.</p>
          
         <p>Sales rank data is calculated hourly. While we cannot provide specific information about our calculation formula, Amazon.com Marketplace sales are also included in the calculation. Please keep in mind that our sales rank figures are simply meant to be a guide of general interest for the customer and not definitive sales information for vendors - we assume you have this information regularly from your distribution sources.</p>
          
         <p>
         <strong>How do I find sales information for my title?</strong>
         </p>
          
         <p>We don't provide sales information to vendors at this time due to the competitive nature of our business. It is recommended that authors/artists/actors contact their publisher/label/studio, or publishers/labels/studios contact their distributors, for more information concerning the sales of their titles.</p>
          
         <p>
         <strong>How do I promote my titles at Amazon.com?</strong>
         </p>
          
         <p>At Amazon.com, it's up to you to make your titles stand out on our virtual shelves. You have the opportunity, using descriptive content and images, to personally hand-sell your titles to customers and persuade them to purchase. Following are the most important pieces of information you can add to your product detail page.</p>
          
         <p>
         <strong>All Products:</strong>
         </p>
          
         <p> 
             
         </p><ul id="GUID-F27D9117-4C11-4F4C-ADC1-65AD7324CF34__UL_92A0D7259B3D44B7BA4A3DBF7A88E246"> 
         <li>
         <span class="a-list-item">Cover Art: People do judge a book by its cover! We've found that showing a picture of your product's cover on its detail page is its most influential selling point.</span>
         </li>
          
         <li>
         <span class="a-list-item">A Description: It's important to let people know what your product is about. This is your chance to hook them with a compelling description (this can be from your catalogue, cover, or any other synopsis you may have).</span>
         </li>
          
         <li>
         <span class="a-list-item">Review Excerpts: Readers want to know what others are saying about your product. If the critics are raving, let potential customers know!</span>
         </li>
          
             
         </ul>
          
         <p></p>
          
         <p>
         <strong>Books:</strong>
         </p>
          
         <p> 
             
         </p><ul id="GUID-F27D9117-4C11-4F4C-ADC1-65AD7324CF34__UL_912E9276D99B49DDAB3C0A8E1D59E60B"> 
         <li>
         <span class="a-list-item"><strong>Search Inside!:</strong> This feature provides customers with the unique opportunity to browse through books just as they might when shopping at a physical bookstore. For more information please click here</span>
         </li>
          
             
         </ul>
          
         <p></p>
          
         <p>Descriptive content may be added through our Online Book Content Forms. Please click on the relevant product:</p>
          
         <p> 
             
         </p><ul id="GUID-F27D9117-4C11-4F4C-ADC1-65AD7324CF34__UL_8092CF2ABE4944DB9903A94604C065C2"> 
         <li>
         <span class="a-list-item"> <a href="HTTPS://WWW.AMAZON.COM/ADD-CONTENT-BOOKS" target="_blank">Books</a> </span>
         </li>
          
         <li>
         <span class="a-list-item"> <a href="HTTPS://WWW.AMAZON.COM/ADD-CONTENT-MUSIC" target="_blank">Music</a> </span>
         </li>
          
         <li>
         <span class="a-list-item"> <a href="HTTPS://WWW.AMAZON.COM/ADD-CONTENT-VIDEO" target="_blank">Video</a> </span>
         </li>
          
         <li>
         <span class="a-list-item"> <a href="HTTPS://WWW.AMAZON.COM/ADD-CONTENT-DVD" target="_blank">DVD</a> </span>
         </li>
          
             
         </ul>
          
         <p></p>
          
         <p>
         <strong>Do you sell advertising on your site?</strong>
         </p>
          
         <p>At this time, we do not sell banner advertising on our site. However, for information on Co-op promotional opportunities, please visit our Coop page.</p>
          
         <p>The best way to promote your book is to add descriptive content and images (as described above) to your book's detail page.</p>
          
         <p>
         <strong>How can I make it easier for customers to find my product?</strong>
         </p>
          
         <p>You can ensure that your product listing has complete and correct title, author/artist/actor, and subject information. This information helps customers easily find items they will want to purchase in our store.</p>
          
         <p> In addition, we offer our customers numerous tools to aid them in their hunt.</p>
          
         <p>
         <strong>How can I link my Web page to Amazon.com?</strong>
         </p>
          
         <p>Check out our Associates program! You'll receive a referral fee based on Amazon.com book sales you refer from your own Web pages. We become your order processing and fulfillment centre.</p>
          
         <p>We take the orders on our Web site using our proven software and secure servers. We supply, package, and ship the products. We bill the customer. We handle all customer service. We send you detailed weekly activity reports. We work with thousands of individuals, special-interest groups, magazines, publishers, labels, studios who use Amazon.com to fulfill their visitors' product orders. Sign up online?!</p>
          
         <p>If you promote your products online and don't wish to become an Associate, you may link to our catalogue using this URL:</p>
          
         <p> 
         <a href="HTTPS://WWW.AMAZON.COM/GP/PRODUCT/0000000000" target="_blank">http://www.amazon.com/gp/product/0000000000</a> 
         </p>
          
         <p>The zeroes should be replaced with the 10-digit ISBN (omitting hyphens) or ASIN (listed on the product detail page beginning with a B)</p>
          
         <p>
         <strong>How do I remove an old or out-of-print listing from the Amazon.com catalogue?</strong>
         </p>
          
         <p>As you may know, we offer customers the opportunity to locate out-of-print books and other products no longer available through our Marketplace feature. It is our aim to list a wide selection of titles for our customers' reference and convenience, so it is not our practice to remove a listing even when it is out of print.</p>
          
         <p>If the case is such that a new edition is replacing the edition we list in our store, you'll need to help us get the new version online. Please consult the following pages for instructions on how to add new titles to our Store:</p>
          
             
         <ul id="GUID-F27D9117-4C11-4F4C-ADC1-65AD7324CF34__UL_A96BF2BA4FA343CB98F6DE5135B11823">
         <li>
         <span class="a-list-item">Books</span>
         </li>
         
         <li>
         <span class="a-list-item">Music</span>
         </li>
         
         <li>
         <span class="a-list-item">DVD &amp; Video</span>
         </li>
          
             
         </ul>
          
         <p>Please understand that we are currently posting both new and old versions of any given publication. It should be clear to customers to buy the available edition, and we realize the OP version may prove distracting. Rest assured we are working on ways to improve the display of new and old editions on our site.</p>
          
         <p>
         <strong>Do you screen the reviews from publishers/labels/studios, customers, authors/artists/actors, or other sources used on your site?</strong>
         </p>
          
         <p>In order to help customers make informed buying decisions, we are interested in offering a variety of opinion of the items on our site.</p>
          
         <p>Publishers/labels/studios and authors/arists/actors provide the primary descriptive content and review excerpts that appear on site for their titles.</p>
          
         <p>For some titles on site, we post Amazon.com signed editorial reviews. These appear at the discretion of our Editorial Team.</p>
          
         <p>Finally, we allow our customers to air their honest thoughts about books they have read, music they have listened too and DVDs they have watched through our Customer Reviews feature.</p>
          
         <p>We do exert some editorial control over our reviews. Profane or spurious comments are promptly removed. Our intention is to make the review forum a place for commentary and feedback, so discussions that fall out of this broad parameter are removed from the Web site. If you feel that a customer review falls outside of our guidelines, please contact us at [email protected].</p>
          
         <p>
         <strong>How do I fix typographical errors on my Amazon.com product detail pages?</strong>
         </p>
          
         <p>Please click on the links below for details on how to send your corrections to us:</p>
          
         <p>Books Music DVD/Video</p>
          
         <p>
         <strong>Why are some titles discounted while others are not?</strong>
         </p>
          
         <p>Our decision to discount products is made internally and based on a number of strategic considerations which can vary over time. As it stands now, we offer discounts on hundreds of thousands of selected titles. However we cannot confirm when, if ever, a title will be discounted or how long a title once discounted will remain so.</p>
       
         </div>`,
      },
    {
      id: 5,
      sectionId: 2,
      title: 'Interviewing at Amazon',
      content: ''
    }],
    },
    {
      id: 2,
      title: "Interviewing at Amazon",
      info: [{
        id: 1,
        title: "What technical topics should you be prepared to address?",
        content:
          `Before you dig into the technical topics you may be asked about during your interview, 
                 connect with your recruiting point of contact to understand the subjects/skills you’ll most likely be discussing and demonstrating.
                 In general, our technical interviews typically require you to perform coding and system design white boarding exercises. 
                 Also keep in mind that invention is in our DNA, and technology is the fundamental tool we wield to evolve and improve every
                 aspect of the experience we provide our customers. When reviewing the below topics, keep the customer top of mind.<p>
                 An important part of Amazon’s Software Development Engineer hiring process is the completion of an online assessment which includes a 
                 coding test. We invite you to prepare for the experience by taking this sample coding challenge. You can become comfortable with 
                 the environment and experience practice questions which are similar to the actual assessment. You can click through this as many times as you’d like!`,
      }, {
        id: 2,
        title: "Programming Language",
        content:
          `We do not require that you know any specific programming language before interviewing for a tech position. However, 
                 familiarity with a prominent language is generally a prerequisite for success. You should be familiar with the syntax of 
                 languages such as C, C++, C++14, C#, Go, Java7, Java8, JavaScript, Kotlin, Objective-C, PyPy2, PyPy3, Python2, Python3, 
                 Ruby, Scala and Swift. You should also know some of the languages’ nuances, such as how memory management works, or the 
                 most commonly used collections, libraries, etc.`,
      }, {
        id: 3,
        title: "Data Structure",
        content:
          `Most of the work we do involves storing and providing access to data in efficient ways. 
                 This requires a strong background in data structures. You’ll need to understand the inner workings of common data structures 
                 and be able to compare and contrast their usage in various applications. You will be expected to know the runtimes for 
                 common operations as well as how they use memory.`,
      }, {
        id: 4,
        title: "Algorithms",
        content:
          `Your interview will not be focused on rote memorization of algorithms. However, 
                 having a good understanding of the most common algorithms will likely make solving some of the questions a lot easier. 
                 Consider reviewing common algorithms such as traversals, divide and conquer, breadth-first search vs. depth-first 
                 search and understand the tradeoffs for each. Knowing the runtimes, theoretical limitations, and basic implementation 
                 strategies of different classes of algorithms is more important than memorizing the specific details of any given algorithm.`,
      }, {
        id: 5,
        title: "Coding",
        content:
          `Expect to be asked to write syntactically correct code—no pseudo code. If you feel a bit rusty coding without an IDE or coding
                 in a specific language, it’s a good idea to dust off the cobwebs and get comfortable coding with a pen and paper. The most important
                thing a Software Development Engineer does at Amazon is write scalable, robust, and well-tested code. These are the main evaluation
                criteria for your code. Make sure that you check for edge cases and validate that no bad input can slip through. This is your chance
                to show off your coding ability.`,
      }, {
        id: 6,
        title: "Object-Oriented Design",
        content:
          `Good design is paramount to extensible, bug-free, long-lived code. We know it’s 
                 ossible to solve any given software problem in almost limitless ways, but when software needs to be extensible and maintainable, 
                 good software design is critical to success. One way to build lasting software is to use object-oriented design best practices. 
                 You should have a working knowledge of a few common and useful design patterns, along with how to write software in an 
                 object-oriented way. You likely won’t be asked to describe the details of how specific design patterns work, but 
                 expect to have to defend your design choices.`,
      }, {
        id: 7,
        title: "Databases",
        content:
          `Most of the software that we write is backed by a data store. Many of the challenges tech people face arise when figuring
                 out how to most efficiently retrieve and store data for future use. Amazon has been at the forefront of the non-relational DB movement. 
                 We have made Amazon Web Services such as DynamoDB available to the developer community so that they can easily leverage the 
                 benefits of non-relational databases. While we don't expect any particular level of expertise with non-relational databases, 
                 you should be familiar with broad database concepts and their applications. The more you know about tradeoffs between 
                 relational and non-relational databases, the better prepared you will be.`,
      }, {
        id: 8,
        title: "Distributed Computing",
        content:
          `Systems at Amazon have to work under very strict tolerances at a high load. While we have some internal 
       tools that help us with scaling, it’s important to have an understanding of a few basic distributed computing concepts.
        Understanding topics such as service-oriented architectures, map-reduce, distributed caching, load balancing, and others, 
        will help you formulate answers to some of the more complicated distributed architecture questions you might encounter.`,
      }, {
        id: 9,
        title: "Operating Systems",
        content:
          `You won’t need to know how to build your own operating system from scratch, but you 
                 should be familiar with some OS topics that can affect code performance (e.g. memory management, processes, threads, 
                synchronization, paging, and multithreading).`,
      }, {
        id: 10,
        title: "Internet Topics",
        content:
          `We expect our engineers to be familiar with the fundamentals of how the internet works. Brush up on how browsers function
                 at a high level, from DNS lookups and TCP/IP, to socket connections. Having a solid understanding of the fundamentals of how 
                 the worldwide web works is a requirement.`,
      }, {
        id: 11,
        title: "Genral Machine Learning and Artificial Inteligence",
        content:
          `Expect to be asked about data-driven modeling, train/test protocols, error analysis, and statistical significance. For example, 
                 given a problem definition, you should be able to formulate it as a machine learning problem and propose a solution, including ideas
                 for data sources, annotation, modeling approaches, and potential pitfalls. Understand the basic AI/ML methods and algorithms – 
                 revisit your favorite ML and AI textbooks.`,
      }],
    },
  ],
};

You may specify 'sectionId' property which will redirect you to that section. In this case content can be empty (content: '')

Themes options.

Themes.App, Themes.Default, Themes.Dark, Themes.Contrast

LangData is optional.

 const langData: ILangData = {
  dialogTitle: "Contextual Help (your language)",
  of: "of (your language, e.g. 2 of 10 in pagination)"
}