Angular Installation

Install the nuhello chatbot on your Angular application.

Method 1: Edit index.html (Recommended)

The simplest way to add nuhello to your Angular app:

Step 1: Open index.html

Open src/index.html in your project.

Step 2: Add the Script

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <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>
  <app-root></app-root>
</body>
</html>

Step 3: Build and Deploy

ng build

Method 2: Using a Service

Create a service for more control over the widget:

Step 1: Create the Service

Create src/app/services/nuhello.service.ts:

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
 
declare global {
  interface Window {
    nuhelloSettings: {
      key: string;
      botId: string;
      userId?: string;
      name?: string;
      email?: string;
    };
    openNuhelloWidget: () => void;
  }
}
 
@Injectable({
  providedIn: 'root'
})
export class NuhelloService {
  private loaded = false;
 
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
 
  init(options?: { userId?: string; name?: string; email?: string }) {
    if (!isPlatformBrowser(this.platformId) || this.loaded) {
      return;
    }
 
    window.nuhelloSettings = {
      key: 'YOUR_PIXEL_KEY',
      botId: 'YOUR_BOT_ID',
      ...options
    };
 
    const script = document.createElement('script');
    script.src = 'https://cdn.nuhello.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
 
    this.loaded = true;
  }
 
  openWidget() {
    if (isPlatformBrowser(this.platformId) && window.openNuhelloWidget) {
      window.openNuhelloWidget();
    }
  }
}

Step 2: Initialize in App Component

In src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { NuhelloService } from './services/nuhello.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private nuhelloService: NuhelloService) {}
 
  ngOnInit() {
    this.nuhelloService.init();
  }
}

Method 3: Using APP_INITIALIZER

Load nuhello during app initialization:

Step 1: Create Initializer

Create src/app/initializers/nuhello.initializer.ts:

import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
 
export function initializeNuhello() {
  return () => {
    const platformId = inject(PLATFORM_ID);
 
    if (!isPlatformBrowser(platformId)) {
      return;
    }
 
    (window as any).nuhelloSettings = {
      key: 'YOUR_PIXEL_KEY',
      botId: 'YOUR_BOT_ID'
    };
 
    const script = document.createElement('script');
    script.src = 'https://cdn.nuhello.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
  };
}

Step 2: Register in app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { initializeNuhello } from './initializers/nuhello.initializer';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeNuhello,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Passing User Data

Update the service to accept user data:

// In your auth service or component
import { NuhelloService } from './services/nuhello.service';
 
constructor(private nuhelloService: NuhelloService) {}
 
onUserLogin(user: { id: string; name: string; email: string }) {
  this.nuhelloService.init({
    userId: user.id,
    name: user.name,
    email: user.email
  });
}

Opening the Widget

Create a button component:

import { Component } from '@angular/core';
import { NuhelloService } from '../services/nuhello.service';
 
@Component({
  selector: 'app-chat-button',
  template: `<button (click)="openChat()">Chat with us</button>`
})
export class ChatButtonComponent {
  constructor(private nuhelloService: NuhelloService) {}
 
  openChat() {
    this.nuhelloService.openWidget();
  }
}

Angular Universal (SSR)

For server-side rendering, make sure to check for browser platform:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';
 
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
 
ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    // Initialize nuhello here
  }
}

Troubleshooting

Widget not showing?

Check browser console for errors
Verify the script is loaded (Network tab in DevTools)
Ensure you're running in the browser, not SSR

Build errors?

Add type declarations for the window object
Use isPlatformBrowser for SSR compatibility

Vue.js / Nuxt.js Shopify