Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @progress-nativechat/nativescript-nativechat with all npm packages installed. Try it out:

var nativescriptNativechat = require("@progress-nativechat/nativescript-nativechat")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@progress-nativechat/nativescript-nativechat v3.0.0

NativeChat plugin for NativeScript

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

PropertyTypeDescription
botBotrequiredConfiguration for the bot to connect to.
channelChannelrequiredConfiguration of the channel to connect to.
userUseroptionalInformation about the user.
sessionSessionoptionalInformation about the user session.
googleApiKeystringoptionalThis is an API key from the Google Cloud Platform used to display location picker inside the webchat.
localestringoptionalSpecify the major locale of the widget. Currently supported major locales: ‘en’, ‘ar’, ‘pt’, ‘de’, ‘es’, ‘fi’, ‘bg’, ‘it’.
placeholderstringoptionalThe placeholder text shown in message edit box.
submitLocationTextstringoptionalThe submit button text used in location picker that can be popped from send message area of widget.
defaultLocationLocationoptionalDefault location to center the location picker to in case the user declines the prompt to allow geolocation.
cssstring[]optionalAn array with urls with CSS file defining a custom theme. You can create a theme with Kendo Theme Builder.

Bot

PropertyTypeDescription
idstringrequiredThe id of your chatbot.
namestringoptionalName with that each bot message will be labelled in the chat.
avatarUrlstringoptionalUrl of the avatar of the bot.

Channel

PropertyTypeDescription
idstringrequiredThe channel id to connect to.
tokenstringrequiredAn unique token required to connect to the channel.

User

PropertyTypeDescription
idstringoptionalThe id of the user enables persistent conversations. A valid id value can be any combination of letters, numbers, hyphens, or underscores.
namestringoptionalThe name of the user. This should be a combination of the first and last name, e.g. John Smith.
avatarUrlstringoptionalUrl of the avatar of the user.

Session

PropertyTypeDescription
clearbooleanoptionalIf true, the bot will start new conversation with the user.
contextobjectoptionalA 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.
userMessagestringoptionalUsed to send a message on the user's behalf if the session is cleared.

Location

PropertyTypeDescription
latitudebooleanrequiredThe latitude to center location picker to.
longitudeobjectrequiredThe longitude to center location picker to.

License

Apache License Version 2.0, January 2004

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free