@rededor/nice-chat-component-lib

v0.5.12

Published

7 months ago

Web component que encapsula funções do Nice Chat.

Downloads

166

0High
0Medium
0Low

brunocarvalhodearaujo

👨‍💻 Nice Chat Web Component

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.

🌐 Utilizando esse componente

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.

🚧 Atente-se com as props obrigatórias e as disponíveis, atualmente:

  /**
   * 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

🌐 Webcomponent no HTML

Escrever script que chama o webcomponent:

<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@rededor/[email protected]/dist/loader/index.js';
  defineCustomElements();
</script>

Utilizar Tag <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>

Adicionar lógica que exibe view do Chat para mobile ou desktop (abaixo da tag <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>

⚛️ Webcomponent no React

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:

// 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.

// 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.

Devs Stencil - Naming Components

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.

Devs Stencil - Stencil Component Starter

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

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme