This article contains two separate but related procedures. Both procedures pertain to Help Center 2.0, which Helpshift released on May 11, 2021.
- The first procedure tells established Helpshift customers — those who have the legacy Help Center 1.0 product and have already embedded their web support portal into another web page — how to migrate their embedded portal to the new Help Center experience.
- The second procedure tells newer Helpshift customers — those who do not have or use Help Center 1.0 — how to embed their Help Center 2.0 web support portal into another web page.
Migrate your already embedded web support portal from Help Center 1.0 to Help Center 2.0
- Log in to your Helpshift instance as its administrator.
- On the Helpshift toolbar, click Settings ().
- In the navigation pane, scroll to the SUPPORT SETTINGS area. Then, click Branding and Customization.
- Use features of the Branding and Customization page to start configuring and testing a look and feel for your forthcoming Help Center 2.0 user experience.
- To save your work in progress, without staging or deploying it, click SAVE DRAFT.Repeat as needed.
- Open a second browser tab.
- On the second tab, go to Settings > SUPPORT SETTINGS | Web Support Portal.The Web Support Portal page opens.
- On the Web Support Portal page, locate the Upgrade Your Web Support Portal tile. Then, on the tile, click Preview ().Helpshift loads an interactive preview, approximating how your eventual upgrade to Help Center 2.0 can affect the look and feel of your public web support portal. This preview runs locally in your browser. No one else can see it.
- When you are done viewing and testing the local preview, close it to return to the Web Support Portal page.
- On the Web Support Portal page, click GENERATE LINK & EMBED CODE.The Generate Link & Embed Code dialog box opens. It is a tabbed dialog, whose Legacy Support Portal tab (the one for a Help Center 1.0 look and feel) is the default selection.
- When you plan to embed the Help Center 2.0 look and feel instead of the legacy one, click the Support Portal 2.0 (Preview) tab.
- From the Select App list, according to your web support portal strategy, do one of the following.
- To prepare a standalone portal that surfaces the Help Center from one app only, choose the app name.
- To prepare a centralized portal that consolidates all of your Help Centers from all of your apps, choose All.
- From the Select Platform list, according to your strategy, do one of the following.
- To limit the scope of your web support portal to the documented settings and behaviors of your app (or apps) on just one operating system, choose the platform name.
- Alternatively, choose Web.
- From the Select Language list, choose whichever of your brand’s supported languages should be the primary language on your embedded web support portal.
- (Optional) To configure whether the Contact Us page that loads is app-specific, check or clear the Directly open Contact Us page checkbox.
NOTE This checkbox is hidden when the Select Platform list is set to All. |
- (Optional) To accommodate embedding your web support portal into a web page that is already equipped with its own header and footer — or not — check or clear the Hide header and footer checkbox.
- Next to the HTML <iframe> Embed Code label, click Copy ().You have now copied the HTML embed code for your web support portal.
- Find the web page that should show the embedded web support portal, and then open it for editing.
- Paste in the HTML embed code snippet and save your work.
- (Conditional) To hide the built-in page headers and page footers from your web support portal — because you plan to embed it into a web page that already has its own header and footer — append hbhf=1 to the currently embedded URL.For example:
<iframe id='hs-support-frame' src='https://<your_brand>.helpshift.com/a/?hbhf=1' width=100% height=100% frameborder='0'> </iframe>
NOTE Some customers have incorrectly embedded the web help center without the “/a/” in case they have selected a specific app to be embedded. They need to correctly embed it for hbhf=1 to work. |
- Republish the web page that includes your iframe and its embedded content.
- Make sure that the site preview meets your expectations and satisfies your branding requirements.
- (Conditional) After you are satisfied with the site preview, on the Branding and Customizations page’s Web Support Portal tab, click Upgrade Help Center.
- After the upgrade has finished, test the embedded web support portal one more time and work to correct any errors or unintended effects.
Embed your Help Center 2.0 web support portal into an HTML <iframe> on any web page that you administer
- Log in to your Helpshift instance as its administrator.
- On the Helpshift toolbar, click Settings ().
- In the navigation pane, scroll to the SUPPORT SETTINGS area. Then, click Web Support Portal.The Web Support Portal page opens.
- Near the top of the Web Support Portal page, click GENERATE LINK & EMBED CODE.The Generate Link & Embed Code dialog box opens.
- From the Select App list, according to your web support portal strategy, do one of the following.
- To prepare a standalone portal that surfaces the Help Center from one app only, choose the app name.
- To prepare a centralized portal that consolidates all of your Help Centers from all of your apps, choose All.
- From the Select Platform list, according to your strategy, do one of the following.
- To limit the scope of your web support portal to the documented settings and behaviors of your app (or apps) on just one operating system, choose the platform name.
- Alternatively, choose Web.
- From the Select Language list, choose whichever of your brand’s supported languages should be the primary language on your embedded web support portal.
- (Optional) To configure whether the Contact Us page that loads is app-specific, check or clear the Directly open Contact Us page checkbox.
NOTE This checkbox is hidden when the Select Platform list is set to All. |
- (Optional) To accommodate embedding your web support portal into a web page that is already equipped with its own header and footer — or not — check or clear the Hide header and footer checkbox.
- Next to the HTML <iframe> Embed Code label, click Copy ().You have now copied the HTML embed code for your web support portal.
- Find the web page that should show the embedded web support portal, and then open it for editing.
- Paste in the HTML embed code snippet and save your work.
- Test that the embedded web support portal looks and behaves according to your plan.