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:

1. npm install chatbot_sample --save

2. 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
    });

License

• License: MIT

Author

• Author: Rajesh Rayudu

Keywords

• Chatbot
• Chatbot api.ai
• api.ai
• google chatbot
• google api.ai