docs
Dashboard

HelpHero Editor

The HelpHero Editor appears when you are authenticated with HelpHero and have editing rights to the installed HelpHero application.

While the HelpHero Chrome extension is the fastest way to get going with HelpHero. You also have the option to use the HelpHero Editor without using the Chrome extension. For example if you want to edit your tours in a different browser or in a non browser context such as an Electron app. First you need to ensure that the HelpHero Scripts are installed on your website.

Controlling where the Editor shows

The next step is to tell us what URLs the HelpHero Editor should appear on. This can be done from the settings page or from the Chrome extension

Please note this is independent to where the HelpHero tours and checklists will be displayed. The tours and checklists will show on any website where the scripts are installed.

Toggle the Editor

To toggle the Editor on visit a page on your website where the HelpHero scripts are installed and add ?helphero_editor=true to the end of the URL in the browser address bar and then hit enter.

To toggle the Editor off visit a page on your website where the HelpHero scripts are installed and add ?helphero_editor=false to the end of the URL in the browser address bar and then hit enter.

In some scenarios where you do not have access to change the URL, for example if the scripts are installed on a nested iframe (ie Shopify App). you will need to use this alternative method to toggle the Editor.
Alternative Editor toggle
  1. Open the Chrome console
  2. If your HelpHero scripts are installed on an nested iframe you may need to switch the console context to that iframe see Chrome console docs for more info.
  3. Then copy and paste the following code:
    localStorage.setItem('__HLP_EDITOR__', 'true')
    into your console and then hit the Enter key to execute it.
  4. Refresh the page the HelpHero Editor should now be visible.

Troubleshooting

Is the HelpHero Editor not appearing for you? In certain scenarios you may need to adjust your website or browser settings.

Content security policy (CSP)

CSP is a security feature that can be enabled on your website by your development team, it specifies what resources such as scripts, images, stylesheets can run on your website. If this is enabled it can block the HelpHero Editor from appearing. If this is the case you will need to ask your development team to include HelpHero in your websites CSP. Please add https://app.helphero.co and https://helphero.co to the default-src or to both script-src and frame-src.

We utilize cookies to check that you are authorized to use the HelpHero Editor. Depending on your browser settings these cookies may be blocked which will prevent the HelpHero Editor from appearing. To modify these settings in Chrome open Settings > Cookies then choose "Allow all cookies". Please note these cookies are only used for authentication purposes and never for tracking.