ngx-form-chat v0.0.5

ngx-form-chat

Transform your forms as a chatbot. ngx-form-chat allows you to customize everything with you chatbot. Now you no more need a long form which can be complex and bored.

This module is actually avalaibled only in Angular.

See example with all configurations on https://ngx-form-chat.web.app

Install

Using NPM

npm install --save ngx-form-chat

Using Yarn

yarn add ngx-form-chat

Usage

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxFormChatModule } from 'ngx-form-chat';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxFormChatModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ngx-form-chat [data]="chatbotData" [config]="config" (onEndChat)="handleResult($event)"></ngx-form-chat>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-form-chat-demo';

  config: any = {
    configuration: {
        compagny: {
            logo: "assets/images/FDT-logo.png",
            name: "Default Company",
            logoWidth: "230px"
        },
        background: "#eee",
        fontSize: "16px",
        chatpanel: {
            autoopen: false,
            restartChatWhenOpen: false,
            useSession: false,
            buttonColor: "#FFA800",
            position: {
                width: "500px",
                bottom: "65px",
                height: "70vh"
            }
        },
        userInput: {
            placeholder: "Your answer here",
            buttoncolor: "#0c2d62",
            color: "#ffffff"
        }
    },
    chatbot: {
        name: "Fatima",
        icon: "assets/images/fatima.png",
        background: "#0c2d62",
        color: "#ffffff"
    },
    user: {
        name: "You",
        icon: "assets/images/user.png",
        background: "#FFA800",
        color: "#ffffff"
    }
  }

  chatbotData: any = {
    questions: [
        {
            code: "firstname",
            type: "text",
            next: "lastname",
            messageTexts: [
                "Hello, <br>my name is Fatima and I <strong>welcome you to ngx-form-chat .</strong>",
                "I am the artificial intelligence (AI) of ngx-form-chat in charge of transmitting your request to the loan of ngx-form-chat in few seconds ⏱.",
                "To begin with, what is your ? <strong>first name</strong> please ?"
            ],
            validator: {
              type: "text",
              messages: [
                "Please enter your first name with minimum 3 characters",
                "Numbers are not allowed"
              ],
              min: 3,
              max: Infinity,
              regExp: /^[a-zA-Z ]{3,}$/
            }
        },
        {
            code: "lastname",
            type: "text",
            next: "email",
            messageTexts: [
                "Well done <strong>FIRSTNAME !</strong>",
                "Now, can you tell me your  <strong> last name</strong> please ?",
                "Please mention it below."
            ],
            variables: [
                {
                    cle: "FIRSTNAME",
                    referenceCode: "firstname"
                }
            ],
            validator: {
              type: "text",
              messages: [
                "Please enter your last name with minimum 2 characters",
                "Numbers are not allowed"
              ],
              min: 2,
              max: Infinity,
              regExp: /^[a-zA-Z ]{2,}$/
            }
        },
        {
            code: "email",
            type: "text",
            next: "organisation",
            messageTexts: [
                "Perfect <strong>FIRSTNAME LASTNAME !</strong>",
                "What is your Email please ?"
            ],
            variables: [
              {
                  cle: "FIRSTNAME",
                  referenceCode: "firstname"
              },
              {
                cle: "LASTNAME",
                referenceCode: "lastname"
              }
            ],
            validator: {
              type: "email",
              messages: [
                "Email address is not valid",
                "Please enter your email address as ex: example@domaine.abc"
              ]
            }
        },
        {
            code: "organisation",
            type: "option",
            messageTexts: [
                "Thank you very much, it's almost over FIRSTNAME!",
                "In order to better personalize our relationship, can you tell me, by clicking, the <strong>type of your company or organization</strong>?"
            ],
            variables: [
              {
                cle: "FIRSTNAME",
                referenceCode: "firstname"
              }
            ],
            options: [
                {
                    value: "A company",
                    next: "organizationName"
                },
                {
                    value: "A big account",
                    next: "organizationName"
                },
                {
                    value: "A digital agency",
                    next: "organizationName"
                },
                {
                    value: "A consultant",
                    next: "phoneNumber"
                }
            ]
        },
        {
          code: "organizationName",
          type: "text",
          next: "organizationSize",
          messageTexts: [
              "Good! I see that you are <strong>ORGANISATION</strong>",
              "Can you please tell me the <strong>name of your organization</strong>?"
          ],
          variables: [
            {
              cle: "ORGANISATION",
              referenceCode: "organisation"
            }
          ],
          validator: {
            type: "text",
            messages: [
              "Please enter your organization name with minimum 2 characters"
            ],
            min: 2,
            max: Infinity
          }
        },
        {
          code: "organizationSize",
          type: "text",
          next: "phoneNumber",
          messageTexts: [
              "It is an honor for us to work with <strong>ORGANISATION_NAME</strong>",
              "How many members are there at <strong>ORGANISATION_NAME</strong>?"
          ],
          variables: [
            {
              cle: "ORGANISATION_NAME",
              referenceCode: "organizationName"
            }
          ],
          validator: {
            type: "number",
            messages: [
              "Please enter your organization size with only numbers"
            ]
          }
        },
        {
          code: "phoneNumber",
          type: "text",
          next: "salutation",
          messageTexts: [
              "Now this is the last question <strong>FIRSTNAME</strong>",
              "Can you please tell me your <strong>phone number</strong>?"
          ],
          variables: [
            {
              cle: "FIRSTNAME",
              referenceCode: "firstname"
            }
          ],
          validator: {
            type: "phone",
            messages: [
              "Please enter your phone number in correct format",
              "Indicator is required, ex: +221 7XXXXXXXX"
            ]
          }
        },
        {
          code: "salutation",
          type: "end",
          messageTexts: [
              "Thank you for your time <strong>FIRSTNAME</strong>",
              "I will be in touch with you shortly."
          ],
          variables: [
            {
              cle: "FIRSTNAME",
              referenceCode: "firstname"
            }
          ]
        }
    ]
  }

  handleResult(result: any) {
    console.log(result);
  }
  
}

Config proprieties

data proprieties

Author

Mbaye DIOP

This package is actually maintained by Mbaye DIOP.

LinkedIn: https://www.linkedin.com/in/mbaye-diop-b52330120/