Docs

Angular Integration Guide

Add Heyo live chat to your Angular application with full TypeScript support and RxJS compatibility.

This guide shows you how to add Heyo to your Angular application. Works with all Angular versions including the latest releases.

Installation

Method 1: JavaScript SDK (Recommended)

Install the SDK for full TypeScript support:

npm install @heyo.so/js

Then initialize it in your app.component.ts:

import { Component, OnInit } from '@angular/core';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'my-app';

  ngOnInit() {
    HEYO.init({ projectId: 'YOUR_PROJECT_ID' });
  }
}

Method 2: Script Tag in Component

Load the script dynamically in your app.component.ts:

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.src = 'https://heyo.so/embed/script';
    script.defer = true;
    script.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    this.renderer.appendChild(this.document.head, script);
  }
}

TypeScript Support

The Heyo SDK includes full TypeScript definitions. Add type declarations if needed:

declare global {
  interface Window {
    HEYO: {
      init: (config: { projectId: string; user?: any }) => void;
      show: () => void;
      hide: () => void;
      toggle: () => void;
    };
  }
}

export {};

Advanced Usage

Create a Service

Create services/chat.service.ts:

import { Injectable } from '@angular/core';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  constructor() {
    HEYO.init({ projectId: 'YOUR_PROJECT_ID' });
  }

  show() {
    HEYO.show();
  }

  hide() {
    HEYO.hide();
  }

  toggle() {
    HEYO.toggle();
  }

  setUser(user: { name: string; email: string }) {
    HEYO.init({
      projectId: 'YOUR_PROJECT_ID',
      user
    });
  }
}

Usage in a component:

import { Component } from '@angular/core';
import { ChatService } from './services/chat.service';

@Component({
  selector: 'app-support',
  template: '<button (click)="openChat()">Need Help?</button>'
})
export class SupportComponent {
  constructor(private chatService: ChatService) {}

  openChat() {
    this.chatService.show();
  }
}

RxJS Integration

Use RxJS for reactive chat control:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  private chatVisible$ = new BehaviorSubject<boolean>(false);

  constructor() {
    HEYO.init({ projectId: 'YOUR_PROJECT_ID' });
  }

  get isChatVisible$() {
    return this.chatVisible$.asObservable();
  }

  toggle() {
    const newState = !this.chatVisible$.value;
    if (newState) {
      HEYO.show();
    } else {
      HEYO.hide();
    }
    this.chatVisible$.next(newState);
  }
}

Pass User Data from Auth Service

import { Component, OnInit } from '@angular/core';
import { AuthService } from './services/auth.service';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.user$.subscribe(user => {
      if (user) {
        HEYO.init({
          projectId: 'YOUR_PROJECT_ID',
          user: {
            name: user.name,
            email: user.email
          }
        });
      }
    });
  }
}

Route-Based Control

Show/hide chat based on current route:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        // Hide on checkout page
        if (event.url.includes('/checkout')) {
          window.HEYO?.hide();
        } else {
          window.HEYO?.show();
        }
      });
  }
}

Angular Universal (SSR)

For server-side rendering, ensure Heyo loads only on the client:

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      HEYO.init({ projectId: 'YOUR_PROJECT_ID' });
    }
  }
}

Best Practices

Initialize Heyo in AppComponent for site-wide availability
Use services for reusable chat functionality
Leverage RxJS for reactive state management
Check for platform browser before loading in Universal apps
Use TypeScript types for better developer experience

Troubleshooting

Widget not appearing

Ensure you're initializing after the component loads (in ngOnInit)
Check that Project ID is correct
Verify no errors in browser console

TypeScript errors

Install @heyo.so/js for proper type definitions
Add global type declarations if using script method

Multiple instances

Only initialize Heyo once in your app (preferably in AppComponent)
Don't call init() in multiple components

Next Steps

Platform list

Installation and integration guides tailored for your favorite platforms and frameworks.

Blogger Integration Guide

Add Heyo live chat to your Blogger blog. Connect with readers and build community.