@progress-nativechat/nativescript-nativechat
Advanced tools
: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:
<body> tag of the new HTML file<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
FAQs
NativeChat plugin for NativeScript
We found that @progress-nativechat/nativescript-nativechat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.