@centro-paghe/cp-chatbot-ai-ui NPM

cp-chatbot-ui

This library add the possibility to connect to the Centro Paghe ChatBot

installation

npm i @centro-paghe/cp-chatbot-ai-ui

Parameteres (web component attributes)

user-cf: fiscal code of the logged user, its not mandatory
company-id: company id of the logged user, its not mandatory
application-id: the two letter ID that identify the application inside Centro Paghe (e.g. "AU" anagrafica unica)
document-id: this is a field for future implementation, ignore it for now
z-index: the zindex of the button and the popup in case there are some element in the page with a higher z-index
bottom: the distance form the bottom of the page to the button in pixel
right: the distance form the right of the page to the button in pixel

usage

import '@centro-paghe/cp-chatbot-ai-ui';

Here some example on how you can use the web component

Vanilla js and angularjs

you can put the web component directly in the html.

<body>
  
  <!--  ...  -->
  
  <cp-chat-bot-ui
      user-cf="RNEDVD"
      company-id="CC"
      application-id="APPID"
      document-id="document-id"
      z-index="999999"
  ></cp-chat-bot-ui>

  <!--  ...  -->

</body>

If you dont have npm you can download this repo of this package and get the dist/index.js file

<head>
  <script src="/path/to/index.js" />
</head>

Angular 2+

import this libraty in the root module

import '@centro-paghe/cp-chatbot-ai-ui';

then create a component and module like the following

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

@Component({
  selector: 'app-cp-chat-bot-ui-wrapper',
  standalone: true,
  imports: [],
  template: `<cp-chat-bot-ui
    user-cf="RNEDVD"
    company-id="CC"
    application-id="APPID"
    document-id="document-id"
  />`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CpChatBotUiWrapperComponent {}

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CpChatBotUiWrapperComponent } from './cp-chat-bot-ui-wrapper.component';

@NgModule({
  declarations: [CpChatBotUiWrapperComponent],
  exports: [CpChatBotUiWrapperComponent],
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CpChatBotUiWrapperModule {}

Vue

<script setup>
import '@CentroPagheSrl/cp-chatbot-ai-ui';
</script>

<template>

  <cp-chat-bot-ui
      user-cf="RNEDVD"
      company-id="CC"
      application-id="APPID"
      document-id="document-id"
      z-index="999999"
      bottom="40"
      right="40"
  ></cp-chat-bot-ui>

</template>

React

import '@CentroPagheSrl/cp-chatbot-ai-ui';

const Compoennt = () => {

  return <>

    {/* ---------- */}

      <cp-chat-bot-ui
          user-cf="RNEDVD"
          company-id="CC"
          application-id="APPID"
          document-id="document-id"
          z-index="999999"
          bottom="40"
          right="40"
      ></cp-chat-bot-ui>


    {/* ---------- */}

  </>

}

@tanstack/react-query eslint-plugin-react framer-motion laravel-echo pusher-js react react-dom

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago