ngx-rumbletalk
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.3 • Public • Published

    NgxRumbletalk

    An angular library for Rumbletalk group chats. Your platform for creating engaging messaging service for online events, web-site, platform ,or app.

    RumbleTalk Chat

    Features

    • Angular compatibility
    • CSS Customization
    • Polls
    • create multiple rooms
    • Video and audio calls
    • Approve message mode (Q&A)
    • Backend agnostic
    • voice and audio messages
    • Images, videos, files & emojis
    • Private messages
    • Text formatting - bold, italic, strikethrough, underline
    • Online / Offline users status
    • Flexible options and slots
    • Different themes
    • Floating or embed chat
    • Mute all

    Installation

    Using npm:

    npm i ngx-rumbletalk

    Setup

    Import NgxRumbletalkModule to your application's module

    import { NgxRumbletalkModule } from 'ngx-rumbletalk';
    
    @NgModule({
      ...
      imports: [ NgxRumbletalkModule ],
      ...
    })
    export class AppModule { }

    Component usage

    Use this in any of your html file where you would like to place the chat

    Basic use

    <ngx-rumbletalk [hash]="hash" [width]="700" [height]="500"></ngx-rumbletalk>

    Floating

    <ngx-rumbletalk [hash]="hash" [floating]="true" [side]="'right'" [image]="'https://d1pfint8izqszg.cloudfront.net/images/toolbar/toolbar.png'" [counter]="'14:23'">
    </ngx-rumbletalk>
    Option Type Default Description
    hash string The hash string which defines the chat to be loaded
    width number 700 if floating is true Size of the width of the chat in pixels
    height number 500 if floating is true Size of the height of the chat in pixels
    floating boolean false Displays the chat in a floating manner or else it is fixed
    side string right If floating is true, sets which side of the window will the floating chat be displayed, can only be either 'left' or 'right'
    image string default image If floating is true, sets the image used for the floating chat
    counter string 14:23 If floating is true, top:left coordinates of the counter/number of users in the chat

    Service usage

    These are the available methods you can use in the chat by importing the NgxRumbleTalkService file

    Note: Don't forget to import the service and interfaces import { LoginData, LogoutData, LogoutCbData, NgxRumbletalkService } from 'ngx-rumbletalk'; in the file you are working on and inject it in your class constructor constructor(private rumbletalkService: NgxRumbletalkService) {}

    Methods

    login(data: LoginData): Promise

    this.rumbletalkService.login(data).then(response => console.log(response)).catch(error => console.log(error));

    Use to login to your chat

    logout(data: LogoutData): void

    this.rumbletalkService.logout(data);

    Use to logout from your chat

    logoutCB(data: LogoutCbData): void

    this.rumbletalkService.logoutCB(data);

    Use to logout from your chat but with callback that you can use for whatever purpose

    openPrivateChat(data: OpenPrivateChatData): void

    this.ref.current.openPrivateChat({
        hash: hash,
        username: username,
    });

    Use to open the private chat

    Interface

    LoginData

    export interface LoginData {
      hash: string;
      username: string;
      password?: string;
      image?: string;
      forceLogin?: boolean;
    }

    LogoutData

    export interface LogoutData {
      hash: string;
      userId?: string;
      username?: string;
    }

    LogoutCbData

    export interface LogoutCbData {
      hash: string;
      callback: any;
    }

    OpenPrivateChatData

    export interface OpenPrivateChatData {
      hash: string;
      userId?: string;
      username?: string;
    }

    Install

    npm i ngx-rumbletalk

    DownloadsWeekly Downloads

    22

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    179 kB

    Total Files

    24

    Last publish

    Collaborators

    • timothy.fidelis
    • rumbletalk