Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
<div class="top">
    <div class="header">
      <center> <img class="img" src="https://tdn.totvs.com/download/attachments/732664978/log.png?version=1&modificationDate=1673393212156&api=v2" alt=""> </center>

    </div>
  </div>
  <div class="content">
    <div class="date"> <br>
      <div>JAN</div>
      <div class="day">6</div>
    </div>
    <div class="article"> <br>
      <h1> ✒️ TOTVS CRM WhatsApp Extension: envio de áudios para o CRM</h1>
      <br>
      <span class="badge badge-melhoria">MELHORIA</span>
      <br> <br>

      <table>
        <colgroup>
          <col span="2" class="day">
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead>


          <tr>

            <th scope="row">Produto</th>
            <td>TOTVS CRM Gestão de Clientes</td>

          </tr>
          <tr>

            <th scope="row">Módulo</th>
            <td>Atividade<td>WhatsApp Extension </td>

          </tr>
          <tr>

            <th scope="row">Ambiente</th>
            <td>Web </td>
          </tr>
          <tr>

            <th scope="row">Identificador</th>
            <td>NR220220220928<td>NR121220221356 </td>
          </tr>
          <tr>
            <th scope="row">Ticket/Issue</th>
            <td>DTCRMSC-16112320   </td>
          </tr>
          <tr>

      </table>
      <br>
      <p> UmO dosWhatsApp pontosé problemáticosa paramaneira acerta equipe de vendasmanter écontato acom dificuldadeseus emleads gerenciare atividadesclientes. MuitasMas, vezesatuando precisamem lidarvendas, comentendemos informaçõesque desatualizadasvocê outambém irrelevantes,pode ocupandoter espaçomedo node feedperder deinformações atividadesimportantes. ePor semisso, aagora possibilidade de excluí-las.  Isso acaba causando muita confusão e dificultando no uso do CRM. Para solucionar esse problema, criamos um mecanismo de exclusão de atividadesvocê pode enviar como anexo as conversas de áudio para o seu TOTVS CRM. Essa sem dúvidas é a chave para obter um verdadeiro entendimento dos seus clientes - tudo dentro do contexto. Isso facilita a visualização de insights mais precisos, que podem levar a decisões mais informadas e assertivas. Este documento o guiará pelo processo de uso da melhoria.  < </p>
      <div class="pause" id="i">📍 Onde pode ser encontrado?</div>
      <p>
      <ol>
        <li> Módulo AtividadeTOTVS CRM WhatsApp Extension </li>
        <li> Atividades </li>
      </ol>
      </p>

      <div class="pause">🔍  O que mudou?</a></div>
      <p> No cadastro de perfil de acesso, foi adicionada a permissão de deletar no item Atividade. Agora, se os usuários com permissão, poderão excluir registros de atividades. Os perfis <strong> Creator e Master </strong>foram editados para que de forma padrão, tenham a permissão para deletar atividades.</p> <br>
      <div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191298/VIDEO%20EXCLUSAO%201%20%281%29.gif?version=1&modificationDate=1673819794925&api=v2"alt="Image" height="80%" width="100%"> </div>
        <p> Ao clicar no botão de lixeira exibido de forma fixa em cada registro da lista de atividades, exibiremos um pop-up com uma mensagem de confirmação de deleção. Ao confirmar, eliminaremos o registro e desvincularemos a oportunidade ou plano de ação relacionados.  </p>               
     
<div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191298/DELETAR%203.gif?version=1&modificationDate=1673821951002&api=v2"alt="Image" height="80%" width="100%"> </div> <br> <p>Selecionando um ou mais registros através do checkbox, exibirá na sessão de edição em massa, um novo botão chamado DELETAR. Clicando nesse botão, exibirá um pop-up com uma mensagem de confirmação de deleção. Confirmando, eliminará os registros selecionados e desvinculará as oportunidades ou plano de ação relacionados a ele. </p>
   <br> 
<div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191298/DELETAR%204.gif?version=1&modificationDate=1673823386494&api=v2"alt="Image" height="80%" width="100%"> </div> <br>
  <div class="box warning-box">
          <i class="fa fa-exclamation-triangle"> </i>
          <strong>Atenção</strong>
          <p>Não se preocupe! Se por engano você excluir alguma atividade, ela estará disponível para recuperação no nosso banco de dados. No entanto, pode haver custos adicionais para essa operação. </p>

          </i>
        </div> 
HTML
<style>

 #title-text {
	display: none !important;}   @import "compass/css3";  @import "compass/css3";

* {
  box-sizing: border-box;
  font-family: lato;
}



blockquote {
  margin: 3%;
  border-left: 10px solid #363636;
  padding: 2%;
  color: #222;
  background: #fff;
  font-style: italic;
  line-height: 130%;
}



.top {
  width: 100%;
  background: #363636;
  
}

.img {
image-resolution: 5px 5px 9px;
image-rendering: auto;
image-orientation:0deg
}

.header {
  max-width: 1200px;
  width: 98%;
  height: 7em;
  margin: 0px auto;
  overflow: hidden;

  
  h1 {
    text-align: center;     
    font-weight: bold;     
    color: #fff;
    padding: 20px;
   font-size: 22px;

     div {
      margin: 0;
      font-weight: normal;
      font-size: 1.8em;
    }
  }
  .author {
    font-size: 0.8em;
    font-weight: normal;
    border-top: 1px dashed #555;
    border-bottom: 1px dashed #555;
    max-width: 160px;
    text-align: center;
    margin: -1em auto 0 auto;
    padding: 0.3em;
    text-transform: uppercase;
    color: #ccc;
  }
}

.content {
  max-width: 750px;
  margin:0px auto;
  padding: 0;
}

.date {
  float: left;
  width: 10%;
  color: #444;
  text-align: center;
  div {
    margin: 0;
    line-height: 50%;
  }}
  .day {
    float: left;
    margin-top: 0.1em;
    width: 100%;
    color: #FEAC0E;
    font-size: 200%;
  }
}

.date-line {
  display: none;
}

.article {
  width: 90%;
  margin: 0 0 6em 0;
  float: left;
  padding: 0 1.3em 0 1.3em;
  border-left: 5px solid #FEAC0E;
 background: rgb(247, 247, 252);
 
  }
  h2 {
    font-weight: normal;       
    font-size: 22px;
   font-weight: bold;
   color: #555555;
    margin: 0;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin: 0 0 1em 0;
  }
  p {
    margin: 0;
    padding-top: 8px;
    color: #555;
    text-align: justify;
    font-size: 16px;
    line-height: 150%;
    
  }

li{

  font-size: 16px;
  color: #555555;
}    

div{
    font-style: 16px;
    color: #555;
  }
  .firstpara {
    text-indent: 0;
    font-size: 16px;
  }
  .pause {
    margin: 2em auto 2em auto;
    color: #555555;
    width: 60%;
    padding: 10px;
    text-align: center;
   font-size: 20px;
 

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .firstcharacter {
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    line-height: 0.6em;
    padding-top: 0.12em;
    padding-right: 0.1em;
    padding-left: 0;
  }
}

.footer {
  max-width: 1200px;
  width: 98%;
  height: 50px;
  margin: 0px auto;
  overflow: hidden;
  border-top: 1px solid #ccc;}
  .copy {
    float: right;
    font-style: italic;
    color: #888;
    padding: 1% 1% 0 0;
  }
}

.prev a,
.next a {
  position: fixed;
  top: 9.6em;
  padding: 1em;
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.prev a:hover,
.next a:hover {
  background: #fff;
}
.prev a {
  left: 0.7em;
}
.next a {
  right: 0.7em;
}

@media only screen and (max-width: 450px) {
  .content {
    margin-top: 2em;
  }
  .social {
    display: none;
  }
  .date {
    display: none;
  }
  .date-line {
    display: inline;
  }
  .article {
    width: 100%;
    margin: 0 auto 2em auto;
    border-left: none;
    padding-bottom: 2em;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 1.2em;
    }
  }
  .header {
    height: auto;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    background: rgb(34, 16, 171)
     
    h1 {
      text-align: center;
      width: 100%;
      margin: 0;
      color: #f1f1f1;
      span {
        font-size: 80%;
      }
    }
    .author {
      display: none;
    }
  }
  .footer {
    text-align: center;
    padding: 3%;
    height: 40px;
    .copy {
      float: none;
    }
  }
  .prev a,
  .next a {
    position: relative;
    margin-bottom: 2em;
    text-align: center;
    top: 0;
  }
  .prev a {
    float: left;
    width: 40%;
  }
  .next a {
    float: right;
    width: 40%;
  }s
.table {
font-family: lato;
background-color: #fff;

}
  
#wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: center;
}}
.flexWrap {
  display: flex;
  gap: 2px;
  width: 110px;
}
#disclaimer {
  font-family: sans-serif;
  color: #333333;
  position: fixed;
  top: 5%;
  right: 5%;
  width: 5%;
} 

.badge-primary {
  color: #8686FF;
  background-color: #F3F3FF;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-secondary{
  color: #ebeef0;
  background-color: #2abe74;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold 

}

.badge-novo {
  color: #fff;
  background-color: #20d691;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-danger{
  color: #ebeef0;
  background-color: #e93e9c;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold }

.badge-manutencao {
  color: #FFF;
  background-color: #efc307;
  border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}

.badge-melhoria {
  color: #FFF;
  background-color: #6f60f6;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-light {
  color: #8686FF;
  background-color: #F3F3FF
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-dark {
  color: #ebeef0;
  background-color: #064118;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold } 


body {
  font-family: lato;
}
table {
  border-collapse: collapse;
}
th {
  text-align: left;
  background-color: #363636;
  color: #fff;
}
caption {
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 1rem;
}
td, th {
  padding: 0.5rem;
  border: 3px solid #fff;
}
tbody tr:nth-child(odd),
tfoot tr:nth-child(even) {
   background-color: #fff;
}
tfoot tr td:first-child {
  border: none;
  background-color: white;
}
tfoot {
border-top: 5px solid #fff;
}

.img2 {
   width:50%;
    height:auto;
    padding:2%;
    margin-bottom:4%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto }

 #f7f7fc;
  }  



}
container{
    width: 50%;
}
.borderbox{
  border: 1px dashed #ebebeb;
  width:45%;
  margin: 50px auto;
  border-radius: 8px;
  border-width:2px;
}
.box{
  position:relative;
  width:auto;
  height:auto;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0px 1px 8px 1px #ebebeb;
  border-radius: 8px;
}
.sucess-box{
    border-left: solid 5px #3FC43C;
    background-color: #fff;

} .info-box{
    border-left: solid 5px #585EC2;
    background-color: #fff;
}
.warning-box{
    border-left: solid 5px #EFA162;
    background-color: #fff;
}
.error-box{
    border-left: solid 5px #F32D70;
    background-color: #fff;
}
.fa{
    padding-right:10px;
}
.fa-check-circle{
  color: #3FC43C;
} 
.fas fa-info-circle
{
  color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
  color: #EFA162;
}
.error-box .fa-exclamation-triangle{
  color: #E63470;
}
p{
  padding:0px 28px;
}
.time{
  color:#9b9b9b;
}
.fa-close{
    color:#BCC4CD;
}
.close{
  position:absolute;
  top: 20px;
  right:20px; 
}
.link1,
.link2,
.link3,
.link4{
  opacity:0;
  margin-left:20px;
  text-decoration:none;
}
.link1{
  color:#3FC43C;
}
.link2{
  color:#585EC2;
}
.link3{
  color:#EFA162;
}
.link4{
  color:#E63470;
}
.box:hover a{
  opacity:1;
}
 </style>
HTML
<div class="speech-row">
    <div class="speech-img"><a href="https://totvscst.zendesk.com/hc/pt-br/#home" target="_blank"><img src="https://tdn.totvs.com/download/attachments/731900022/01.png?version=1&modificationDate=1673107757259&api=v2" alt="Assistente virtual"></a></div>
    <div class="speech-bubble"><b>Olá!👋</b> Sou a Carolina, assistente virtual da TOTVS. Ainda tem dúvidas? Acesse a central de ajuda e explore todos os conteúdos oferecidos pela TOTVS CRM - Gestão de Clientes! </div>
  </div>
HTML
<style>  body {
  margin: 0; // 1
  font-family: lato;
  font-size: 16px;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: #555555
  text-align: left; // 3
  background-color: $body-bg; // 2
}

.speech-bubble {
  max-width: 300px;   
  font-family: lato;   
  color: #555555;
font-size: 16px;
   margin: 1rem;
  padding: 1rem;
  position: relative;
  border: 2px solid #FEAC0E;
  background: #fff;
  border-radius: 0.4em;
}
.speech-row {
  display: flex;
  justify-content: center;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.speech-img img {
  border-radius: 50%;
}
img {
  vertical-align: middle;
  border-style: none;
}
.speech-img {
  align-self: center;
  max-width: 100%;
  height: auto;
}
*,
::after,
::before {
  box-sizing: border-box;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
.speech-bubble:before,
.speech-bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: #FEAC0E;
  border-left: 0;
  margin-top: -20px;
  margin-left: -20px;
}

.speech-bubble:after {
  border-right-color: #fff;
  margin-left: -18px;
  z-index: 1;
}
    </style>