Novu•5mo ago

Email formatting difference in preview and trigger

Hi everyone, today a notification email was sent without the table formatting (border and title color). In the preview, the formatting is correct, but when I receive the email it is unformatted. Can you help me please?

4 Replies

Pawan Jain•5mo ago

@Larissa Palombo If you don't mind sharing the email html content, can you please share here or in person message?

Larissa PalomboOP•5mo ago

In Novu Editor

 
<style>
#tabela {
 border: 1px solid black;
 border-collapse: collapse; 
 text-align: center;
}

#tabelaHead {
 background: #D3D3D3;
 color: black;
 text-align: center;
}

#tableTr {
 border: 1px solid black;
 border-collapse: collapse;
 text-align: center;
 }


.tableTh {
 border: 1px solid black;
 border-collapse: collapse; 
 text-align: center;
}

#paragrafo {
  margin-bottom: 1em;
}
</style>

 <body>
 <p id="paragrafo">Olá, {{nomeVendedor}}!</p>
 <p id="paragrafo">
 Segue confirmação de transação realizada:
 </p>
 
   <table id="tabela">
    <thead id="tabelaHead">
      <tr id="tableTr">
        <th class="tableTh">Proposta Kob</th>
        <th class="tableTh">Referência Vendedor</th>
        <th class="tableTh">Descrição</th>
        <th class="tableTh">Valor Bruto Venda</th>
        <th class="tableTh">Quantidade de Parcelas</th>
        <th class="tableTh">Data/Hora Aprovação</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tableTh">{{proposta}}</td>
        <td class="tableTh">{{refVendedor}}</td>
        <td class="tableTh">{{descricao}}</td>
        <td class="tableTh">R${{valor}}</td>
        <td class="tableTh">{{parcelas}}</td>
        <td class="tableTh">{{dataAprovacao}}</td>
      </tr>
    </tbody>
  </table>
<br>
  <p>
    Por favor, responda este e-mail com o(s) XML(s) da(s) Nota(s) Fiscal(is) referentes à venda acima ou as envie para 
    <a href="mailto:[email protected]" target="_blank" style="color: #0000ff">
    [email protected]
    </a>
  </p>
<br>
  <p>
    Atenciosamente,
  </p>
  <p>
    Equipe Kob

  </p>
  </body>

 
<style>
#tabela {
 border: 1px solid black;
 border-collapse: collapse; 
 text-align: center;
}

#tabelaHead {
 background: #D3D3D3;
 color: black;
 text-align: center;
}

#tableTr {
 border: 1px solid black;
 border-collapse: collapse;
 text-align: center;
 }


.tableTh {
 border: 1px solid black;
 border-collapse: collapse; 
 text-align: center;
}

#paragrafo {
  margin-bottom: 1em;
}
</style>

 <body>
 <p id="paragrafo">Olá, {{nomeVendedor}}!</p>
 <p id="paragrafo">
 Segue confirmação de transação realizada:
 </p>
 
   <table id="tabela">
    <thead id="tabelaHead">
      <tr id="tableTr">
        <th class="tableTh">Proposta Kob</th>
        <th class="tableTh">Referência Vendedor</th>
        <th class="tableTh">Descrição</th>
        <th class="tableTh">Valor Bruto Venda</th>
        <th class="tableTh">Quantidade de Parcelas</th>
        <th class="tableTh">Data/Hora Aprovação</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tableTh">{{proposta}}</td>
        <td class="tableTh">{{refVendedor}}</td>
        <td class="tableTh">{{descricao}}</td>
        <td class="tableTh">R${{valor}}</td>
        <td class="tableTh">{{parcelas}}</td>
        <td class="tableTh">{{dataAprovacao}}</td>
      </tr>
    </tbody>
  </table>
<br>
  <p>
    Por favor, responda este e-mail com o(s) XML(s) da(s) Nota(s) Fiscal(is) referentes à venda acima ou as envie para 
    <a href="mailto:[email protected]" target="_blank" style="color: #0000ff">
    [email protected]
    </a>
  </p>
<br>
  <p>
    Atenciosamente,
  </p>
  <p>
    Equipe Kob

  </p>
  </body>

Pawan Jain•5mo ago

@Larissa Palombo I can reproduce the issue. could you please use this tool to convert this above html content css to inline css https://templates.mailchimp.com/resources/inline-css/ and then used that new html? @Larissa Palombo I would like to recommend you to try new paradigm to create workflow using code. Using this new approach you will be able to manage your email content in your code using React Email or MJML or plain html as above checkout our nextjs quickstart https://docs.novu.co/quickstart/nextjs

Larissa PalomboOP•5mo ago

@Pawan Jain its resolve convert to inline css. Thank you

Gaming

Programming

Email formatting difference in preview and trigger