uhabi-web-chat

Installation

Option 1: Using npm install (Manual)

npm install uhabi-web-chat

Then add this import at the top of main.ts:

import 'uhabi-web-chat';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch(console.error);

Option 2: Using ng add (Recommended)

ng add uhabi-web-chat

This will automatically configure your project with no manual steps needed.

Updating

When a new version is released, update with:

npm install uhabi-web-chat@latest

Usage

Step 1: Add Schema to Component

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class YourComponent {}

Step 2: Use the Tag in HTML

Static Token (String Literal)

<div style="height: 80rem">
  <uhabi-web-chat-app token="YOUR_TOKEN_HERE" style="display: block; height: 100%">
  </uhabi-web-chat-app>
</div>

Dynamic Token (Variable)

If your token comes from a variable (e.g. from an API, a service, or environment):

Component:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class YourComponent {
  token = 'YOUR_TOKEN_HERE'; // or get it from a service/API
}

Template:

<div style="height: 80rem">
  <uhabi-web-chat-app [token]="token" style="display: block; height: 100%"> </uhabi-web-chat-app>
</div>

Dynamic Token from a Service

Component:

import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class YourComponent implements OnInit {
  token = '';

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.token = this.authService.getToken();
  }
}

Template:

<div style="height: 80rem">
  <uhabi-web-chat-app [token]="token" style="display: block; height: 100%"> </uhabi-web-chat-app>
</div>