Skip to content
Monk BusinessMonk BusinessMonk Business Design System

ChatWidget

The website assistant: a launcher button that opens a chat panel limited to questions about Monk Business, with lead capture and a closed state. @monk-business/css provides the presentational pieces; the behavior (opening, sending, verification, storage) belongs to the application.

Launcher, conversation and lead cardDark · Grafite

Assistente Monk

Assistente de IA da Monk Business. Responde apenas sobre nossos serviços. Não envie dados sensíveis.

Olá! Sou o assistente virtual da Monk Business. Posso explicar nossos serviços ou registrar um pedido de orçamento.

Vocês fazem integração com a BDO?

Sim. Desenvolvemos integrações SOA e BDO para portabilidade numérica. Veja Portabilidade numérica. Quer que eu registre um pedido?

Confirme seu pedido

Nome
Ana Souza
E-mail
ana@operadora.com.br
Assunto
Portabilidade numérica
3 mensagens restantes0/500
Launcher, conversation and lead cardLight · Gelo

Assistente Monk

Assistente de IA da Monk Business. Responde apenas sobre nossos serviços. Não envie dados sensíveis.

Olá! Sou o assistente virtual da Monk Business. Posso explicar nossos serviços ou registrar um pedido de orçamento.

Vocês fazem integração com a BDO?

Sim. Desenvolvemos integrações SOA e BDO para portabilidade numérica. Veja Portabilidade numérica. Quer que eu registre um pedido?

Confirme seu pedido

Nome
Ana Souza
E-mail
ana@operadora.com.br
Assunto
Portabilidade numérica
3 mensagens restantes0/500
Closed conversation with the contact cardDark · Grafite

Assistente Monk

Assistente de IA da Monk Business. Responde apenas sobre nossos serviços. Não envie dados sensíveis.

Escreva um poema sobre o mar.

Posso ajudar só com assuntos da Monk Business: nossos serviços, projetos e contato com a equipe.

Esta conversa foi encerrada. Fale com a equipe por um destes canais:

Formulário de contatoWhatsApp

contato@monkbusiness.com.br

Closed conversation with the contact cardLight · Gelo

Assistente Monk

Assistente de IA da Monk Business. Responde apenas sobre nossos serviços. Não envie dados sensíveis.

Escreva um poema sobre o mar.

Posso ajudar só com assuntos da Monk Business: nossos serviços, projetos e contato com a equipe.

Esta conversa foi encerrada. Fale com a equipe por um destes canais:

Formulário de contatoWhatsApp

contato@monkbusiness.com.br

Usage

Section titled “Usage”

Provide the launcher (favicon symbol + “Fale com o assistente”), fixed bottom-right (mb-chat-launcher--floating); the panel (380px wide, full screen on phones with mb-chat--floating) with the title “Assistente Monk” and the disclosure “Assistente de IA da Monk Business. Responde apenas sobre nossos serviços. Não envie dados sensíveis.”; assistant messages on surface-2 (mb-msg--bot), the visitor’s on bubble-user (mb-msg--user); the input limited to 500 characters with a counter; “N mensagens restantes” when 3 or fewer remain.

States

Section titled “States”
  • Lead card (mb-lead-card): when the assistant proposes a contact request, show the details to confirm, the consent checkbox (never pre-checked) and “Enviar pedido”.
  • Closed (mb-contact-card): when the conversation reaches its limit or is closed by the guardrails, disable the input and show the contact card (form, WhatsApp, email). Use the same card when the assistant is busy.
  • Busy: mb-chat__typing with three symbol dots while the assistant answers.

Do

  • Keep the disclosure visible in the panel header.
  • Give the panel role="dialog" with aria-labelledby (title) and aria-describedby (disclosure), and the log role="log".
  • Close the panel with Esc and return focus to the launcher.

Don't

  • Let the panel cover the whole screen on desktop.
  • Hide the disclosure.
  • Auto-open the chat or play sounds.

HTML

Section titled “HTML”
<button class="mb-chat-launcher mb-chat-launcher--floating" type="button" aria-haspopup="dialog" aria-expanded="false">
  <img src="/favicon.svg" alt="" width="40" height="40" />
  <span class="mb-chat-launcher__label">Fale com o assistente</span>
</button>


<div class="mb-chat mb-chat--floating" role="dialog" aria-labelledby="chat-title" aria-describedby="chat-disclosure">
  <div class="mb-chat__head">
    <img src="/favicon.svg" alt="" width="36" height="36" />
    <div>
      <h2 class="mb-chat__title" id="chat-title">Assistente Monk</h2>
      <p class="mb-chat__disclosure" id="chat-disclosure">
        Assistente de IA da Monk Business. Responde apenas sobre nossos serviços. Não envie dados sensíveis.
      </p>
    </div>
    <button class="mb-chat__close" type="button" aria-label="Fechar">×</button>
  </div>
  <div class="mb-chat__log" role="log" aria-live="polite" aria-label="Assistente Monk">
    <div class="mb-msg mb-msg--bot"><p>Olá! Posso explicar nossos serviços ou registrar um pedido de orçamento.</p></div>
    <div class="mb-msg mb-msg--user"><p>Vocês fazem integração com a BDO?</p></div>
  </div>
  <form class="mb-chat__compose">
    <div class="mb-chat__compose-row">
      <textarea class="mb-textarea" aria-label="Mensagem" maxlength="500" placeholder="Escreva sua pergunta"></textarea>
      <button class="mb-btn mb-btn--primary" type="submit">Enviar</button>
    </div>
    <div class="mb-chat__meta"><span>3 mensagens restantes</span><span>0/500</span></div>
  </form>
</div>
Class Part
mb-chat-launcher, mb-chat-launcher__label, --floating Launcher pill; the label hides on phones when floating
mb-chat, mb-chat--floating Panel; floating is fixed bottom-right and full screen on phones
mb-chat__head, __title, __disclosure, __close Header with the AI disclosure
mb-chat__log, mb-msg, mb-msg--bot, mb-msg--user Conversation
mb-chat__actions, mb-chat__chip Suggested links under an answer
mb-chat__typing, mb-chat__dots Busy indicator
mb-lead-card, mb-contact-card Lead confirmation and closed or busy states
mb-chat__compose, __compose-row, __meta Composer, counter and remaining messages