Ejemplos

Todos estos elementos deben estar contenidos dentro de la clase .chattigo-widget.

*los links llevan a la descripción detallada de cada componente

.chattigo-widget__close-icon
Widget Header Welcompe page .chattigo-widget-header
- .chattigo-widget-header__background
- .chattigo-widget-header__logo
- .chattigo-widget-header__h3
- .chattigo-widget-header__subheading
Widget Content .chattigo-widget-content
- Widget Tem .chattigo-widget-team
  - widget-team__label
  - widget-team__caption
  - widget-team__list
    - widget-team__list--item
- Widget Form widget-form

Example

html welcome page

<!-- this div is just for the example -->
<div class="u-widget-example-margin"> 
  <!-- component -->
  <div class="chattigo-widget chattigo-widget--welcome">
    <a class="chattigo-widget__close-icon">
      <span class="icon-close"></span>
    </a>
  
    <div class="chattigo-widget-header__background"></div>
  
    <div class="chattigo-widget-header">
      <img class="chattigo-widget-header__logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
      
      <h2 class="chattigo-widget-header__h3">Chatear es la nueva forma de hablar</h2>
      
      <div class="chattigo-widget-header__subheading">
        Tu negocio crece cuando te comunicas mejor con tus clientes.
      </div>
    </div>
  
    <div class="chattigo-widget-content">
      <div class="chattigo-widget-team">
        <label class="chattigo-widget-team__label">
          Inicia una conversación
        </label>
        <div class="chattigo-widget-team__caption">
          El equipo usualmente responde en pocas horas.
        </div>
  
        <ul class="chattigo-widget-team__list">
          <li class="chattigo-widget-team__list--item">
            <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
          </li>
          <li class="chattigo-widget-team__list--item">
            <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/2_dummy.png" />
          </li>
          <li class="chattigo-widget-team__list--item">
            <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
          </li>
          <li class="chattigo-widget-team__list--item">
            <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/4_dummy.png" />
          </li>
          <li class="chattigo-widget-team__list--item">
            <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/5_dummy.png" />
          </li>
          <li class="chattigo-widget-team__list--item">
            <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/6_dummy.png" />
          </li>
        </ul>
      </div>
      <form class="chattigo-widget-form">
        <label class="c-input__label">Nombre*</label>
        <input class="c-input" type="text" placeholder="Ingresa tu nombre" />
  
        <button class="c-button">
          nueva conversación
        </button>
      </form>
    </div>
  </div>
  <div class="chattigo-widget-trigger">
    <img class="chattigo-widget-trigger--logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
  </div>
  <!-- end component -->
</div>

Estructura y clases para la pagina de mensajes.

Todos estos elementos deben estar contenidos dentro de la clase .chattigo-widget.

*los links llevan a la descripción detallada de cada componente

Widget Header .chattigo-widget-header
- .chattigo-widget-header__background
- .chattigo-widget-header__image
- .chattigo-widget-header__agent-info
  - .chattigo-widget-header__agent-info--name
  - .chattigo-widget-header__agent-info--status
- .chattigo-widget-header__actions
  - .chattigo-widget-header__actions--item
Widget Content .chattigo-widget__content
- Message Box .c-message-box
Widget Footer .chattigo-widget__footer
- Send Message .c-send-message

Scroll & Input Message Behavior

Para que la página de envío de mensajes del widget se comporte de la manera apropiada es necesario agregar funcionalidades con javascript, para ayudar al contenedor de los mensajes con el scrolling y a su vez hacer crecer el input de mensaje en caso de ser necesario.

Para esto se crearon algunos JS Hooks que deben ser agregados como classes en los siguientes elementos:

Widget Content .chattigo-widget__content .widget-message-content-js
Send Message .c-send-message .widget-send-message-box-js
- .c-input.c-send-message__input .widget-message-input-js

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    findMessageBox = document.getElementsByClassName('widget-send-message-box-js');

    if(findMessageBox.length) {
      sendMessageBox = findMessageBox[0];
      inputMessage = sendMessageBox.getElementsByClassName('widget-message-input-js')[0];
      chatMessages = document.getElementsByClassName('widget-message-content-js')[0];
      
      // first set margin bottom
      sendMessageBoxHeight = (sendMessageBox.scrollHeight - 16)+"px";
      chatMessages.style.marginBottom = sendMessageBoxHeight;

      if (inputMessage) {
        inputMessage.addEventListener("keyup", function() {
          // set new height of the input message
          inputMessage.style.height = "1px";
          inputMessage.style.height = (2 + inputMessage.scrollHeight) + "px";
          // get the new height of the message box
          sendMessageBoxHeight = (sendMessageBox.scrollHeight - 16)+"px";
          // set the margin bottom of the widget content
          chatMessages.style.marginBottom = sendMessageBoxHeight;
        });
      }
    } 
  });
</script>

Example

html config page

<!-- this div is just for the example -->
<div class="u-widget-example-margin"> 
  <!-- component -->
  <div class="chattigo-widget">
    <div class="chattigo-widget-header">
      <div class="chattigo-widget-header__background"></div>
      <img class="chattigo-widget-header__image" src="https://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
      
      <div class="chattigo-widget-header__agent-info">
        <label class="chattigo-widget-header__agent-info--name">
          Porter Collins
        </label>
        <span class="chattigo-widget-header__agent-info--status">
          En linea
        </span>
      </div>
      
      <div class="chattigo-widget-header__actions">
        <a href="/components/widget--config.html" class="chattigo-widget-header__actions--item">
          <span class="icon-config"></span>
        </a>
  
        <a class="chattigo-widget-header__actions--item">
          <span class="icon-arrow-down"></span>
        </a>
      </div>
    </div>
  
    <div class="chattigo-widget__content widget-message-content-js">
      <div class="c-message-box">
        <div class="c-message-box__message">
          hola
          <small>10:00</small>
        </div>
        
        <div class="c-message-box__message">
          Quiero saber como se hace
          <small>10:00</small>
        </div>
  
        <div class="c-message-box__message-sended">
          Tiene que pagar para poder ingresar
          <small>10:00</small>
        </div>
  
        <div class="c-message-box__message-sended">
          Aquí le dejo el link de pago
          <small>10:04</small>
        </div>
  
        <div class="c-message-box__message-sended">
          <a class="c-action-link" href="#">http://pagaporfa.org</a>
          <small>10:04</small>
        </div>
  
        <div class="c-message-box__message-sended">
          <a class="c-message-box__message-attachment">
            <img src="https://cdn.chattigo.com/assets/img/attachment/preview-tiny/PDF.svg" />
            Attachment name.pdf
          </a>
          Adjunto PDF
          <small>10:10</small>
        </div>

        <div class="c-message-box__message">
          gracias
          <small>10:00</small>
        </div>
        
        <div class="c-message-box__message">
          te pasaste
          <small>10:00</small>
        </div>
      </div>
    </div>
    
    <div class="chattigo-widget__footer">
      <div class="c-send-message widget-send-message-box-js">
        <textarea class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
        
        <div class="c-send-message__actions">
          <a href="#">
            <span class="icon-attachment"></span>
          </a>
          <a href="#">
            <span class="icon-emoji"></span>
          </a>
          <a class="c-send-button" href="#">
            <span class="icon-send"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="chattigo-widget-trigger">
    <img class="chattigo-widget-trigger--logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
  </div>
  <!-- end component -->
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
      findMessageBox = document.getElementsByClassName('widget-send-message-box-js');
  
      if(findMessageBox.length) {
        sendMessageBox = findMessageBox[0];
        inputMessage = sendMessageBox.getElementsByClassName('widget-message-input-js')[0];
        chatMessages = document.getElementsByClassName('widget-message-content-js')[0];
        
        // first set margin bottom
        sendMessageBoxHeight = (sendMessageBox.scrollHeight - 16)+"px";
        chatMessages.style.marginBottom = sendMessageBoxHeight;

        if (inputMessage) {
          inputMessage.addEventListener("keyup", function() {
            // set new height of the input message
            inputMessage.style.height = "1px";
            inputMessage.style.height = (2 + inputMessage.scrollHeight) + "px";
            // get the new height of the message box
            sendMessageBoxHeight = (sendMessageBox.scrollHeight - 16)+"px";
            // set the margin bottom of the widget content
            chatMessages.style.marginBottom = sendMessageBoxHeight;
          });
        }
      } 
    });
  </script>
</div>

Estructura y clases para la pagina de configuración.

Todos estos elementos deben estar contenidos dentro de la clase .chattigo-widget.

*los links llevan a la descripción detallada de cada componente

Widget Header .chattigo-widget-header
- .chattigo-widget-header__image
- .chattigo-widget-header__agent-info
  - .chattigo-widget-header__agent-info--name
  - .chattigo-widget-header__agent-info--status
- .chattigo-widget-header__actions
  - .chattigo-widget-header__actions--item
Widget Content .chattigo-widget__content
- Widget List Options .chattigo-widget-list-options
  - .chattigo-widget-list-options__item
  - .chattigo-widget-list-options__left-side
  - .chattigo-widget-list-options__right-side
  - .chattigo-widget-list-options__switch
- Widget Action Link .chattigo-widget-logout

Example

html config page

<!-- this div is just for the example -->
<div class="u-widget-example-margin"> 
  <!-- component -->
  <div class="chattigo-widget">
  
    <div class="chattigo-widget-header">
      <div class="chattigo-widget-header__background"></div>
  
      <img class="chattigo-widget-header__image" src="https://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
      
      <div class="chattigo-widget-header__agent-info">
        <label class="chattigo-widget-header__agent-info--name">
          Porter Collins
        </label>
        <span class="chattigo-widget-header__agent-info--status">
          En linea
        </span>
      </div>
      
      <div class="chattigo-widget-header__actions">
        <a class="chattigo-widget-header__actions--item">
          <span class="icon-config"></span>
        </a>
      
        <a class="chattigo-widget-header__actions--item">
          <span class="icon-arrow-down"></span>
        </a>
      </div>
    </div>
  
    <div class="chattigo-widget-content">
      <ul class="chattigo-widget-list-options">
        <li class="chattigo-widget-list-options__item">
          <div class="chattigo-widget-list-options__left-side">
            <span class="icon-megaphone"></span>
            Mensajes con Sonido
          </div>
      
          <div class="chattigo-widget-list-options__right-side">
            <div class="chattigo-widget-list-options__switch">
              <input id="switche" type="checkbox" class="c-switch" checked>
              <label for="switche"></label>
            </div>
          </div>
        </li>
      </ul>
      
      <a class="chattigo-widget-logout" href="/components/webchat--welcome.html">
        terminar chat
      </a>
      </div>
    </div>
  </div>
  <div class="chattigo-widget-trigger">
    <img class="chattigo-widget-trigger--logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
  </div>
  <!-- end component -->
</div>

Ejemplos

Estructura y clases para la bienvenida del widget.

Example

Estructura y clases para la pagina de mensajes.

Scroll & Input Message Behavior

Example

Estructura y clases para la pagina de configuración.

Example