Asap Conver HTML Notification Examples

Below you will see a series of examples created for use in Asap Conver HTML notification from ChatGPT. You can use them, customize them or ask ChatGPT itself to adapt them to your needs.

All notifications are customizable directly in the code, by asking ChatGPT or from Asap Conver. Then, thanks to our software you can customize the notification to your liking and decide when and where to display it.

Being creative you will be able to create infinite notifications! Welcome to the new way of doing things

New product offer #

<img src="https://via.placeholder.com/100x100" style="float: left; margin-right: 20px; margin-bottom: 20px;">
  <div style="overflow: hidden;">
    <h2 style="margin-top: 0;">¡Nuevo producto disponible!</h2>
    <p>Descubre nuestro último lanzamiento y aprovecha esta oportunidad única. ¡Solo por tiempo limitado!</p>
    <button style="background-color: #F7C300; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 20px; border-radius: 20px;">Ver producto</button>
  </div>
  <span style="position: absolute; top: 15px; right: 15px; font-size: 24px; font-weight: bold; cursor: pointer;" onclick="this.parentElement.style.display='none';">&times;</span>
</div>

GIF notification #

<img src="https://media.giphy.com/media/13HgwGsXF0aiGY/giphy.gif" style="border-radius: 50%; width: 100px; height: 100px; margin-right: 20px;">
  <div style="overflow: hidden;">
    <h2 style="margin-top: 0; color: #1D1D1D;">¡Tenemos una sorpresa para ti!</h2>
    <p style="color: #1D1D1D;">Descubre nuestro nuevo producto y obtén un 15% de descuento en tu primera compra.</p>
    <button style="background-color: #1D1D1D; border: none; color: #F7C300; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 20px; border-radius: 20px;">Ver producto</button>
  </div>
  <span style="position: absolute; top: 15px; right: 15px; font-size: 24px; font-weight: bold; cursor: pointer; color: #1D1D1D;" onclick="this.parentElement.style.display='none';">&times;</span>
</div>

masive Social proof #

<div style="display: flex; align-items: center; margin-bottom: 20px;">
    <img src="https://via.placeholder.com/100x100" style="border-radius: 50%; margin-right: 20px;">
    <div>
      <h2 style="margin-top: 0;">¡Mira lo que dicen nuestros clientes!</h2>
      <p>"Increíble servicio al cliente. El equipo de soporte me ayudó a solucionar un problema en minutos. ¡Muy recomendado!"</p>
    </div>
  </div>
  <div style="display: flex; align-items: center; margin-bottom: 20px;">
    <img src="https://via.placeholder.com/100x100" style="border-radius: 50%; margin-right: 20px;">
    <div>
      <h2 style="margin-top: 0;">¡Nuestros clientes están encantados!</h2>
      <p>"He comprado varios productos de esta tienda y siempre he quedado muy satisfecho. La calidad es excelente y el servicio es increíble."</p>
    </div>
  </div>
  <div style="display: flex; align-items: center;">
    <img src="https://via.placeholder.com/100x100" style="border-radius: 50%; margin-right: 20px;">
    <div>
      <h2 style="margin-top: 0;">¡No te lo pierdas!</h2>
      <p>"Me encanta esta tienda. Siempre tienen los productos más novedosos y sorprendentes. ¡Muy recomendable!"</p>
    </div>
  </div>
  <span style="position: absolute; top: 15px; right: 15px; font-size: 24px; font-weight: bold; cursor: pointer;" onclick="this.parentElement.style.display='none';">&times;</span>
</div>

Simple Social Proof #

<img src="https://via.placeholder.com/50x50" style="border-radius: 50%; margin-right: 10px;">
    <div>
      <p style="margin: 0; font-weight: bold;">Nombre de usuario</p>
      <p style="margin: 0; font-size: 14px;">Acaba de comprar este producto</p>
    </div>
  </div>
  <div style="display: flex; align-items: center; margin-bottom: 20px;">
    <img src="https://via.placeholder.com/50x50" style="border-radius: 50%; margin-right: 10px;">
    <div>
      <p style="margin: 0; font-weight: bold;">Nombre de usuario</p>
      <p style="margin: 0; font-size: 14px;">Acaba de unirse a nuestra comunidad</p>
    </div>
  </div>
  <div style="display: flex; align-items: center;">
    <img src="https://via.placeholder.com/50x50" style="border-radius: 50%; margin-right: 10px;">
    <div>
      <p style="margin: 0; font-weight: bold;">Nombre de usuario</p>
      <p style="margin: 0; font-size: 14px;">Acaba de dejar una reseña de 5 estrellas en nuestro sitio</p>
    </div>
  </div>
  <span style="position: absolute; top: 15px; right: 15px; font-size: 24px; font-weight: bold; cursor: pointer;" onclick="this.parentElement.style.display='none';">&times;</span>
</div>

Disccount voucher #

<div style="background-color: #1D1D1D; color: white; padding: 20px; text-align: center;">
  <h2 style="font-size: 29px; margin-bottom: 30px;">¡Obtén un descuento del 10%!</h2>
  <p style="font-size: 16px; margin-bottom: 30px;">Usa el código DESCUENTO10 al finalizar tu compra para obtener un descuento del 10% en todos nuestros productos.</p>
  <a href="#" style="background-color: #F7C300; color: white; border: none; border-radius: 20px; padding: 10px 20px; text-decoration: none; font-size: 16px;">Ir a la tienda</a>
</div>

Call to action #

<div style="background-color: #F7C300; color: white; padding: 20px; text-align: center;">
  <h2 style="font-size: 30px; margin-bottom: 20px;">¡Descubre nuestra nueva colección!</h2>
  <p style="font-size: 22px; margin-bottom: 20px;">Explora nuestros productos más nuevos y únete a la tendencia.</p>
  <a href="#" style="background-color: #1D1D1D; color: white; border: none; border-radius: 20px; padding: 10px 20px; text-decoration: none; font-size: 20px;">Ver colección</a>
</div>

Newsletter #

<div style="background-color: #F7C300; color: white; padding: 30px; text-align: center;">
  <h2 style="font-size: 35px; margin-bottom: 30px;">¡Suscríbete a nuestro boletín!</h2>
  <p style="font-size: 20px; margin-bottom: 30px;">Mantente al tanto de las últimas noticias, lanzamientos y promociones de nuestra tienda.</p>
  <form action="#" method="post" style="display: inline-block;">
    <input type="email" name="email" placeholder="Ingresa tu correo electrónico" style="border-radius: 30px; padding: 10px; margin-bottom: 20px;">
    <input type="submit" value="Suscribirse" style="background-color: #1D1D1D; color: white; border: none; border-radius: 30px; padding: 10px 20px; cursor: pointer;">
  </form>
</div>