⛔ @progress-nativechat/nativescript-nativechat is now deprecated.
You can still use the NativeChat Web widget inside your NativeScript app by following these instructions:
- Publish your NativeChat bot for web
- Copy the snippet for the desired configuration
- In your NativeScript app create a new HTML file
- Paste the NativeChat installation snippet inside the
<body>tag of the new HTML file - 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>
Follow the instructions in our documentation to enable a mobile channel for your bot.
Run the following command from the root of your project:
tns plugin add @progress-nativechat/nativescript-nativechat
<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'
}
}
}
}
};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;
};<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'
}
}
}
});
}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'
}
}
};
}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'
}
}
};
}
}The config property should conform to the NativeChatConfig interface.
| 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. |
| 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. |
| Property | Type | Description | |
|---|---|---|---|
| id | string | required | The channel id to connect to. |
| token | string | required | An unique token required to connect to the channel. |
| 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. |
| 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. |
| Property | Type | Description | |
|---|---|---|---|
| latitude | boolean | required | The latitude to center location picker to. |
| longitude | object | required | The longitude to center location picker to. |
Apache License Version 2.0, January 2004