How To Install HelperHat

Installing HelperHat on your website is quick and easy. Follow the steps below to start providing simplified customer support with HelperHat.

Copy the HelperHat Installation Code

To begin you'll need your unique HelperHat installation code which is provided during the HelperHat onboarding steps. It should look something like this:

If you've already signed up successfully, then follow these instructions to get your installation code:

1. Log in to your HelperHat account.
2. Go to the Settings page on HelperHat.
3. Copy the installation code provided. It should look something like this:

Install HelperHat to Your Website

Once you have the code, add it to your website's HTML. Here's how:

1. Access your website's HTML files. Depending on how your site is built, you might need to log into your content management system (CMS) or use an FTP client to access your files directly.
2. Locate the closing </body> tag in the HTML of each page where you want to enable HelperHat. This is usually found near the bottom of your HTML files.
3. Paste the HelperHat installation code directly before the closing </body> tag.
4. Save and upload your changes. If you're using a CMS, simply save your updates. If you're editing files directly, be sure to upload the modified files back to your server.

Install HelperHat on a WordPress Website

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your WordPress account.
3. Go to Appearance > Theme Editor and add the installation code just before the closing </body> tag of the footer.php file.
4. Paste in the installation code and select Update File.

Note: If your website is hosted on WordPress.com, you cannot add the HelperHat installation code to your website unless you are on their Business plan. The other plans (e.g. Premium, Personal) do not allow users to add JavaScript code.

Install HelperHat on a Shopify Page

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your Shopify admin dashboard.
3. In the left sidebar menu, navigate to Online Store > Themes.
4. Click the Actions dropdown menu and select Edit code.
5. Select the theme.liquid file for your theme.
6. Paste your HelperHat installation code just before the </body> tag in this file.
7. In the upper right, click Save.

Install HelperHat on a WooCommerce Website

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your WordPress dashboard and navigate to Appearance > Theme Editor.
3. Open the footer.php file of your theme and paste the code just before the closing </body> tag.
4. Click Update File to save your changes.

Note: Ensure you test the installation on your WooCommerce checkout and product pages to confirm it doesn't interfere with the user experience.

Install HelperHat on a Wix Website

Use the App Market in Wix to add an HTML widget to your page:

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Go to Settings in your site's dashboard.
3. Click the Custom Code tab in the Advanced section.
4. Click + Add Custom Code at the top right.
5. Paste the installation code in the text box.
6. Set the Name of the new tool to HelperHat Installation Code.
7. Under Add Code to Pages, click the radio button for All pages and use the dropdown menu to select Load code on each new page.
8. Under Place Code in the section, click the radio button for Body - end option.
9. Click Apply to save your changes.

Install HelperHat on a Squarespace Website

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your Squarespace account.
3. In the left sidebar menu, navigate to Settings.
4. In the Website section of the menu, navigate to Advanced, then select Code Injection.
5. Paste the installation code into the Header field.
6. In the upper left, click Save.

Install HelperHat on a Drupal Website

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your Drupal admin dashboard.
3. In the main navigation menu, navigate to Structure.
4. Click Blocks.
5. Click + Add Block.
6. Enter the fields for your new block. Paste the installation code in the Block body field and then click Save block.

Install HelperHat on a Joomla Website

There are two ways to add your HelperHat tracking code to your Joomla site. With either method, follow the steps above to copy the HelperHat installation code from your HelperHat account settings first.

1. You can select an extension from the Joomla Extension Directory where you can paste in the HelperHat installation code. Alternatively, you can follow the steps below to install the installation code:
2. Log in to your Joomla account as an administrator.
3. In the main navigation menu, navigate to Extensions > Templates > Templates.
4. Click the name of your template and select index.php in the left sidebar menu.
5. Paste the HelperHat installation code directly above the </body> tag.
6. Click Save.

Install HelperHat on a BigCommerce Website

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your BigCommerce admin dashboard.
3. Navigate to Storefront > Script Manager.
4. Click Create a Script and select the following options:
• Location on page: Footer
• Pages where script will be added: All pages
5. Paste the HelperHat installation code into the script content box.
6. Click Save to add the code to your BigCommerce store.

Install HelperHat on a Magento Website

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Log in to your Magento admin dashboard.
3. Navigate to Content > Design > Configuration.
4. In the list of available themes, click Edit on the theme you are currently using.
5. Scroll down to the Other Settings section and click on HTML Head.
6. Locate the Scripts and Style Sheets field.
7. Paste your HelperHat installation code into this field.
8. Scroll to the top of the page and click Save Configuration.
9. Clear the cache by navigating to System > Cache Management and clicking Flush Cache Storage.

Note: It is important to clear your Magento cache after making these changes to ensure the HelperHat code is correctly loaded on your site.

Install HelperHat on a Next.js App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Next.js project and navigate to the _app.js or _document.js file.
3. Import useEffect from React (if using _app.js).
4. Use the following code in the _app.js file:

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
    useEffect(() => {
        document.body.insertAdjacentHTML('beforeend', `HELPERHAT_INSTALLATION_CODE`);
    }, []);

    return <Component {...pageProps} />;
}

export default MyApp;

5. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on a GatsbyJS App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Gatsby project and navigate to the gatsby-browser.js file.
3. Add the following code using React's useEffect:

import { useEffect } from 'react';

export const onClientEntry = () => {
    useEffect(() => {
        document.body.insertAdjacentHTML('beforeend', `HELPERHAT_INSTALLATION_CODE`);
    }, []);
};

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on a React App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your React project and navigate to the main component (e.g., App.js).
3. Import useEffect from React.
4. Add the following code inside your component:

useEffect(() => {
    document.body.insertAdjacentHTML(
        'beforeend',
        `HELPERHAT_INSTALLATION_CODE`
    );
}, []);

5. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on an Angular App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Angular project and navigate to your main component (e.g., app.component.ts).
3. In the ngOnInit method, add the following code:

ngOnInit() { 
    document.body.insertAdjacentHTML('beforeend', `HELPERHAT_INSTALLATION_CODE`); 
}

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on a Vue.js App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Vue.js project and navigate to your main component (e.g., App.vue).
3. In the mounted lifecycle hook, add the following code:

mounted() {
    document.body.insertAdjacentHTML('beforeend', `HELPERHAT_INSTALLATION_CODE`);
}

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on a Svelte or Sapper App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Svelte project and navigate to your main component file (e.g., App.svelte).
3. Use the onMount lifecycle function to add the code:

import { onMount } from 'svelte';

onMount(() => {
    document.body.insertAdjacentHTML('beforeend', `HELPERHAT_INSTALLATION_CODE`);
});

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on a Flutter Web App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Flutter Web project and navigate to the web/index.html file.
3. Paste the HelperHat installation code before the closing </body> tag.

Install HelperHat on a Django App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Django project and navigate to your base HTML template (e.g., base.html).
3. Paste the HelperHat installation code before the closing </body> tag.

Install HelperHat on a Flask App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Flask project and navigate to your base HTML template (e.g., base.html).
3. Paste the HelperHat installation code before the closing </body> tag.

Install HelperHat on a Laravel App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Laravel project and navigate to your main Blade template (e.g., layouts/app.blade.php).
3. Paste the HelperHat installation code before the closing </body> tag:

   {!! HELPERHAT_INSTALLATION_CODE !!}

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on a Ruby on Rails App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Rails project and navigate to your main layout file (e.g., application.html.erb).
3. Paste the HelperHat installation code before the closing </body> tag:

   <%= raw HELPERHAT_INSTALLATION_CODE %>

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on an ASP.NET Core App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your ASP.NET Core project and navigate to your main layout file (e.g., _Layout.cshtml).
3. Paste the HelperHat installation code before the closing </body> tag:

   @Html.Raw("HELPERHAT_INSTALLATION_CODE")

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Install HelperHat on an Express.js App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Express.js project and navigate to your static HTML file (e.g., index.html).
3. Paste the HelperHat installation code before the closing </body> tag.

Install HelperHat on a Spring Boot App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Spring Boot project and navigate to your main HTML template (e.g., index.html).
3. Paste the HelperHat installation code before the closing </body> tag.

Install HelperHat on an Electron App

1. Follow the steps above to copy the HelperHat installation code from your HelperHat account settings.
2. Open your Electron project and navigate to your main process file (e.g., main.js).
3. Use the following code to add the installation code in the renderer process:

const { BrowserWindow } = require('electron');

// Create a new BrowserWindow and load your HTML
let mainWindow = new BrowserWindow({ ...options });
mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.executeJavaScript(
        `document.body.insertAdjacentHTML('beforeend', \`HELPERHAT_INSTALLATION_CODE\`);`
    );
});

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

Verify Installation

To make sure HelperHat is correctly installed, follow these steps:

1. Clear your browser cache to ensure you see the most up-to-date version of your website.
2. Visit your website and navigate to a page where you added the HelperHat code.
3. Look for the HelperHat widget to appear, usually at the bottom corner of your webpage.

If you see the HelperHat widget, congratulations! You've successfully installed HelperHat.

Troubleshooting

If the HelperHat widget does not appear:

• Double-check the code: Make sure you copied the entire HelperHat installation code without any changes.
• Verify the placement: Ensure the code is placed directly before the </body> tag.
• Check your browser's console for errors: Sometimes JavaScript errors can prevent the widget from loading.

If you continue to experience issues, please contact us at [email protected] for assistance.

Need Help?

If you're not familiar with editing HTML or don't have access to your website's code, you can send the installation instructions to your webmaster. Click the “Email Instructions to Webmaster” button from your onboarding page to email your webmaster.