Installation Guides
HTML / Static Sites

HTML / Static Site Installation

Install the nuhello chatbot on any HTML website or static site.

Basic Installation

Step 1: Open Your HTML File

Open the HTML file where you want to add the chatbot (typically index.html).

Step 2: Add the Script

Paste the nuhello script before the closing </head> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
 
  <!-- nuhello Chatbot -->
  <script>
    window.nuhelloSettings = {
      key: "YOUR_PIXEL_KEY",
      botId: "YOUR_BOT_ID"
    };
    (function() {
      var s = document.createElement('script');
      s.src = 'https://cdn.nuhello.com/widget.js';
      s.async = true;
      document.head.appendChild(s);
    })();
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

Step 3: Save and Upload

Save the file and upload it to your web server.

Multiple Pages

If your site has multiple HTML files, you have several options:

Option 1: Add to Each Page

Copy the script to each HTML file's <head> section.

Option 2: Use JavaScript Include

Create a separate file nuhello.js:

window.nuhelloSettings = {
  key: "YOUR_PIXEL_KEY",
  botId: "YOUR_BOT_ID"
};
(function() {
  var s = document.createElement('script');
  s.src = 'https://cdn.nuhello.com/widget.js';
  s.async = true;
  document.head.appendChild(s);
})();

Then include it in each page:

<script src="nuhello.js"></script>

Option 3: Server-Side Includes

If your server supports SSI:

<!--#include virtual="/includes/nuhello.html" -->

Adding a Chat Button

Create a button that opens the widget:

<button onclick="window.openNuhelloWidget()" class="chat-btn">
  💬 Chat with us
</button>
 
<style>
  .chat-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }
 
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  }
</style>

Identifying Users

Pass user data when available:

<script>
  // Get user data from your system
  var userData = {
    userId: "user123",
    name: "John Doe",
    email: "john@example.com"
  };
 
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID",
    ...userData
  };
 
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Iframe Embed

For an inline chat experience instead of a floating widget:

<div class="chat-container">
  <iframe
    src="https://embed.nuhello.com?botId=YOUR_BOT_ID"
    width="100%"
    height="600"
    frameborder="0"
    allow="microphone"
  ></iframe>
</div>
 
<style>
  .chat-container {
    max-width: 400px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  }
</style>

Load After Page Load

To improve page performance, load the widget after the page loads:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  window.addEventListener('load', function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  });
</script>

Conditional Loading

Load the widget based on conditions:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  // Only load during business hours
  var hour = new Date().getHours();
  var isBusinessHours = hour >= 9 && hour < 17;
 
  // Only load on desktop
  var isDesktop = window.innerWidth > 768;
 
  if (isBusinessHours || isDesktop) {
    (function() {
      var s = document.createElement('script');
      s.src = 'https://cdn.nuhello.com/widget.js';
      s.async = true;
      document.head.appendChild(s);
    })();
  }
</script>

Static Site Generators

Jekyll

Add to _includes/head.html:

<script>
  window.nuhelloSettings = {
    key: "{{ site.nuhello_key }}",
    botId: "{{ site.nuhello_bot_id }}"
  };
  // ... rest of script
</script>

Hugo

Add to layouts/partials/head.html:

<script>
  window.nuhelloSettings = {
    key: "{{ .Site.Params.nuhelloKey }}",
    botId: "{{ .Site.Params.nuhelloBotId }}"
  };
  // ... rest of script
</script>

Eleventy

Add to your base layout:

<script>
  window.nuhelloSettings = {
    key: "{{ nuhelloKey }}",
    botId: "{{ nuhelloBotId }}"
  };
  // ... rest of script
</script>

Troubleshooting

Widget not appearing?

  1. Check browser console for errors (F12 → Console)
  2. Verify the script is in the <head> section
  3. Make sure you're viewing the file through a web server (http://), not directly (file://)

CORS errors?

If testing locally, use a local development server:

# Python
python -m http.server 8000
 
# Node.js
npx serve

Script blocked?

Check if your browser or ad blocker is blocking the script.

SquarespaceGoogle Tag Manager