Chatbot_sample NPM

Chatbot api.ai

Angular Chatbot

Description

Angular Chatbot is compatible with Angular2 and Angular4 versions.

Installation

To install this component to an external project, follow the procedure:

npm install chatbot_sample --save
Add ChatbotComponent and ChatbotService import to your @NgModule like example below

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { MyTestApp } from './my-test-app';
    import {ChatbotComponent, ChatbotService} from 'chatbot_sample';

    @NgModule({
        imports:      [ BrowserModule, ChatbotComponent ],
        declarations: [ MyTestApp ],
        bootstrap:    [ MyTestApp ],
        providers: [ChatbotService],
    })
    export class MyTestAppModule {}

Usage

First get the access token for the agent by clicking the gear icon settings next to the agent name.

import { ChatbotService, MyOptions } from 'chatbot_sample';
// other imports here...

export class MyTestApp {
    opts: MyOptions = {
        openIconUrl: "imageUrl",
        closeIconUrl: "imageUrl",
        sendIconURL: "imageUrl",
        textBoxPlaceholderText: "Hi there! Type here to chat with me",
    };

    constructor(private chatbotService: ChatbotService) {
        // Set Access Token of your project from api.ai 
        chatbotService.setAccessToken('setToken');
    }
}

Add the following snippet inside your template: You can set one variable to show or hide chatbot where ever you want through out the application. It can be Global variable or you can use shared service to set the variable

<chat-bot [options]="opts" *ngIf="sharedService.showHelpOption"></chat-bot>

Attributes

options attribute

Value of the options attribute is a type of MyOptions. It can contain the following properties.

Option	Default	Type	Description
openIconUrl	Default Image	string	Set Image for open chat
closeIconUrl	Default Image	string	Set Image for close chat
sendImageURL	Default Image	string	Set Image for send Icon
textBoxPlaceholderText	Hi there! Type here	string	Place holder text for text box

Example of the options data:

  opts: MyOptions = {
    openIconUrl: "imageUrl",
    closeIconUrl: "imageUrl",
    sendIconURL: "imageUrl",
    textBoxPlaceholderText: "Hi there! Type here to chat with me",
  };

Change styles of the component

The styles of the component can be changed by using ":host /deep/" in your css file.

Ex: If you want to override userText background color:

    :host /deep/ .userText {
        background-color: green;
    }

Use only Service

If you want to design your own chatbox, you can use service also to get the response for the user query

    this.chatbotService.getResponse("user query text").subscribe(data => {
      console.log(data); // data.result.fulfillment.speech -- response from bot
    });