Á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>ENE</div>
      <div class="day">6</div>
    </div>
    <div class="article"> <br>
      <h1> ✒️ Integración de Leads: reformulación de la integración DataHub</h1>
      <br>
      <span class="badge badge-melhoria">MEJORA</span>
      <br> <br>

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


          <tr>

            <th scope="row">Producto</th>
            <td>TOTVS CRM Gestión de clientes</td>

          </tr>
          <tr>

            <th scope="row">Módulo</th>
            <td>Marketplace </td>

          </tr>
          <tr>

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

            <th scope="row">Identificador</th>
            <td>ME260120221312 </td>
          </tr>
          <tr>
            <th scope="row">Ticket/Issue</th>
            <td>DTCRMSC-1732 </td>
          </tr>
          <tr>

      </table>
      <br>
      <p> Las empresas siempre buscan nuevos Leads para sus negocios, para ello, muchas veces, utilizan herramientas de minería de datos, que es el caso del DataHub. Para que el CRM aproveche plenamente los Leads identificados por medio del Datahub y otras herramientas, es necesario que esté disponible una integración robusta, capaz de recibir y almacenar las características más importantes de los Leads, ya sean personalizados o no. Pensando en esto, reformulamos la integración existente con el DataHub, para que se utilicen los recursos disponible del CRM, como validaciones de duplicación o personalizadas, así como también, el mapeo de campos personalizados. Este documento lo guiará por el proceso de uso de mejora.  </p>
      <div class="pause" id="i">📍 ¿Dónde puede encontrarse?</div>
      <p>
      <ol>
        <li> Módulo Marketplaces </li>
        <li> Card "Integración de Leads" </li>
            </ol>
      </p>

      <div class="pause">🔍 ¿Qué cambió?</a></div>
      <p> Ahora, el mapeo de campos se realizará por medio de la herramienta tercera, consultando la API del servicio de personalización (BTB). Si existiera alguna modificación en el contrato de la API, que impacte el mapeo, como por ejemplo, eliminación de campos personalizados en el TOTVS CRM, el usuario debe ser informado, para que, si fuera necesario, se realicen ajustes. También debe ser posible definir si los leads incluidos en el TOTVS CRM, independientemente del fuente, se actualizarán o no.</p> <br>                   


<div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733190964/DOC14.png?version=2&modificationDate=1673744136269&api=v2" alt="Image" height="80%" width="100%"> </div>        

<p> Después de configurar el mapeo, el usuario estará apto para enviar los Leads seleccionados de la herramienta al TOTVS CRM. Si los leads enviados se identifican por las reglas de duplicación activa, estos deben identificarse como "Leads ya enviados en la herramienta tercera". Después de estar configurado para la actualización de registros existentes, el TOTVS CRM debe actualizar el registro, de acuerdo con el registro de la herramienta tercera, de lo contrario, debe informar que el registro está duplicado. </p> <br>       <div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733190964/DOC13.png?version=2&modificationDate=1673744291794&api=v2" alt="Image" height="80%" width="100%">     
     

<p>El mecanismo desarrollado permite que varias herramientas puedan integrarse con el TOTVS CRM, por ello, el card de captura de leads fue actualizado, y a partir de ahora usted lo encontrará de la siguiente manera en el Marketplace:</p>

            <div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733190964/gif%20integracao.gif?version=1&modificationDate=1673745555807&api=v2" alt="Image" height="80%" width="100%"> </div>       


 <p> El generador de token de acceso del usuario es el medio ideal para considerar las configuraciones importantes. Este considera sus parámetros del perfil de acceso y todas las otras informaciones relacionadas. </p>

             <div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733190964/gif%202%20integra%C3%A7%C3%A3o%20%281%29.gif?version=1&modificationDate=1673793702883&api=v2" alt="Image" height="80%" width="100%"> </div> 

     </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="Asistente virtual"></a></div>
    <div class="speech-bubble"><b>¡Hola!👋</b> Soy Carolina, asistente virtual de TOTVS. ¿Aún tiene dudas? ¡Acceda a la central de ayuda y explore todos los contenidos ofrecidos por TOTVS CRM - Gestión 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>