← Volver a Integraciones Integraciones · HTML simple

¿Sin backend? Sin problema.

Todo, tanto la integración como el seguimiento de campañas, funciona en el navegador con JavaScript, ya que no hay servidor que procese la clave de la empresa ni los parámetros de seguimiento.

// 01

Seguimiento en toda la web + función de recuperación

Añade esto en el <head> o justo antes de </body> de todas las páginas de tu web:

<script>
(function(){
  var KEYS = ['gclid','gbraid','wbraid','utm_source','utm_medium','utm_campaign','utm_term','utm_content','fbclid'];

  // Stores a cookie if this page has any of them in the URL
  KEYS.forEach(function(k){
    var m = new RegExp('[?&]'+k+'=([^&#]*)').exec(window.location.href);
    if(m){
      document.cookie = 'fb_' + k + '=' + m[1] + ';max-age=7776000;path=/;SameSite=Lax';
    }
  });

  // Used by the embeds below to retrieve it
  window.fbGetTrackingParams = function(){
    var qs = '';
    KEYS.forEach(function(k){
      var m = new RegExp('[?&]'+k+'=([^&#]*)').exec(window.location.href);
      var val = m ? m[1] : null;
      if(!val){
        var match = document.cookie.match(new RegExp('(^| )fb_' + k + '=([^;]+)'));
        if(match) val = match[2];
      }
      if(val) qs += '&' + k + '=' + val;
    });
    return qs;
  };
})();
</script>

// 02

Que el iframe se redimensione solo

Un iframe no crece cuando crece su contenido: si no se lo indicas, el formulario se corta en cuanto su contenido se expande (por ejemplo, al abrir el panel de opciones). Los dos códigos de integración de más abajo ya lo incluyen, pero el patrón siempre se compone de las mismas tres piezas, en este orden:

El script de redimensionado, antes del iframe
El propio iframe, con un id fijo
Un pequeño script que activa el redimensionado, después del iframe y apuntando a ese mismo id

Usa la copia del script alojada en FareBookings

app.farebookings.com/iframe-resizer/iframeResizer.min.js, no un CDN de terceros. Los bloqueadores de anuncios, los cortafuegos corporativos y los plugins de optimización a veces bloquean CDN externos, pero no el dominio donde ya vive el widget.

// 03

Widget compacto

<div id="fb-widget-container"></div>
<script src="https://app.farebookings.com/iframe-resizer/iframeResizer.min.js"></script>

<script>
(function(){
  var container = document.getElementById('fb-widget-container');
  var params = 'k=YOUR_COMPANY_KEY&lng=gb';
  var tracking = window.fbGetTrackingParams ? window.fbGetTrackingParams() : '';

  var iframe = document.createElement('iframe');
  iframe.id = 'fb-booking-widget';
  iframe.src = 'https://app.farebookings.com/booking-widget.php?' + params + tracking;
  iframe.width = '100%';
  iframe.height = '640';
  iframe.frameBorder = '0';
  iframe.scrolling = 'no';
  iframe.style.border = 'none';
  container.appendChild(iframe);

  if (window.iFrameResize) {
    iFrameResize({checkOrigin: false, heightCalculationMethod: 'lowestElement'}, '#fb-booking-widget');
  }
})();
</script>

// 04

Formulario de reserva completo

La corrección más importante de esta página

Si un widget compacto de otra parte de la web (la página de inicio, por ejemplo) envía al visitante a esta página, todo lo que ya había escrito (origen, destino, fecha, pasajeros y también gclid/utm_*) llega en la propia URL de esta página. Si la página no lo lee y no lo reenvía al iframe, se pierde todo y el formulario se carga en blanco. Esto solo se aplica cuando el widget envía a los visitantes a una página tuya que tiene el formulario integrado; si el widget enlaza directamente con app.farebookings.com, él mismo construye esa URL y nada de esto hace falta.

La solución: lee la query string de esta página con window.location.search y reenvíala completa al iframe:

<div id="fb-form-container"></div>
<script src="https://app.farebookings.com/iframe-resizer/iframeResizer.min.js"></script>

<script>
(function(){
  var container = document.getElementById('fb-form-container');
  var baseParams = 'k=YOUR_COMPANY_KEY&d=pp&lng=gb';

  // Forward EVERYTHING this page's own URL was given — this is what
  // carries the widget's data through when it redirects here.
  var ownParams = window.location.search.replace(/^\?/, '');
  var finalParams = baseParams + (ownParams ? '&' + ownParams : '');

  var iframe = document.createElement('iframe');
  iframe.id = 'fb-booking-form';
  iframe.src = 'https://app.farebookings.com/step1sslv3.php?' + finalParams;
  iframe.width = '100%';
  iframe.style.border = 'none';
  iframe.style.minHeight = '1400px';
  iframe.scrolling = 'no';
  container.appendChild(iframe);

  if (window.iFrameResize) {
    iFrameResize({checkOrigin: false, heightCalculationMethod: 'lowestElement'}, '#fb-booking-form');
  }
})();
</script>

Sustituye YOUR_COMPANY_KEY por la clave real de la pestaña Frontend de tu panel, en los dos fragmentos de arriba. Al reenviar window.location.search completa ya se transmite todo lo que envió el widget, incluidos gclid/utm_*, así que en esta página concreta no hace falta volver a usar fbGetTrackingParams().

// Opciones comunes

Modo oscuroAñade &dark=1 a params.

Panel de opciones abiertoAñade &opts_open=1 a params.

IdiomaCambia lng=gb por lng=es, lng=fr, etc.

Barra horizontalAñade &layout=inline a params en el widget (no en el formulario completo). Necesita unos 1000px de ancho y se apila solo por debajo de 900px, sin código aparte para móvil. Con este formato, pon iframe.height en '200' en lugar de '640'; si no, se verá un hueco bajo la barra durante un instante, hasta que iframeResizer la mida.

// Comprueba que funciona

Verificar que el seguimiento funciona

Visita cualquier página con ?gclid=test123 al final de la URL.
Abre la consola del navegador (F12) → escribe document.cookie.
Ahí debería aparecer fb_gclid=test123.
Navega a otra página (sin el parámetro) y confirma que la cookie sigue ahí antes de llegar al widget o al formulario.

¿Trabajas con otra plataforma?

Tenemos guías específicas para WordPress y para webs en PHP.

← Volver a Integraciones Pregúntanos por WhatsApp