Product · AI Widget

Your help center, inside your product

Your customers get answers on the screen they're stuck on, without opening another tab. One script gives your app search, AI answers that cite your articles, and help that opens exactly where it's needed.

  • A help button, your own Help menu, or a ? next to any setting
  • AI conversations answered only from your published articles
  • Signed-in customers see the private articles meant for them
Start free trial Try the interactive demo

The widget is on every plan. AI answers are included on Catalyst, or a $29/mo add-on on Bootstrap and Growth. Send this to your developer

Every answer cites your articles

One script, any web app

React, Vue, Angular or plain HTML, single-page apps included.

Opens where they're stuck

From your own button, a ? beside a setting or a link in your UI.

Answers with sources

AI answers come only from your published articles, with citations.

Looks like your product

Your colours, launcher icon, greeting and texts, in your languages.

Integration options

Six ways to put help inside your product

Pick one to see what your customers get and what your developer adds. They all run on the same script, so you can start with one and add the rest later.

A help button on every screen

One click opens your help center over the screen your customer is on: search, the articles that fit that screen, your most read guides, your categories and a way to reach your team.

Every plan

Suggestions for the current screen need a plan with AI.

Try it in the demo Add the widget to your website Widget installation and options
What your developer adds
HTML Install 
<!-- Before </body>, on every page of your app -->
<script>
  window.hcOptions = { app_id: 'YOUR_WIDGET_ID' };
</script>
<script src="https://helpcenter.io/js/init.js" async></script>

Your own Help menu

Hide the launcher and open help from your header, an onboarding checklist or a command palette. The widget opens as a full-height panel beside your app, and full screen on phones.

Every plan
Try it in the demo Open the widget from your own UI
What your developer adds
JavaScript Your own Help button 
window.hcOptions = {
  app_id: 'YOUR_WIDGET_ID',
  showButton: false, // no floating launcher
  onWidgetReady: function () {
    document.getElementById('help-button').disabled = false;
  }
};

document.getElementById('help-button').addEventListener('click', function () {
  window.hcWidget.show();
});

A ? next to any setting

Put a ? beside a tricky setting, or turn any "Learn more" link into one that opens the article inside the widget. Your customer reads it next to the field and carries on. Each screen can also list its own category of articles first.

Every plan
Try it in the demo Open the widget from your own UI Widget JavaScript API
What your developer adds
HTML Article links and per-screen help 
<!-- A ? that opens the article inside the widget -->
<a href="https://help.flowline.io/content/add-or-remove-seats" data-hc-article>?</a>

<script>
  // On the billing screen, list the Billing category first
  window.hcWidget.onReady(function () {
    window.hcWidget.setCategory(4821);
  });
</script>

Your whole help center as a page

Show your full help center, with its search, categories and articles, as a page of your app. It keeps your help center's design, grows to the height of each page, and your app's address follows along, so a link to an article opens it right there. With JS-only access on, it opens only inside the sites you approve.

Growth and Catalyst
Try it in the demo Embed your help center in your app Show your help center only inside your app
What your developer adds
HTML The whole help center as a page 
<!-- On your app's /help page -->
<div id="hc_embed"></div>
<script>
  window._hcEmbedOpts = { customDomain: 'help.flowline.io' };
</script>
<script src="https://helpcenter.io/js/embed.js"></script>

FAQs on the screens that need them

Put the questions everyone asks about billing right under your plan picker. You edit an answer once in your help center, and every screen that shows it updates. Pick the questions yourself, or show every FAQ grouped by category.

Every plan
Try it in the demo Embed FAQ sections on your website
What your developer adds
HTML A FAQ section 
<!-- Anywhere on a page that has the widget snippet -->
<div class="hc-faq-section" data-id="YOUR_SECTION_KEY" data-type="custom"></div>

A nudge at the right moment

Offer help when a customer lingers on a screen, scrolls past your pricing, goes idle in a form, or when your own code says something went wrong. One click on the message opens the widget.

Every plan

2 messages with page and time rules on Bootstrap. Up to 50 messages and all 13 triggers on Growth and Catalyst.

Try it in the demo Invite visitors with proactive messages Widget JavaScript API
What your developer adds
JavaScript A proactive message from your code 
// After an import fails in your app. A message with the
// Custom event rule "import_failed" shows over the launcher.
window.hcWidget.trigger('import_failed');
Works with every option: your app's login Signed-in customers see their private articles without a second login. Catalyst. Works with every option: your support team When the articles run out, hand off to a contact form or to your own chat. Every plan.

This page runs the real widget

It's connected to our own help center, in the corner of your screen. Ask it how to install it, or open our install guide in it the way a ? link would in your app.

Read our install guide
AI Answers in the widget

Customers ask in their own words. The answer comes from your articles.

Ask AI reads your published articles and writes one answer, with a numbered citation for every claim and the sources underneath. Your customers can keep asking: follow-up questions carry the context of the conversation. When your articles don't cover something, it says so instead of guessing, and points to your team.

Pick a question
  • Streams in seconds. Each citation opens its source article inside the widget.
  • Customers can reopen a recent conversation and carry on where they left off.
  • Every thumbs up and down lands in your analytics, next to what people asked.
Catalyst, or $29/mo add-on No per-answer fee. Fair-use limits apply.
See everything AI does in HelpCenter.io
AI Assistant
Can a contractor see our reports without editing them?
AI AssistantAnswered from 2 articles

Yes. Invite them from Team, then Invite, and choose the Viewer role.1 Viewers can open dashboards and reports, but can't edit them, export data or invite anyone.2

Sources
1 Invite teammates to a workspace 2 Roles and permissions
And can they export a report to CSV?
AI AssistantAnswered from 2 articles

Not as a Viewer. Exporting needs the Editor role or above.1 If they only need the numbers, an Editor can schedule the report to email them a CSV every Monday.2

Sources
1 Roles and permissions 2 Schedule a recurring report
Ask a follow-up…
Questions about one article

Halfway through a guide? Ask the guide.

Every article that opens in the widget comes with an "Ask about this article…" bar. The answer comes from that article alone, so a customer in the middle of a setup guide gets the step they need without starting a new search.

  • Answers only from the article on screen, nothing else
  • Your statistics show what people asked about each article, so you know which one to rewrite
  • Under every article: "Was this article helpful?", rated Helpful, Love it or Not really
Catalyst, or $29/mo add-on
Context and proactive messages

Help that shows up before the ticket does

"Can this help?" for the screen they're on

The widget reads the text of the page and suggests the two articles that match it best. On a plan with AI.

The right category on every screen

Tell the widget which category belongs to each part of your app, and your billing screen lists billing articles first. On every plan.

Proactive messages with 13 triggers

Page address, time on page, scroll depth, idle, exit intent, an abandoned form, a click, your own events from code and more. Test a message against any address before it goes live. 2 messages with page and time rules on Bootstrap. Up to 50 messages and all 13 triggers on Growth and Catalyst.

Invite visitors with proactive messages
Single sign-on

Your app's login carries into the widget

Your backend signs a short-lived token for the customer who is already logged in, and the widget sends it with every request. There's no second login, and private categories, like admin guides or the docs for one plan, show up in the widget's categories and search only for the readers they're shared with.

  • The first token travels in the frame's address after the #, so it stays out of server and proxy logs
  • Each token is used once; the widget asks your code for the next one when it needs it
  • Your signing secret stays on your server. The browser only ever holds short-lived tokens
Catalyst Sign readers into the widget with a JWT
Your brand, your languages

It looks like part of your product

Your colours and icon

Set the two colours of the gradient, pick a launcher icon, and write the brand name, greeting and texts. The live preview shows every change before you save, and you can remove the HelpCenter.io branding.

Either corner

Bottom right by default, bottom left with one option.

Your customers' language

Show the widget in any of your help center's languages, with your own translations of its buttons and labels. Several languages on Growth and Catalyst.

Made for phones

On screens narrower than 450 pixels the widget opens full screen.

Hand-off

When the articles run out, your team takes over

"Still stuck? Message our team" opens a short form inside the widget that emails your team. Rather use your own chat or ticket form? One option in the snippet hands that moment to your code instead.

Step-by-step guides for your chat tool
Intercom Messenger Chatra Gorgias Chat tawk.to
Every plan
Statistics

See what your customers ask, inside your app

Filter your statistics to the widget and you see your in-app help on its own: what people searched, which searches found nothing, what they asked AI about each article, and how many solved it themselves before contacting you.

  • Every search with its outcome, so the gaps in your articles are a list, not a hunch
  • Visitor journeys from visit to self-served, or on to your team
  • 14 days of history on Bootstrap, 60 days on Growth, 365 days on Catalyst
For your developer

Everything your developer needs, ready to paste

Each snippet is a few lines of plain JavaScript or HTML, with no package to install and no build step. Forward this section, or send the docs straight to whoever looks after your app.

HTML Install 
<!-- Before </body>, on every page of your app -->
<script>
  window.hcOptions = { app_id: 'YOUR_WIDGET_ID' };
</script>
<script src="https://helpcenter.io/js/init.js" async></script>
Full reference: Widget installation and options
JavaScript Your own Help button 
window.hcOptions = {
  app_id: 'YOUR_WIDGET_ID',
  showButton: false, // no floating launcher
  onWidgetReady: function () {
    document.getElementById('help-button').disabled = false;
  }
};

document.getElementById('help-button').addEventListener('click', function () {
  window.hcWidget.show();
});
Full reference: Open the widget from your own UI
HTML Article links and per-screen help 
<!-- A ? that opens the article inside the widget -->
<a href="https://help.flowline.io/content/add-or-remove-seats" data-hc-article>?</a>

<script>
  // On the billing screen, list the Billing category first
  window.hcWidget.onReady(function () {
    window.hcWidget.setCategory(4821);
  });
</script>
Full reference: Open the widget from your own UI
JavaScript Signed-in customers 
window.hcOptions = {
  app_id: 'YOUR_WIDGET_ID',
  jwt: firstTokenFromYourServer,
  // Each token is used once, so the widget asks for the next one here
  onAuthExpired: async function () {
    const response = await fetch('/helpcenter-token', { credentials: 'include' });
    const { jwt } = await response.json();
    return jwt;
  }
};
Full reference: Sign readers into the widget with a JWT
JavaScript Your own chat or ticket form 
window.hcOptions = {
  app_id: 'YOUR_WIDGET_ID',
  // Runs instead of the widget's own contact form
  onContactsRequest: function () {
    openSupportChat();
  }
};
Full reference: Handle contact requests yourself
HTML The whole help center as a page 
<!-- On your app's /help page -->
<div id="hc_embed"></div>
<script>
  window._hcEmbedOpts = { customDomain: 'help.flowline.io' };
</script>
<script src="https://helpcenter.io/js/embed.js"></script>
Full reference: Embed your help center in your app
HTML A FAQ section 
<!-- Anywhere on a page that has the widget snippet -->
<div class="hc-faq-section" data-id="YOUR_SECTION_KEY" data-type="custom"></div>
Full reference: Embed FAQ sections on your website
JavaScript A proactive message from your code 
// After an import fails in your app. A message with the
// Custom event rule "import_failed" shows over the launcher.
window.hcWidget.trigger('import_failed');
Full reference: Invite visitors with proactive messages

Not the one writing the code?

Send your developer a short email with this page and the four docs they need. It opens in your own mail app; nothing is sent until you press send.

Email this to your developer

Developer docs

developers.helpcenter.io
  • Loads asynchronously, so it never holds up your page
  • Stays put through route changes in single-page apps
  • Shows only on the websites you list under Embedding origins

Questions SaaS teams ask

Do I need a developer to add the widget?

Someone who can edit your app's HTML pastes one snippet before the closing body tag; in a single-page app it goes in the app shell, once. Everything else, from colours, launcher icon and texts to proactive messages and FAQ sections, is set in your HelpCenter.io dashboard without code.

Does it work in a single-page app?

Yes. Load the snippet once and the widget stays put through route changes. Call hcWidget.setCategory() on each route to list the help for that screen first, and each route change counts as a new page for your proactive messages.

Can signed-in customers see private articles in the widget?

Yes, with single sign-on on Catalyst. Your backend signs a short-lived token (a JWT) for the customer who is logged in, and the widget sends it with every request, so there is no second login and private articles show only to the readers they are meant for.

Which plans include AI answers?

Ask AI, follow-up questions, questions about an article and suggestions for the current screen are included on Catalyst, or available as a $29 per month add-on ($24 per month billed annually) on Bootstrap and Growth. The widget itself, search, articles, FAQ sections, proactive messages and the contact form are on every plan. There is no per-answer fee; fair-use limits apply.

Can I show my help center only inside my app?

Yes. Embed it as a page of your app and turn on JS-only access, and your help center opens only inside the websites you list. Embedding the whole help center is part of Growth and Catalyst. JS-only access is not access control on its own: to limit who can read your articles, make the help center private and sign readers in with single sign-on.

Will it slow my app down?

The loader is loaded asynchronously, so it does not hold up your page, and the widget runs in its own frame. One snippet loads the widget, your FAQ sections and your proactive messages.

What happens when the articles do not have the answer?

Ask AI says it could not find it rather than guessing, and the widget offers "Still stuck? Message our team". That opens a short contact form that emails your team, or, if you prefer, your own chat or ticket form through the onContactsRequest option.

Give your customers answers without leaving your app

Start a trial, paste one snippet, and see your help center inside your own product.

Start free trial Try the interactive demo
14-day free trial · No credit card required