@progress-nativechat/nativescript-nativechatdeprecated

NativeChat plugin for NativeScript

Usage no npm install needed!

<script type="module">
  import progressNativechatNativescriptNativechat from 'https://cdn.skypack.dev/@progress-nativechat/nativescript-nativechat';
</script>

README

NativeChat plugin for NativeScript

:no_entry: @progress-nativechat/nativescript-nativechat is now deprecated.

You can still use the NativeChat Web widget inside your NativeScript app by following these instructions:

  1. Publish your NativeChat bot for web
  2. Copy the snippet for the desired configuration
  3. In your NativeScript app create a new HTML file
  4. Paste the NativeChat installation snippet inside the <body> tag of the new HTML file
  5. In a page in your NativeScript app add a WebView component with src path to the HTML file with the NativeChat installation snippet. e.g.:
<WebView src="~/home/chat.html"></WebView>

Obsolete Instructions

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