How to Install HelperHat

1. Make sure your Google Tag Manager container is installed on every page where HelperHat should appear.
2. Add the HelperHat Live Chat template to your GTM workspace.
3. Create a HelperHat tag, paste your business ID, and use the All Pages trigger.
4. Preview the container, confirm HelperHat appears, and publish.

Read the full Google Tag Manager install guide for the Gallery flow and manual import fallback.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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

4. Replace HELPERHAT_INSTALLATION_CODE with the code you copied.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.