Introducing npm Teams! Private packages + team management tools.Learn more »

@progress-nativechat/nativescript-nativechat

3.0.0 • Public • Published

NativeChat plugin for NativeScript

Build Status

Prerequisites / Requirements

Follow the instructions in our documentation to enable a mobile channel for your bot.

Installation

Run the following command from the root of your project:

tns plugin add @progress-nativechat/nativescript-nativechat

Usage

JavaScript

How to add the plugin using XML and binding

<Page loaded="pageLoaded" xmlns:nativechat="@progress-nativechat/nativescript-nativechat">
    <nativechat:NativeChat config="{{ nativeChatConfig }}"/>
</Page>
exports.pageLoaded = function (args) {
    var page = args.object;
    page.bindingContext = {
        nativeChatConfig: {
            bot: {
                id: '5acddd9715e7187c15f3fc28'
            },
            channel: {
                id: 'f91f065c-4079-4fa9-8860-b893e2b81696',
                token: '0570f9a5-6c0e-4b77-b06d-20ce6d5c56d8'
            },
            user: {
                name: 'John Smith'
            },
            session: {
                clear: true,
                userMessage: 'Book a doctor',
                context: {
                    company: 'Progress Software',
                    phone: '555 555 5555'
                }
            }
        }
    }
};

How to add the plugin directly through code

var plugin = require('@progress-nativechat/nativescript-nativechat');
 
exports.pageLoaded = function (args) {
    var page = args.object;
    var nativeChat = new plugin.NativeChat();
 
    nativeChat.config = {
        bot: {
            id: '5acddd9715e7187c15f3fc28'
        },
        channel: {
            id: 'f91f065c-4079-4fa9-8860-b893e2b81696',
            token: '0570f9a5-6c0e-4b77-b06d-20ce6d5c56d8'
        },
        user: {
            name: 'John Smith'
        },
        session: {
            clear: true,
            context: {
                company: 'Progress Software',
                phone: '555 555 5555'
            }
        }
    };
 
    page.content = nativeChat;
};

TypeScript

How to add the plugin using XML and binding

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page"
    xmlns:nativechat="@progress-nativechat/nativescript-nativechat">
    <nativechat:NativeChat config="{{ nativeChatConfig }}"/>
</Page>
import { EventData, fromObject } from 'tns-core-modules/data/observable';
import { Page } from 'tns-core-modules/ui/page';
 
export function pageLoaded(args: EventData) {
    (<Page>args.object).bindingContext = fromObject({
        nativeChatConfig: {
            bot: {
                id: '5acddd9715e7187c15f3fc28'
            },
            channel: {
                id: 'f91f065c-4079-4fa9-8860-b893e2b81696',
                token: '0570f9a5-6c0e-4b77-b06d-20ce6d5c56d8'
            },
            user: {
                name: 'John Smith'
            },
            session: {
                clear: true,
                userMessage: 'Book a doctor',
                context: {
                    company: 'Progress Software',
                    phone: '555 555 5555'
                }
            }
        }
    });
}

How to add the plugin directly through code

import { EventData } from 'tns-core-modules/data/observable';
import { NativeChat } from '@progress-nativechat/nativescript-nativechat';
import { Page } from 'tns-core-modules/ui/page';
 
export function pageLoaded(args: EventData) {
    const chat = new NativeChat();
    (<Page>args.object).content = chat;
    chat.config = {
        bot: {
            id: '5acddd9715e7187c15f3fc28'
        },
        channel: {
            id: 'f91f065c-4079-4fa9-8860-b893e2b81696',
            token: '0570f9a5-6c0e-4b77-b06d-20ce6d5c56d8'
        },
        user: {
            name: 'John Smith'
        },
        session: {
            clear: true,
            userMessage: 'Book a doctor',
            context: {
                company: 'Progress Software',
                phone: '555 555 5555'
            }
        }
    };
}

Angular

Import the NativeChatModule in the app module:

import { NativeChatModule } from "@progress-nativechat/nativescript-nativechat/angular";
 
@NgModule({
    ...
    imports[
        NativeScriptModule,
        NativeChatModule
    ],
    ...
})
export class AppModule { }

Use the plugin in a component:

import { Component } from "@angular/core";
import { NativeChatConfig } from "@progress-nativechat/nativescript-nativechat";
 
@Component({
    selector: "ns-app",
    template: `
    <GridLayout class="page">
        <NativeChat [config]="nativeChatConfig" (loaded)="onLoaded()"></NativeChat>
    </GridLayout>`
})
 
export class AppComponent {
    nativeChatConfig: NativeChatConfig;
 
    onLoaded(): void {
        this.nativeChatConfig = {
            bot: {
                id: '5acddd9715e7187c15f3fc28'
            },
            channel: {
                id: 'f91f065c-4079-4fa9-8860-b893e2b81696',
                token: '0570f9a5-6c0e-4b77-b06d-20ce6d5c56d8'
            },
            user: {
                name: 'John Smith'
            },
            session: {
                clear: true,
                userMessage: 'Book a doctor',
                context: {
                    company: 'Progress Software',
                    phone: '555 555 5555'
                }
            }
        };
    }
}

API

config

The config property should conform to the NativeChatConfig interface.

NativeChatConfig

Property Type Description
bot Bot required Configuration for the bot to connect to.
channel Channel required Configuration of the channel to connect to.
user User optional Information about the user.
session Session optional Information about the user session.
googleApiKey string optional This is an API key from the Google Cloud Platform used to display location picker inside the webchat.
locale string optional Specify the major locale of the widget. Currently supported major locales: ‘en’, ‘ar’, ‘pt’, ‘de’, ‘es’, ‘fi’, ‘bg’, ‘it’.
placeholder string optional The placeholder text shown in message edit box.
submitLocationText string optional The submit button text used in location picker that can be popped from send message area of widget.
defaultLocation Location optional Default location to center the location picker to in case the user declines the prompt to allow geolocation.
css string[] optional An array with urls with CSS file defining a custom theme. You can create a theme with Kendo Theme Builder.

Bot

Property Type Description
id string required The id of your chatbot.
name string optional Name with that each bot message will be labelled in the chat.
avatarUrl string optional Url of the avatar of the bot.

Channel

Property Type Description
id string required The channel id to connect to.
token string required An unique token required to connect to the channel.

User

Property Type Description
id string optional The id of the user enables persistent conversations. A valid id value can be any combination of letters, numbers, hyphens, or underscores.
name string optional The name of the user. This should be a combination of the first and last name, e.g. John Smith.
avatarUrl string optional Url of the avatar of the user.

Session

Property Type Description
clear boolean optional If true, the bot will start new conversation with the user.
context object optional A JSON object containing entities to be merged with the conversation context. They can be used as any other entity within the cognitive flow. Be careful to not override other entities used in the cognitive flow.
userMessage string optional Used to send a message on the user's behalf if the session is cleared.

Location

Property Type Description
latitude boolean required The latitude to center location picker to.
longitude object required The longitude to center location picker to.

License

Apache License Version 2.0, January 2004

Install

npm i @progress-nativechat/nativescript-nativechat

DownloadsWeekly Downloads

296

Version

3.0.0

License

Apache-2.0

Unpacked Size

34.9 kB

Total Files

19

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar