Web component que encapsula funções do Nice Chat.
Este componente encapsula uma API de acesso ao Nice Chat. Para utiliza-lo é
necessário um token de acesso a um dashboard do Nice Chat.
Para utiliza-lo, você precisará instala-lo via npm/yarn.
IMPORTANTE É necessário o arquivo npmrc com as credenciais de leitura para pacotes da Rede D'or.
``typescript jsx`
/**
* Evento chamado ao ser modificado o estado de visibilidade do widget.
*/
@Event() widgetChange: EventEmitter
/**
* Evento disparado assim que o chat for carregado na tela.
*/
@Event() chatLoaded: EventEmitter
/** Required
* Token de acesso ao dashboard do nice chat.
*/
@Prop() token: string;
/** Required
* Modifica interface para versão mobile.
*/
@Prop() isMobile: boolean = false;
/** Required
* Define se o componente deve ser chamado durante a montagem da inteface.
* @true [default] as APIs que abrem o chat são chamadas apenas quando o usuário clicar no botão.
* @false o componente é chamando assim que o elemento é montado na tela.
*/
@Prop() isLazy: boolean = true;
/** Not Required
* Esconde o formulário em que é pedido o nome do usuário e
* mostra diretamente a conversa.
*
*/
@Prop() hidePreSurvey: boolean = false;
/** Not Required
* Nome para identificação do usuário.
*/
@Prop() userName?: string;
/** Not Required
* Redirecionar o usuário para uma fila/skill específica, ao iniciar a conversa.
* Propriedade escutada, portanto mudanças nela acarreta afeitos colaterais na página.
*
* @param TicketThreadProp - aceita ‘string’ do tipo TicketThreadEnum
*/
@Prop() ticketThreadChosen?: TicketThreadProp
- Escrever script que chama o webcomponent:
`html`
- Utilizar Tag no , e encapsular o botão que abre o Chat:
`html`
- Adicionar lógica que exibe view do Chat para mobile ou desktop (abaixo da tag )
`html`
- Começe com npm ou yarn, a instalação da lib @rededor/nice-chat-component-lib-react
`
npm install @rededor/nice-chat-component-lib-react
// ou
yarn add @rededor/nice-chat-component-lib-react
- Você pode usar o WebComponent como se estivesse a usar outro componente do projeto:
`typescript jsx`
// exemplo de como importar o ChatNice - React
import { NiceChat } from '@rededor/nice-chat-component-lib-react';
- Na sequência, use o componente se atentando as props obrigatórias.
`typescript jsx`
// exemplo de como utilizar o webcomponent - React
⚠️ Pode ser que você encontre alguns problemas por falta de uma dependência, que no caso seria:
@rededor/nice-chat-component, caso ainda haja problemas mesmo essa outra lib instalada, veja se o seu projeto
transpila esses componentes fora da pasta "/src", tente configurar o babel para isso.
When creating new component tags, we recommend _not_ using stencil in the component name (ex: ). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion`.
This is a starter project for building a standalone Web Component using Stencil.
Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.