With HelpBar, you can make your resources available to users when needed and allow them to find the right answers. Add a 'Spotlight Search' that connects your well-written documentation, product pages, and key actions to unblock users in their journey.
You can configure and publish your own HelpBar in just a few steps.
Check out a demo of the HelpBar configuration π
Availability & Usage
π Available on all plans
π Integrates well with Intercom, Document360, GitBook, Help Scout, ReadMe, Zendesk
βοΈ Configure & Preview from the Dashboard
Style
Chameleon picks up the colors from your app's style. You can adjust the background and text colors as well as tweak the styling with Custom CSS to ensure HelpBar fits right in your interface.
βΉ You can also customize the placeholder text in the Style section, and it will immediately update in your HelpBar. Note that the placeholder text has a max length of 60 characters.
There are different types of content you can add, including help documentation, Walkthroughs, integration Actions, or custom content from your app.
β¨ You can also group individual links into "Collections" and show them on specific pages and to specific users. See more below under Pinning content.
First, you'll pick the type of content you want to add and next, you'll follow a simple flow to add it to HelpBar.
To add public content, just tell Chameleon where to pull your results from -- paste your link (e.g. your help center's) and Chameleon will bring up the content that you can add to your HelpBar.
π‘ You can also add your Blog articles or Developer Docs to HelpBar.
Common issues when adding your help center
Common issues when adding your help center
What if the HelpBar doesn't detect all my articles?
What if the HelpBar doesn't detect all my articles?
Double-check your URL to be correct, you can also switch to a private search if you have richer content there.
with Intercom, if your help center link looks something like
intercom.help/emberapp/en
you can visit your Intercom account and update your URL to exclude the knowledge base name, likehelp.emberapp.com
, and add that to your HelpBar.
My help center is public, and my link looks good but I still get 0 search results
My help center is public, and my link looks good but I still get 0 search results
Go to your knowledge base account under 'Settings' and check if you have the option to enable 'search engine indexing'. Once you enable this, it should take up to a couple of days for engines to index your content and for it to be available in your HelpBar.
Check to see if your URL has a redirect. HelpBar doesn't support URL redirects yet, but you can edit your help center URL and just remove the URL path for the HelpBar to be able to search it and show results. For example, if your link looks like
emberapp.com/docs/overview
simply remove the 'overview' path.
If you have a private knowledge base, you can still leverage it with the HelpBar. π You can authorize the connection with Chameleon and switch between public or private results when adding your content.
π€ We advise you to use a source with enough content to enable your users to learn about different topics. You can always configure the HelpBar with what you have, but it's more powerful when packed with valuable resources.
Once you add it to your HelpBar, you'll be able to:
add a compelling Title to it
adjust its icon
pick an audience
pick a language for your search results
enable AI answers
βΉ Chameleon will pull results in different languages from your help center, You can restrict the search results language by adjusting the 'Language filter' when adding your help center.
To add product navigation, user-generated content from your app, or individual URLs select the option to "Add any link". Here, you'll also be able to choose which content Group should your resource go in. When adding individual links, you can pick between 3 different options:
to bulk upload links via a CSV -- great for one-time uploads
configuring single URLs -- great for quick links
or send it via our API -- great for sending content dynamically
To get content into HelpBar, you can put all your links together in a spreadsheet and upload that to Chameleon.
First, get your Template to easily add any content you want to use. You can pick how you want the HelpBar to handle each link (e.g. open in a new tab or navigate to it) and pick the icon for each entry.
Once your file is ready export it as a CSV and upload it in your Dashboard. Chameleon will notify you of any possible issues, to ensure your file will upload correctly; and your links will work seamlessly. If you see any errors, review the message and adjust your file. You can also preview your content and sort between the records in the table to review your content.
If you spot anything that should be different, click the entry in the table you want to update and you can easily adjust it before publishing it to HelpBar.
You can add any link to your HelpBar and configure how it appears to your users. Choose this option when adding your content, and you'll follow a simple flow to configure how this link should appear.
Once you paste in your URL, you'll have a few useful options:
adding a comprehensive Title & Description *or let Chameleon generate them
choosing if it should open in a new tab or navigate to it inside your app
selecting a representative icon
picking a target audience
pinning it to be visible when your HelpBar opens
π If you've installed the Chameleon snippet before May 2023, ensure you've enabled the 'Navigation without refresh' toggle on the JS install page, so in-app navigation works seamlessly with your product.
After you publish your entry to HelpBar, your link will appear in your respective content Group. Simply select it and you can click any resource in the table to edit it π
π See how to change the order of your "Content Groups" in HelpBar.
You can also use our API to send content to your HelpBar to a specific content Group. Simply generate your API token and copy the code from the Dashboard. This is a powerful method that enables you to have user-generated content from your app, always available to users.
βΉ You can also leverage the API method to control who sees your product content. Simply send the properties that control user permissions on your account and you can restrict specific searches to show up for specific users.
π Read more about how to leverage this option or explore our API documentation.
π You'll soon be able to add your Chameleon Walkthroughs from HelpBar.
You can currently add any Walkthrough via the Tour Sharing option.
Just grab the link from your Dashboard and add it to your HelpBar as a Single URL. Don't forget to set a title and description before publishing.
Users can launch your connected integrations from HelpBar, for a richer, more immersive user experience. Allow users to book calls, see upcoming feature demos, or peruse success plans and guides at their convenience.
Start adding your integrations by clicking Add content β Actions β Add Action, under the 'Searchable content' panel in your Dashboard. From the dropdown, find and select the integration you want to add and you'll configure a few details, before adding it to your HelpBar.
βΉ Ensure you enable your integration first in your Dashboard, for it to show up in your HelpBar list as an 'Action'.
Once you add one, or several Actions, you can publish them to HelpBar.
And users can access them right away.
The 'Action' title, description, and options to pick an audience option, an icon, or 'Pin' it to a page collection, are common across all Actions. But, depending on the integration it can have specific configuration fields, such as choosing how to display a Typeform survey, or picking between opening a Help Scout chat or help doc.
β¨ You can 'Pin' any Action to show up in any of your Page collections, so users can find and access them easily.
Once you add Actions to your HelpBar you'll find an Actions content group in your content panel. Here you can manage each Action, adjust its settings, or delete it.
π See the full list of Actions (integrations) you can launch from HelpBar.
Navigation to recent pages
Allow users to access the pages they recently accessed via HelpBar and help speed their flows in your app.
You can easily enable this by clicking the "Add content" option under Searchable content. Below the different types of content you can add to HelpBar, you can enable the toggle next to "Automatically enable recent pages navigation".
Chameleon will start tracking the pages that users visit and will show a "Recently clicked" section in HelpBar before users begin a search.
In cases of pages from your app, HelpBar will show the title and first header (unless they are the same, in which case only the title will be displayed).
βΉ The user must have visited that page in the prior 30 days for it to show up.
To remove content from your HelpBar, you can do so from the Dashboard by clicking any resource you've added.
Or use Chameleon's spreadsheet template to remove multiple items. Specify the resources you'd like to remove and upload your file into the Dashboard.
You can also use the CSV upload template to remove content, by matching the item IDs
Make it easier for users to access your most helpful resources by pinning resources to your HelpBar. They display as soon as users open your HelpBar before they start searching.
There are a few ways you can pin resources; from the Dashboard go to Pinned Content and add in your link.
You can also pin any individual links you add to your HelpBar, or edit existing links that are not pinned.
π Choose the audience for each pinned resource to ensure the right guides show up for the right users.
βΉ The pinned items you add individually (without going through the flow of adding content) will be added by default to a collective group 'Recommended' where you'll find all individually pinned resources.
You can also create Page Collections and determine where your pinned resources should appear, through URL rules. This makes it easier for you to pin your resources across multiple pages, or very specific ones.
From the Pinned Content section in your Dashboard, hit the 'New Page Collection' button to add a collection to your HelpBar. Give it a name and define your URL conditions to tell Chameleon where your pins should appear. You can leverage different matching types to determine where your collection should appear, based on the values you enter:
contains/ does not contain
is/is not exactly
matches a regular expression
You can add two URL rules and set if both should apply or any of them for your pins to show in your HelpBar.
βΉ Any pinned resources inside a collection will appear only to users who are searching on that URL. So for example, you can add resources that show up only on pages like help, troubleshooting, pricing, etc.
With your "Collections" created you can pin new resources to any of them, by clicking the collection you want to update, and hitting the Pin content button. Add your link as usual, including selecting a specific audience that should see it.
To remove any pin, simply find it in the list and click the icon on the right (unpin).
You can also add filters to bring up different resources that show up to specific audiences in a collection.
This is useful to help you stay on top of the most helpful resources that each user group or company should access to be successful with your app. For example, new users will benefit from seeing a getting started video, but that would be mostly noise for more proficient users.
βΉ When you add filters to your Collections, any resource that is set to appear to All users will also show up.
You can edit your "Page Collections" anytime and move pins from one collection to another.
βΉ You can also choose the order in which the "Page Collections" appear in your Dashboard, but this does not impact the end-user experience.
π Available for Public & Private Help Centers
With HelpBar you can enable users to find answers to various questions. Leverage AI to answer any specific questions users may have.
There's no special requirement for you to use this feature and it can greatly enhance your users' experience in your app. Users can open HelpBar and ask any question about your product. Our AI assistant searches your help center content for the right answer and shows it to your users as the top result in the HelpBar.
To start training the AI Assistant head over to the HelpBar configuration in the Dashboard, under Content. In case you haven't added your help center's content yet, you can do it now via the 'Search a website' option. Once your help center is connected you can click the 'Start AI training' button which will take just a few moments.
This process usually takes less than a minute and the AI assistant will be equipped to offer answers to questions on the spot, directly from your knowledge base.
Once trained, you'll be able to sync your content anytime down the road or disable the AI Assistant from your HelpBar.
βΉ When you enable AI answers, Chameleon searches for the first 50 results on Bing (in the case of public searches), as well as different key topics, such as: security, data, use cases, team management.
You can also send the questions and AI answers that users pose (and get) to your Slack channels. This is a good way to ensure more visibility over the questions that users ask in your HelpBar.
π Check out how to set up your HelpBar feed for Slack. Once you're set, you'll be able to see the question, answer, what page users were on when they asked the question, as well as useful properties to help you understand who posed the question.
βΉ We rely on the latest models available, as they are released to provide accurate answers with AI. But we suggest you also keep an eye on any gaps you may identify in your documentation and update or create new articles. This will increase the quality of your AI answers and ensure users will find answers to their questions.
Tips for better AI answers
As this feature relies on your content to deliver correct answers to users, here are a few tips to prepare or edit your help documentation, so the AI assistant can leverage it efficiently:
keep your titles and your headings clear, incorporating keywords or phrases that your users may use;
ensure your knowledge base is structured clearly with sections that correspond to specific questions or edge cases;
ensure you answer major questions clearly in stand-alone articles;
you can create a glossary of the key terms that you use in your product or help center
To enable your HelpBar to answer specific, but varied user challenges, you can target your content to distinct audiences. Whenever you add content, you can pick who should see it from:
all your users
one or several Companies
one or several Segments
Or you can easily update the audience of any content Group by editing it and selecting your preferred audience from the dropdown.
βΉ You can also choose specific audiences for your pinned content.
Once you add your content it's time to set how users can launch it in your app. You have a few options to pick when enabling users to access your HelpBar. From the Dashboard pick a:
keyboard shortcut -- leverage an already familiar pattern (
CMD/Ctrl +
) and update the final keyboard letter that launches your HelpBar.click target -- this is a clear element in your UI that users can spot and access (or a custom image).
open via a Chameleon Launcher -- add HelpBar as a Launcher Item.
open via API -- copy the API command that launches your HelpBar. You can also use variations of this command and prefill a query or specify a custom placeholder, enhancing the user experience.
With the click target option, you can define how this element looks and where to place it. You can choose to have:
the Chameleon Smart widget -- this can show a custom text (e.g. 'search anything') the keyboard command you set up, or an icon
a custom image -- that you can place in your app
an existing element from your app - select an on-page element that launches your HelpBar
You'll use the Chameleon Builder to place the widget in your app, pick where your custom image should be displayed, or select an existing element from your app.
Once you select an element you have a few different options to pick when placing your 'Smart Widget' (or custom image) in your app:
screen placement (bottom-left or bottom-right)
anchored to an element on the page
or inline (before or after an element on your page)
βΉ The 'Smart Widget' and the custom image leverage the same existing element, you can pick which one to use by toggling it on, and you can further adjust it. If you'd like to use the keyboard shortcut alone, just disable any click target from the toggle.
If you need to adjust the styling further, you can also apply custom CSS to your 'Smart Widget'.
π Include your HelpBar in your Launcher as an Item or launch it from your Experience buttons to enable users to discover it.
Preview and Publish
Before going live with it, you'll also be able to leverage Chameleon's Environments and set where your HelpBar should display. This is especially useful if you want to test it out on a staging domain first.
βΉ You can add content to HelpBar and preview how results display for end-users without installing Chameleon.
To test out how your results display for end-users, you can preview HelpBar in the Dashboard and test out a few searches. Look for the Preview button under "Searchable content", "Pinned content", or "Review & Publish". Your HelpBar will open in a new tab where you can test what end-users will see.
You can test your search results, how Actions launch, or even how different Pins appear on different pages. Simply update the URL in the top-right side to see results from a different "Page Collection".
βΉ While previewing, use your keyboard shortcut to open/close HelpBar. Keep in mind that in Preview mode segmentation, and any app navigation links will not work.
π You can keep both the Dashboard configuration tab and the Preview open while adding content. Just switch between the 2 and see your content immediately show up in your HelpBar.
Finally, once you're happy with your configurations and the way results appear go ahead and publish it live in your product.