Webflow Installation

Install the nuhello chatbot on your Webflow website.

Method 1: Project Settings (Recommended)

Step 1: Open Project Settings

Log in to your Webflow dashboard
Select your project
Click the gear icon (Project Settings) in the left panel

Step 2: Add Custom Code

Go to the Custom Code tab
In the Head Code 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>

Click Save Changes

Step 3: Publish

Click Publish to deploy your changes to your live site.

Method 2: Page-Specific Installation

To add the widget to specific pages only:

Step 1: Open the Designer

Open your project in the Webflow Designer
Select the page you want to add the chatbot to

Step 2: Open Page Settings

Click the gear icon next to the page name (or press Cmd/Ctrl + Shift + O)
Scroll to Custom Code

Step 3: Add the Script

In the Inside <head> tag section, paste:

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

Click Save and then Publish

Adding a Chat Button

Create a button that opens the chatbot:

Step 1: Add a Button

In the Designer, add a Button or Link Block element
Style it as desired

Step 2: Add Custom Attributes

Select the button
In the Settings panel (right side), scroll to Custom Attributes
Add: onclick = window.openNuhelloWidget()

Or use the Embed element:

<button onclick="window.openNuhelloWidget()" style="
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
">
  Chat with us
</button>

Using with Webflow Memberships

For sites with Webflow Memberships, pass user data:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  // Check for logged-in member
  if (window.Webflow && window.Webflow.env('member')) {
    const member = window.Webflow.env('member');
    window.nuhelloSettings.userId = member.id;
    window.nuhelloSettings.email = member.email;
    window.nuhelloSettings.name = member.name;
  }
 
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Conditional Display

Show the widget only on certain pages using custom code:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  // Only load on specific paths
  const allowedPaths = ['/contact', '/support', '/pricing'];
  const currentPath = window.location.pathname;
 
  if (allowedPaths.some(path => currentPath.includes(path))) {
    (function() {
      var s = document.createElement('script');
      s.src = 'https://cdn.nuhello.com/widget.js';
      s.async = true;
      document.head.appendChild(s);
    })();
  }
</script>

Interactions with Webflow Animations

Trigger the chat widget with Webflow interactions:

Create a trigger element
Add an ID to it (e.g., open-chat-trigger)
In Project Settings Custom Code (Footer), add:

<script>
  document.getElementById('open-chat-trigger').addEventListener('click', function() {
    if (window.openNuhelloWidget) {
      window.openNuhelloWidget();
    }
  });
</script>

Troubleshooting

Widget not appearing on staging?

Custom code only works on published sites. Test on your .webflow.io domain or custom domain.

Widget not appearing after publish?

Clear browser cache
Check the page source to verify the script is present
Open browser console (F12) and check for errors

Conflicts with other scripts?

Move the nuhello script to the Footer Code section and add it at the end of the body.

Wix Squarespace