📄⠀ HTML para enviar como oferta de Tasator • Walcu

HTML para enviar como oferta de Tasator

Oferta de Tasator

Utiliza esta plantilla cuando quieras que el cliente reciba la siguiente oferta de Tasator en su email.

El código:

Pega el siguiente código en la sección «Enviar el siguiente email al cliente si hay valoración (formato HTML)» de Tasator y aprende cómo personalizarlo.

Personaliza tu plantilla.

				
					<!DOCTYPE html>

<head>

</head>

  <body>

    <!-- LOGO -->
    
    <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="display: block; margin-left: auto; margin-top: 40px; margin-bottom: 30px; margin-right: auto; width: 300px; border-radius: 3px" align="center" data-lazy-src="Enlace_a_tu_logo"><noscript><img decoding="async" src="Enlace_a_tu_logo" style="display: block; margin-left: auto; margin-top: 40px; margin-bottom: 30px; margin-right: auto; width: 300px; border-radius: 3px" align="center"></noscript>

	<!-- Línea divisoria -->

    <hr style="border-top: 4px; border: solid; color: #13469F; opacity: 0.2; border-radius: 3px; margin: auto; width: 65%; margin-top: 		30px; margin-bottom: 30px;" align="center">

    <div style="text-align: center; align: center">

	<!-- Título: Cambia el color del título para que se adapte a tus colores de marca (actual = color: #293241) -->

      <h2 style="color: #293241; font-size:32px; font-weight:700; font-family:Poppins; margin-bottom: 0.2em">Su valoración</h2>

	<!-- Texto previo a la valoración -->
    
      <span style="color: #000000; text-align: center; font-size:18px; font-weight:400; font-family: helveltica nue; line-height:40px; margin: 0.5em">
        {{client.name}}, la valoración de su {{car.make}} {{car.model}} es de:
      </span>

      <br> <br>
      
   	<!-- Valoración: Cambia el color de la valoración para que se adapte a tus colores de marca (actual = background-color: #EE6C4D) -->
    
      <span style="background-color: #EE6C4D; margin: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: 4.5rem; padding-right: 4.5rem; color: #000000; border-radius: 3px; font-size:20px; font-family: poppins; line-height:40px">
        <b>{{appraisal.appraisal_value}}</b>
      </span>

      <br> <br>

    </div>
    
    <!-- Texto posterior a la valoración -->

    <div style="color: #000000; text-align: center; font-size:18px; font-weight:400; font-family: helveltica nue; line-height:40px; margin: 0.5em" align="center">
      La tasación proporcionada es estimativa a falta de ver el vehículo y comprobar su estado. Número de dossier:
      <b> {{appraisal.dossier_number}}</b>
      <br>Si quiere una cita para una tasación definitiva llame al

      <!-- Números de teléfono: Pega tus números de contacto aquí -->
      
      <b> Teléfono de contacto 1</b> o <b> Teléfono de contacto 2</b>

      <!-- Dirección física: Pega aquí la dirección de tu centro -->
      
      <br>Estamos en: <b>Dirección de tu centro</b>

    </div>

	<!-- Línea divisoria -->
    
    <hr style="border-top: 4px; border: solid; color: #13469F; opacity: 0.2; border-radius: 3px; margin: auto; width: 65%; margin-top: 30px; margin-bottom: 30px;" align="center">

    <div style="text-align: center; align: center">

      <!-- Imagen centro: Pega aquí la URL de tu página web -->
      
      <a href="www.tupaginaweb.com">
      
        <!-- Imagen centro: Pega aquí la URL de una foto de tu centro -->
        
        <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" 
        style="display: block; margin-left: auto; margin-top: 50px; margin-right: auto; width: 450px; border-radius: 3px" align="center" data-lazy-src="URL_imagen_de_tu_centro"><noscript><img decoding="async" src="URL_imagen_de_tu_centro" 
        style="display: block; margin-left: auto; margin-top: 50px; margin-right: auto; width: 450px; border-radius: 3px" align="center"></noscript> 
      </a>

      	<br>

      <span>
      
        <!-- Botón "¡Ven a visitarnos!": Pega aquí la URL con indicaciones para llegar a tu centro -->
        
        <a href="URL_direccion_con_indicaciones" 
        style="color: #293241; font-size:20px; font-weight:600; font-family: Arial; text-decoration: none; padding-bottom: 1.5em; padding-top: 0.5em;" align="center">
          ¡Ven a visitarnos! 
          <br><br>
        </a>
        
      </span>

    </div>

  <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>

</html>

1. Añade tu logo.

Añade la URL de tu logo y elige el tamaño.

				
					    <!-- LOGO -->
    
    <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="display: block; margin-left: auto; margin-top: 40px; margin-bottom: 30px; margin-right: auto; width: 300px; border-radius: 3px" align="center" alt="Logo" data-lazy-src="Enlace_a_tu_logo"><noscript><img decoding="async" src="Enlace_a_tu_logo" style="display: block; margin-left: auto; margin-top: 40px; margin-bottom: 30px; margin-right: auto; width: 300px; border-radius: 3px" align="center" alt="Logo"></noscript>

2. Configura los colores del título.

Cambia el color del título para que se adapte a tus colores de marca

				
					<!-- Título -->

<h2 style="color: #293241; font-size:32px; font-weight:700; font-family:Poppins; margin-bottom: 0.2em">Su valoración</h2>

3. Configura los colores de la valoración otorgada.

Cambia el color de fondo de la valoración otorgada para que se adapte a tus colores de marca.

				
					<!-- Valoración: Cambia el color de la valoración para que se adapte a tus colores de marca (actual = background-color: #EE6C4D) -->
    
<span style="background-color: #EE6C4D; margin: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: 4.5rem; padding-right: 4.5rem; color: #000000; border-radius: 3px; font-size:20px; font-family: poppins; line-height:40px">
<b>{{appraisal.appraisal_value}}</b>
</span>

4. Añade tus números de contacto y la dirección de tu centro.

Añade tus números de teléfono y la dirección física de tu centro para que tus clientes puedan contactarte o visitarte.

				
					<!-- Pega tus números de contacto aquí -->
<b> Teléfono de contacto 1</b> o 
<b> Teléfono de contacto 2</b>

<!-- Pega aquí la dirección de tu centro -->
<br>Estamos en: Dirección de tu centro

5. Pega la URL de tu página web y la URL de una imagen de tu centro.

Añade una foto de tu centro y la URL de tu página web para que tus clientes te puedan diferenciar.

				
					<!-- Imagen centro: Pega aquí la URL de tu página web -->
      
<a href="www.tupaginaweb.com">
      
<!-- Imagen centro: Pega aquí la URL de una foto de tu centro -->
        
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" 
style="display: block; margin-left: auto; margin-top: 50px; margin-right: auto; width: 450px; border-radius: 3px" align="center" alt="Centro" data-lazy-src="URL_imagen_de_tu_centro"><noscript><img decoding="async" src="URL_imagen_de_tu_centro" 
style="display: block; margin-left: auto; margin-top: 50px; margin-right: auto; width: 450px; border-radius: 3px" align="center" alt="Centro"></noscript> 
</a>

6. Añade «Como llegar» a tu centro.

Copia y pega la URL de tu centro desde Google para que tus clientes puedan saber a donde ir.

				
					 <!-- Botón "¡Ven a visitarnos!": Pega aquí la URL con indicaciones para llegar a tu centro -->

<a href="URL_direccion_con_indicaciones" 
style="color: #293241; font-size:20px; font-weight:600; font-family: Arial; text-decoration: none; padding-bottom: 1.5em; padding-top: 0.5em;" align="center">
Ven a visitarnos! 
<br><br>
</a>

Categorías