@rededor/nice-chat-component-lib
Advanced tools
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.
/**
* Evento chamado ao ser modificado o estado de visibilidade do widget.
*/
@Event() widgetChange: EventEmitter<boolean>;
/**
* Evento disparado assim que o chat for carregado na tela.
*/
@Event() chatLoaded: EventEmitter<void>;
/** 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
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@rededor/nice-chat-component-lib@x.x.x/dist/loader/index.js';
defineCustomElements();
</script>
<nice-chat> no <body>, e encapsular o botão que abre o Chat:<!-- adicione a token e implemente os atributos. -->
<nice-chat token="" is-mobile="true">...</nice-chat>
<nice-chat>)<script>
let isDesktop = window.matchMedia("(min-width: 768px)");
function _setNiceDisplay() {
const handleNiceView = ({ isMobile = false }) => (
const niceChat = document.querySelector('nice-chat')
niceChat.setAttribute('is-mobile', String(isMobile))
)
return handleNiceView({ isMobile: !isDesktop.matches })
}
_setNiceDisplay()
</script>
@rededor/nice-chat-component-lib-reactnpm install @rededor/nice-chat-component-lib-react
// ou
yarn add @rededor/nice-chat-component-lib-react
// exemplo de como importar o ChatNice - React
import { NiceChat } from '@rededor/nice-chat-component-lib-react';
// exemplo de como utilizar o webcomponent - React
<ChatNice isLazy={false} token={CHATNICE} isMobile={!isDesktop} style={{ display: 'none' }} />
⚠️ 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: <stencil-datepicker>). 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.
FAQs
Web component que encapsula funções do Nice Chat.
We found that @rededor/nice-chat-component-lib demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.