Up next
The video did not load.
Video course · 11 lessons · 9:31
Your help center, inside your product
From Your help center, inside your product · Verified against the live product on Oct 20, 2026
This lesson
Northwind's website and its Partner Hub web app: what this course adds to each.
Prefer to read? Follow it step by step
Moments in this lesson
Length 0:55
Up next · 0:55
2. Add the widget to your website
Copy the snippet from Embeddables, paste it before the closing body tag, and allow your site in Embedding origins.
Transcript
Lesson 1 · Introduction
- 0:05Hi!
- 0:06In this video, I'll show you every way to bring your HelpCenter.io help center into your own website... or into your own web app.
- 0:15This is Northwind's website.
- 0:16We'll add the help widget to it... open articles right from its pages...
- 0:21show a section of FAQs... and invite visitors to ask for help at just the right moment.
- 0:27Then we'll move to a web app: the Partner Hub, where Northwind's installers sign in.
- 0:31There, the widget will know who is signed in...
- 0:34and show them help that's only for partners.
- 0:37And at the end, I'll show you how to put the whole help center on a page of your own site, or on your own address.
Lesson 2 · Add the widget to your website
- 0:47Everything starts in the dashboard.
- 0:49I'll open the settings menu... and click Embeddables.
- 0:53This is the installation snippet.
- 0:55It loads the widget, and it carries your widget's ID.
- 0:58I'll click Copy.
- 1:00Now, in our website's code, I'll paste it just before the closing body tag... and save.
- 1:06I'll add it to our plans page too.
- 1:08Any page that has the snippet gets the widget.
- 1:11Let's reload the website... Hmm.
- 1:13Nothing there yet.
- 1:14And that's on purpose.
- 1:16The widget only appears on websites you have allowed, so it shows up on your own sites and nowhere else.
- 1:22Back in Embeddables, under Configuration, I'll add our website's domain to Embedding origins.
- 1:28A domain that starts with a dot allows all of its subdomains, too... Then I'll click Save changes.
- 1:34Let's reload once more... and there's our widget, in the corner.
Lesson 3 · What your visitors get
- 1:41I'll open it, the way a visitor would.
- 1:43Right at the top, under Can this help?, the widget suggests articles that match the page the visitor is reading.
- 1:50Our home page is about charging at home... so it offers our getting started guides.
- 1:55Visitors can also search your whole help center, right here.
- 1:58I'll type invoice... and the results appear as I type.
- 2:02With AI Answers switched on, they can simply ask a question.
- 2:06I'll ask: can I pause my plan while I'm away?
- 2:14The answer comes from your own articles...
- 2:16and it shows its sources, so the visitor can read more.
- 2:19Still stuck?
- 2:20Then they can message your team, right from the widget.
- 2:23The message goes to the email address on your help center's contact form.
Lesson 4 · Open an article from your page
- 2:31On our home page, this link goes to our installation guide in the help center... so visitors leave our website to read it.
- 2:38I'd rather open the guide right inside the widget.
- 2:41In the code, I'll add one attribute to the link: data-hc-article... and save.
- 2:48Now, when I click the link... the article opens in the widget, and the visitor stays right where they are.
Lesson 5 · FAQ sections on your pages
- 2:57Next, let's put a few FAQs right on our home page.
- 3:01In Embeddables, I'll open FAQ sections... and click New section.
- 3:06A Full section shows all of your FAQs, by category.
- 3:10I'll choose Custom, to pick just the questions I need.
- 3:14I'll call it Before you order.
- 3:16And under Display on URLs, I'll add our website:
- 3:19a section only shows on the sites you list here.
- 3:23Then, Create and design.
- 3:25There are twenty-seven designs to choose from.
- 3:27I'll pick Canopy... and save the design.
- 3:31Now I'll choose the questions, with Manage FAQs.
- 3:34I'll add the ones people ask before they order.
- 3:39And Install gives me one line of code to paste where the section should go.
- 3:43In our home page, I'll paste it into the FAQ area... save... and reload.
- 3:50There it is, in our own page.
- 3:52And when you edit one of these answers in your help center, it changes here too.
Lesson 6 · Invite visitors at the right moment
- 3:59Sometimes it's better not to wait for visitors to ask.
- 4:02Proactive messages invite them into the widget, at the right moment.
- 4:07In Embeddables, I'll open Proactive messages... and click New message.
- 4:12I'll name it Plans helper... and give it a title... and a short message.
- 4:19Under When it shows, I choose when it appears.
- 4:22The page URL starts with slash plans...
- 4:25and the visitor has spent ten seconds on the page.
- 4:29There are more triggers to choose from, like scroll depth, exit intent... or an event from your own code.
- 4:35We'll use that one later.
- 4:36Under Delivery, I'll switch it on, because new messages start paused... and click Create message.
- 4:43Now let's visit the plans page... and give it ten seconds.
- 4:55There's our message.
- 4:56One click opens the widget.
Lesson 7 · Sign people in with JWT
- 5:03Now let's move to a web app.
- 5:06This is the Partner Hub, where Northwind's installers sign in to manage their jobs.
- 5:11Its help center is private: only partners may read it.
- 5:14So the widget has to know who is signed in.
- 5:17For that, we use JWT single sign-on.
- 5:21In the settings of the partner help center, I'll find Single sign-on, and switch it on.
- 5:27I'll fill in our Login URL.
- 5:29More about that in a moment.
- 5:31Then I'll click Generate to create a shared secret... and Save JWT settings.
- 5:37The secret belongs on our server, and nowhere else.
- 5:40I'll copy it... and add it to our server's settings.
- 5:43On the server, a few lines sign a short token for the partner who is signed in:
- 5:48their email and name, our own user ID...
- 5:51a unique ID for the token, and a lifetime of five minutes.
- 5:55Each token works only once.
- 5:58The widget gets its tokens from this route.
- 6:00And in the app itself, help.js loads the widget once, right after a partner signs in.
- 6:06It passes a first token... and onAuthExpired, which the widget calls whenever it needs a fresh one.
- 6:12Let's sign in as a partner... and open the widget.
- 6:15These are the partner guides, from our private help center.
- 6:19And the Login URL is for the help center itself.
- 6:22When a signed-in partner opens it directly... the help center sends them to our app, which signs them in with a token... and sends them straight back.
Lesson 8 · Fit help into your web app
- 6:34Web apps like this one change pages without reloading, so the widget loads only once.
- 6:39Here's how to keep it in step with the app.
- 6:42First, help for the page you're on.
- 6:44I'll give each page of the app a category from our help center.
- 6:47The number is the category's ID: you'll find it at the start of the category's address in your help center.
- 6:54Then, whenever the page changes, setCategory tells the widget which articles to show first.
- 7:00Help links that the app draws itself call setHrefAndOpen, with the article's address.
- 7:05And with onContactsRequest, people who'd like to contact us go to our own support page, instead of the widget's form.
- 7:12Let's see it.
- 7:13On Installations, the widget starts with our installation guides...
- 7:17and on Payouts... it starts with payouts.
- 7:20On a job, See the photo checklist opens the right article, without leaving the page.
- 7:25Our own Help button simply calls hcWidget.show.
- 7:29And asking for a person from the widget brings the partner to our support page.
Lesson 9 · React to what happens in your app
- 7:39Your app knows when something goes wrong.
- 7:42When photos fail to upload, ours calls hcWidget.trigger, with an event name.
- 7:48In the partner help center, a proactive message waits for that event.
- 7:51Under When it shows, it uses a Custom event, with the same name.
- 7:56Let's try it.
- 7:57I'll upload the photos... two of them fail... and the widget offers help straight away.
- 8:06And when the partner signs out, destroy removes the widget, along with their access.
Lesson 10 · Your help center on your own address
- 8:15Last, the help center itself.
- 8:18You can show it inside a page of your own website: an empty div, and our embed script, with your help center's name.
- 8:24Here it is, at slash help, inside our website.
- 8:28It's allowed because our domain is in Embedding origins:
- 8:31the same list as the widget's.
- 8:33Or give your help center an address of your own, like help dot northwind dot example.
- 8:38Under Custom domain, you enter it, click Apply... and add the DNS record it shows you.
- 8:44And on the Growth and Catalyst plans, Subfolder hosting puts it in a folder of your website, like slash docs, through your own web server.
- 8:52It gives you the rules for nginx, Apache, Cloudflare, and more.
Lesson 11 · Wrapping up
- 9:00And that's every way to bring your help center into your product.
- 9:04The widget, with one snippet... articles opened from your own pages... FAQ sections...
- 9:10proactive messages... and in a web app, signed-in readers, and help that follows every page.
- 9:16You'll find every option in our developer docs, at developers dot helpcenter dot io.
- 9:21Thanks for watching!
Captions and this transcript come from the narration, word for word. Click any line to play from there.
About the course
Every way to add HelpCenter.io to your website or web app: the widget, FAQ sections, proactive messages, JWT sign-in and more.
What you'll learn
- Where the installation snippet is, and why the widget needs your domain in Embedding origins
- What visitors can do in the widget: suggestions for the page they're on, search, Ask AI, contact
- Opening an article in the widget from your own links
- FAQ sections: Custom or Full, a design, the questions, and the one line to paste
- Proactive messages: page and time rules, and custom events from your own code
- JWT single sign-on for a private help center
- Single-page apps, a custom domain, and subfolder hosting
- Who it's for
- Developers and product teams putting help inside a website or a signed-in web app.
- Format
- 11 lessons, 9:31 in all. English captions and a full transcript.
- Last verified
- Oct 20, 2026, on the live product with the Northwind demo help center
- Plans
-
Works on every plan. These lessons cover features on higher plans, and say so:
- Lesson 3 · What your visitors get AI answers: Catalyst or AI add-on
- Lesson 7 · Sign people in with JWT JWT sign-in: Catalyst
- Lesson 9 · React to what happens in your app Custom event triggers: Growth and Catalyst
- Lesson 10 · Your help center on your own address Subfolder hosting: Growth and Catalyst
Articles
Every lesson pairs with a help article, so you can read the steps at your own pace.
-
Add the widget to your website self.helpcenter.io/content/install-the-widgetGoes with these lessons
-
Choose which websites can show the widget self.helpcenter.io/content/embedding-originsGoes with
-
What visitors see in the widget self.helpcenter.io/content/widget-for-visitorsGoes with
-
Turn on AI Answers self.helpcenter.io/content/ai-answersGoes with
-
Open the widget from your own UI developers.helpcenter.io/content/open-the-widget-from-your-uiGoes with
-
Embed FAQ sections on your website self.helpcenter.io/content/faq-sectionsGoes with
-
Invite visitors with proactive messages self.helpcenter.io/content/proactive-messagesGoes with these lessons
-
Sign readers in with your own login (JWT SSO) self.helpcenter.io/content/jwt-ssoGoes with
-
Sign readers into the widget with a JWT developers.helpcenter.io/content/widget-jwtGoes with
-
Widget JavaScript API developers.helpcenter.io/content/widget-javascript-apiGoes with these lessons
-
Show your help center only inside your app self.helpcenter.io/content/js-only-accessGoes with
-
Use your own domain self.helpcenter.io/content/custom-domainGoes with
-
Host your help center in a subfolder of your website self.helpcenter.io/content/host-your-help-center-in-a-subfolderGoes with
-
Widget installation and options developers.helpcenter.io/content/widget-optionsGoes with