Installation Guides
Squarespace

Squarespace Installation

Install the nuhello chatbot on your Squarespace website.

Step 1: Access Code Injection

  1. Log in to your Squarespace account
  2. Go to your site's dashboard
  3. Navigate to Settings → Advanced → Code Injection

Step 2: Add the Script

In the Header section, paste your nuhello script:

<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>

Step 3: Save

Click Save at the top of the page.

The chatbot widget will now appear on all pages of your site.

Page-Specific Installation

To add the widget to specific pages only:

Step 1: Open Page Settings

  1. Go to Pages in your Squarespace dashboard
  2. Hover over the page you want to edit
  3. Click the gear icon (Settings)

Step 2: Add Custom Code

  1. Scroll down to Advanced
  2. In Page Header Code Injection, paste the nuhello script
  3. Click Save

Adding a Chat Button

Create a button that opens the chatbot:

Method 1: Using a Button Block

  1. Add a Button block to your page
  2. Set the button link to javascript:void(0)
  3. Add a unique ID using custom CSS (see below)

Method 2: Using Code Block

Add a Code Block to your page:

<button onclick="window.openNuhelloWidget()" style="
  background-color: #000;
  color: #fff;
  padding: 16px 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
">
  Chat with us
</button>

Using with Squarespace Member Areas

For sites with Member Areas, pass user data:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  // Check if user is logged in
  // Note: Squarespace doesn't expose member data in JavaScript by default
  // You may need to use server-side code or store data in localStorage after login
 
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Styling the Widget to Match Your Site

You can pass custom styling options:

<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>

Customize colors and positioning in your nuhello dashboard to match your Squarespace template.

Show on Specific Pages Only

Use JavaScript to conditionally load the widget:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  // Only show on contact and FAQ pages
  var showOnPages = ['/contact', '/faq', '/help'];
  var currentPath = window.location.pathname;
 
  if (showOnPages.some(function(page) { return currentPath.indexOf(page) !== -1; })) {
    (function() {
      var s = document.createElement('script');
      s.src = 'https://cdn.nuhello.com/widget.js';
      s.async = true;
      document.head.appendChild(s);
    })();
  }
</script>

Hide on Specific Pages

Alternatively, hide on checkout or certain pages:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  // Don't show on checkout
  var hideOnPages = ['/checkout', '/cart'];
  var currentPath = window.location.pathname;
 
  if (!hideOnPages.some(function(page) { return currentPath.indexOf(page) !== -1; })) {
    (function() {
      var s = document.createElement('script');
      s.src = 'https://cdn.nuhello.com/widget.js';
      s.async = true;
      document.head.appendChild(s);
    })();
  }
</script>

Troubleshooting

Widget not appearing?

  1. Make sure Code Injection is available on your Squarespace plan (Business or higher)
  2. Clear your browser cache
  3. Check the page source to verify the script is present
  4. Try viewing in incognito mode

Code Injection not available?

Code Injection requires a Business or Commerce plan. Consider upgrading or contact Squarespace support.

Script causing layout issues?

Move the script to the Footer Code Injection section instead of Header.

Widget appearing over navigation?

Adjust the z-index in your site's Custom CSS:

.nuhello-widget {
  z-index: 999 !important;
}

Add this in Design → Custom CSS.

WebflowHTML / Static Sites