Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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">
<!-- Imagen en la parte superior de la página -->
<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">
<!-- Reemplace 'social-icon-url.png' con las URLs de las imágenes de sus íconos de redes sociales -->
<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>
<!-- Añade más iconos según sea necesario -->
</div>
<p>xxxxxxxxxx</p>
</div>
</div>
</body>
</html>
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/Dist...
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
