How to embed a help center in a client portal

If you set up a client portal, a staff intranet or a Google Site for a client, that is where they go to find what they need from you. When they get stuck there, the answer should be on the same page, not in a new tab. Embed a help center on that page, and the search, the guides and the chat sit inside the portal your client already uses.

Why the help center belongs inside the portal

A "Help" link in a portal's menu sends the reader to a different site, with different navigation. Some readers follow it. Most send you an email instead, because that is faster.

An embedded help center stays on the page. The reader searches, opens a guide, follows the steps, and is still in the portal when they finish. Their Back button still takes them wherever they came from, because reading happens inside the panel and the rest of the page stays where it was.

The portal also gets the same guides as everywhere else. A hub shows the guides you have placed on it, so the panel in the portal and the hub at its own address are the same help center. Correct a guide once and both are current.

What you need before you start

1. A hub with published guides on it. A guide that is still a draft does not appear anywhere, embedded or not.
2. The address of the site you are pasting into, such as acme.com or sites.google.com.
3. Edit access to that page, in whatever builder the portal uses.

How to embed a help center on any website

Everything here happens on the hub's Support tab, so open the hub you want to show first.

1. Turn on Allow this widget on other websites if it is not already on. One setting covers the chat and the help center.
2. Add the site's address. Type it under Websites allowed to show it and click Allow this site. acme.com also covers www.acme.com, and *.acme.com covers every address under it.
3. Pick what to show. Under What to show, choose The whole help center, or one of the options that starts with Only the to show a single section.
4. Set the height. How tall, in pixels accepts anything from 320 to 2000. The panel keeps that height and scrolls inside it, so opening a guide never makes the portal page jump.
5. Copy the code with the copy icon beside Paste this where it should appear. The icon turns to a checkmark when the code is on your clipboard.
6. Paste it into the portal page. The code is one <iframe> tag with no script beside it, so a website builder that strips scripts will not break it.
7. Open the page. The help center is in the panel, in the hub's own colors, with its search at the top.

If the panel is empty, the address is missing from the allow-list. The browser refuses to draw a help center on a site that is not listed and shows no error explaining why, which is also what stops anyone else putting your client's help center on their own site.

Show one section instead of the whole hub

Agencies tend to collect hubs. One for each client, then one for each product a client sells, then one for the internal team, each with its own branding to keep current.

A section embed removes most of that. Pick a section under What to show and the panel opens on that section only, with its name, its search and its categories. Opening a guide adds a bar with Back and the section's name, and both return the reader to the section. Nothing in the panel leads to the rest of the hub.

So one hub can cover several products. Give each product a section, and paste that section's code on the page about the product.

The chat stays on the same subject. Doc AI answers only from the guides and SOPs in that section, and the chat's Docs tab lists only those. A reader whose question the section does not cover can still click Ask a person, and the question arrives in the hub's Inbox as a ticket.

Docs, chat, or both

The code gives you the help center with the chat bubble over it. To change that, add show to the address inside the code:

• ?show=hub shows the help center alone, for a portal that already has its own way of getting in touch.
• ?show=chat shows the chat bubble alone, on a page with nothing behind it.

If the address already has a ? in it, for a section or a private hub's key, write &show=hub instead.

How to embed a help center in Google Sites

Google Sites is a common home for client portals, since nothing needs hosting. It needs two more addresses on the allow-list than an ordinary website, because Google Sites runs embed code inside two frames of its own, one on www.gstatic.com and one on a googleusercontent.com address. The browser checks every frame in that chain, and if any of them is not allowed, the help center does not load.

1. Allow sites.google.com on the hub's Support tab. Two suggestions appear above the list: www.gstatic.com and *.googleusercontent.com.
2. Click Allow it too on both suggestions. Each one joins the list.
3. Copy the code.
4. In Google Sites, choose Insert, then Embed, and switch to the Embed code tab.
5. Paste the code, click Next, then Insert. A box for the embed appears on the page.
6. Drag the box's bottom edge until it is about as tall as the height in the code. Google Sites draws the box at its own size, and anything taller is cut off.
7. Click Publish, then open the published site in a new tab. The help center is in the box.

Check the published page rather than the editor. The editor's preview runs on other Google addresses and can stay blank while the published page works.

A Google Site on its own domain needs that domain in place of sites.google.com, with www.gstatic.com and *.googleusercontent.com added by hand. Nothing in a custom domain says it belongs to a Google Site, so the Support tab cannot suggest them.

One trade-off to know before you do this for a private hub. *.googleusercontent.com covers every Google Site, not only yours, so anyone could put that hub's panel on a Google Site of their own. For an open help center that is usually fine. On a hub with a password, the key in the code is what keeps it private, so share the code only with people you trust.

When the panel is blank

Work down this list in order:

1. The site's address is not on the allow-list. Add it on the Support tab and reload the page.
2. It is a Google Site and one of the two extra addresses is missing. Both www.gstatic.com and *.googleusercontent.com need to be on the list.
3. You are looking at the Google Sites editor. Publish and check the published page.
4. The panel says "This help center isn't available here." The section in the code was made internal or taken off the hub. Put it back on the hub, or pick a different section and paste the new code.
5. The guides you expect are missing. They are still drafts, or they have not been placed on that hub or section.

Where to go from here

Pick the client who emails you the most questions, and the portal page those questions are about. Give that page the one section it needs, and paste the code. The next time they get stuck on that page, the answer is already on it, and the question that does not have an answer yet arrives in your Inbox as the next guide to write.

The full steps, including private hubs and key rotation, are in "Put your whole help center on your own website" in the Docssier help center. Plans, including the free one, are on the pricing page. If you are still deciding whether a hub is the right home for client docs at all, A hub is a website, not a share link covers that.

FAQ

Can I embed a help center without JavaScript?

Yes. The code is a single <iframe> tag with no script beside it, so it works in builders that strip scripts.

Can I embed only part of a help center?

Yes. Choose a section under What to show on the hub's Support tab. The panel shows that section only, and Doc AI answers only from the guides and SOPs in it.

Why does my embedded help center show a blank space?

The site's address is almost always missing from the hub's allow-list. On a Google Site, www.gstatic.com and *.googleusercontent.com also need to be listed.

Does an embedded help center update when I edit a guide?

Yes. Publish or correct a guide and it is in the panel the next time somebody opens that page. There is no code to paste again.

Can I embed a password-protected hub?

Yes. The code includes a key in place of the password, so the help center is as private as the page you paste it into. Use it on a signed-in portal or intranet, not a public page. Rotate key on the Support tab stops every copy of the old code within the hour.

Sources

• Google Sites Help, "Add & edit embedded content": Insert, Embed, Embed code, Next, Insert, Publish. https://support.google.com/sites/answer/90569
• MDN Web Docs, "CSP: frame-ancestors": the directive checks each ancestor frame, and the load is canceled if any ancestor does not match. https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-ancestors
• Docssier help center, "Put your whole help center on your own website" and "Allow-list the websites that can show a hub". https://help.docssier.com