Cambiar los colores de los iframes de Hubspot

 Son muchos los servicios que uan iframes para cargar contenido desde oro sitio. Un ejemplo sería Hubspot que tiene una versión gratuita hasta los 2000 contactos pero que no deja cambiar los colores de los campos del formulario.

Esto se puede solucionar vía javascript inyectando css directamente al iframe. Vamos a ver las formas que hay para hacerlo:

Con Jquery:

setTimeout(function(){

var head = jQuery("#hs-form-iframe-0").contents().find("head");
var css = '<style type="text/css">' +
'.hs-button {' +
          'border-color: #ffffff !important;' +
'background-color: #ffffff !important;'+
'color:#007396 !important;}'+
          '.hubspot-link__container{display:none;} label{color:#ffffff;} a{color:#ffffff !important;}</style>';

jQuery(head).append(css);

}, 1100);
});

Con Vanilla JS

<pre>

setTimeout(function(){

   let myiFrame = document.getElementById("hs-form-iframe-0");

   let doc = myiFrame.contentDocument;

   doc.body.innerHTML = doc.body.innerHTML + '<style>.hs-button {border-color: #ffffff !important; background-color: #ffffff !important; color:#007396 !important;} .hubspot-link__container{display:none;} label{color:#ffffff;} a{color:#ffffff !important;}</style>';

   }, 1100);

});

}</pre>

También se puede enlazar un fichero css:

<pre>window.onload = function() {

  let link = document.createElement("link");

  link.href = "style.css";      /**** your CSS file ****/ 

  link.rel = "stylesheet"; 

  link.type = "text/css"; 

  frames[0].document.head.appendChild(link); /**** 0 is an index of your iframe ****/ 

}</pre>

Cambiando el nombre del ID del iframe podéis atacar cualquier iframe ya sea el de un chat o cualquier otro servicioo que tengáis enveustra página web.