topic HTML code Email Message Body Problems, HTML code botton of the question in Qlik NPrinting

HTML code Email Message Body Problems, HTML code botton of the question

angelfer90 — Mon, 22 Jan 2024 10:03:56 GMT

Hi everyone,

I have HTML code which originates the following page.
(Screenshot below)

However, when I copy the HTML code in the "body" option inside "Email Message" configuration of Qlik N Printing Publish Task, it changes (somehow) the code and when it sends the email, it loses every format.

Like this

Anyone knows what is happening and what could I do to send the email with Qlik N Printing with the desireable format?

Thank you all in advance.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #ffffff;
}
.top-image {
width: 100%; /* Asegura que la imagen se extienda a lo ancho del contenedor */
display: block; /* Evita márgenes indeseados alrededor de la imagen */
}
.header {
background: #ffffff;
padding: 10px;
text-align: center; /* Añadido para centrar el contenido del encabezado */
}
.header img {
width: 80%; /* Ajusta este valor para cambiar el tamaño del logo */
max-width: 200px; /* Añadido para limitar el tamaño del logo */
height: auto; /* Asegura que la altura se ajuste automáticamente */
}
.content {
padding: 20px;
}
.promotion-conditions {
background-color: #cfeeff; /* Este es el azul claro */
color: #000000;
padding: 15px;
font-size: 14px;
text-align: center;
}
.footer {
background: #000000;
color: #ffffff;
padding: 20px;
text-align: center;
font-size: 12px;
}
.social-icons img {
margin: 0 10px;
}
.button {
display: inline-block;
padding: 10px 20px;
margin: 10px 0;
background-color: #009a3d;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
.container {
width: 95%;
}
}
</style>
</head>
<body>
<div class="container">

<div class="top-image-container">
<img class="top-image" src="xxxxxxxx" alt="xxxxx">
</div>
<div class="header">
<a href="xxxxx" target="_blank"><img src="xxxxxxg" alt="xxxx"></a>
</div>
<div class="content">
<h1>xxxxxxx</h1>
<p>Queremos que disfrutes de un 20% de descuento en el importe de tu próxima compra en nuestra tienda online. Para que se aplique correctamente, recuerda introducir el siguiente código durante el proceso de compra.</p>
<p><strong>Código: </strong><span>codigo-de-cupon</span></p>
<a href="xxxxxx" class="button">Canjear en tienda</a>
</div>
<div class="promotion-conditions">
<p>Condiciones de la promoción: El código no es válido para la compra de productos principales. Código no acumulable a otros descuentos. Válido para una sola compra hasta el 31 de diciembre de 2024.</p>
</div>
<div class="footer">
<div class="social-icons">

<a href="xxxxxxxxx" target="_blank"><img src="xxxxx" alt="Facebook"></a>
<a href="xxxxxx" target="_blank"><img src="xxxxx" alt="Instagram"></a>
<a href="xxxxx" target="_blank"><img src="xxxxxxxx" alt="TikTok"></a>

</div>
<p>xxxxxxxxxx</p>
</div>
</div>
</body>
</html>

Re: HTML code Email Message Body Problems, HTML code botton of the question

Lech_Miszkiewicz — Mon, 22 Jan 2024 12:40:19 GMT

Hi @angelfer90

There are few things to consider and all of them were already dicussed here on community.

1. Have you checked if you mail client supports everything what you do in your styles and html. This varies significantly between different mail clients liek (outlook on windows, web or mac, thunderbird, gmail, mail on mac, mail on windows, mobile ios, mobile android, web browser (chrome, edge, thunderbird etc...). The fact that you have html working in chrome does not mean it will work in outlook. In fact many things are not supported by outlook but that is not NPrinitng problem and purely html/css support in those clients. I normally use tools like this one to check compatibility: https://www.campaignmonitor.com/css/

2. Have you selected right format in the settings: https://help.qlik.com/en-US/nprinting/May2023/Content/NPrinting/DistributionSchedulesAutomation/DistributingReportsbyEmail.htm#anchor-3

3. For well formated emails I normally attach them as reports, which means that instead of creating email content in the email section of publish task I just create HTML report where I place all required code. Important: only part of the report between <body> tags makes its way to email content.

Cheers

Re: HTML code Email Message Body Problems, HTML code botton of the question

angelfer90 — Mon, 22 Jan 2024 14:18:29 GMT

Hi, Thank you for your answer.

Regarding 1 point, I´m sure that mail client which is going to receive the email is not the problem, because I already send the same message with other tools to this client.

Respect point 2, and thats the key, of course I select HTML format, and then If I don´t select anything it sends the literal code, but when I tried toogle between HTML/ Rich Text is when the problem happens, it renders the code as is going to appear in the email which it sends, and in the render somehow loses the format.

I also try without CSS, but whatever I did it loses the format, I copy the code, I try toogle between HTML/ Rich and then the format dissapears.

Re: HTML code Email Message Body Problems, HTML code botton of the question

Lech_Miszkiewicz — Mon, 22 Jan 2024 22:35:39 GMT

@angelfer90 - what about my point 3?