Ejemplos de notificaciones HTML de Asap conver

A continuación verás una serie de ejemplos creados para utilizar en la notificación HTML de Asap Conver a partir de ChatGPT. Puedes utilizarlos, personalizarlos o pedirle al propio ChatGPT que las adapte a tus necesidades.

Todas las notificaciones son personalizables directamente en el código, preguntando a ChatGPT o desde Asap Conver. Después, gracias a nuestro software podrás personalizar la notificación a tu gusto y decidir cuándo y dónde mostrarla.

¡Siendo creativo podrás crear notificaciones infinitas! Bienvenido a la nueva forma de hacer las cosas

Oferta nuevo producto #

<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>

Notificación con Gif #

<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>

Social proof en masa #

  <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>

Social Proof sencillo #

    <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>

Cupón de descuento #

<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>