Widget & botón

Si no querés construir la pantalla del pedido, usá la nuestra. El widget es el formulario de Rutazo, con tu color, adentro de tu página: cotiza al instante, crea la carga y le avisa a tu sistema. Tu cliente nunca sale de tu sitio.

Dos formas de ponerlo

Adentro de la página. El pedido completo, donde vos quieras: en el checkout, en la ficha de un producto, en "Envíos".

Un botón. Con la marca Rutazo y el texto que quieras. Al tocarlo se abre el pedido sobre tu página, como el botón de pago de MercadoPago.

Cómo se instala

Un script y un lugar donde ponerlo. Nada más.

<script src="https://www.rutazo.com/widget/v1.js"></script>

<!-- Adentro de tu página -->
<div id="rutazo"></div>
<script>
  Rutazo.cotizador({
    clave: 'rtz_pub_live_…',      // tu clave pública
    contenedor: '#rutazo',
  })
</script>

<!-- O el botón -->
<div id="rutazo-boton"></div>
<script>
  Rutazo.boton({
    clave: 'rtz_pub_live_…',
    contenedor: '#rutazo-boton',
    texto: 'Pedir flete',          // opcional
  })
</script>

La clave pública

El widget usa una clave pública (rtz_pub_…), distinta de la clave de la API. Viaja en el navegador, así que sólo puede hacer dos cosas, cotizar y crear cargas, y sólo desde los dominios que vos autorizás. Si alguien copia el código y lo pone en otro sitio, no funciona.

La pedís en hola@rutazo.com con la lista de dominios donde va a vivir (por ejemplo https://www.tutienda.com.ar). Con una clave rtz_pub_test_… las cargas son de prueba: no llegan a ningún transportista, y sirven para integrar de punta a punta.

Qué ve tu cliente

Un formulario corto: de dónde, a dónde, cuándo, qué carga, y sus datos de contacto. El precio aparece en vivo antes de confirmar. Al confirmar, ve "Listo, estamos buscando transportista" con su número de pedido y el link de seguimiento, donde después ve quién lleva la carga, el estado del viaje y la entrega.

Si preferís que tu cliente no reciba ningún email de Rutazo, se apaga por clave: vos le avisás desde tu sistema con lo que te llega por los eventos.

Lo que le llega a tu página

El widget le avisa a tu página en el momento, para que hagas lo que quieras con eso: guardar el pedido, mostrar el precio en tu propio checkout, mandar tu email.

Rutazo.cotizador({
  clave: 'rtz_pub_live_…',
  contenedor: '#rutazo',

  // Hay precio
  onCotizacion: function (c) {
    // c = { precio_total: 632500, moneda: 'ARS' }
  },

  // La carga quedó creada
  onCarga: function (c) {
    // c = { id: '9a74464a-…', referencia: 'RUT-2026-9A74',
    //       url_seguimiento: 'https://www.rutazo.com/p/…' }
  },
})

Opción	Qué es
clave	Tu clave pública. Obligatoria.
contenedor	Dónde va: un selector CSS (#rutazo) o el elemento.
texto	Sólo el botón: el texto al lado de la marca. Por defecto "Pedir flete".
onCotizacion	Se llama cada vez que hay un precio nuevo.
onCarga	Se llama cuando la carga quedó creada, con su id, su referencia y el link de seguimiento.

Y después

Con el id que te llega en onCarga seguís la carga desde tu sistema con la API: GET /v1/cargas/{id} te da el estado, el transportista y la entrega, y con un webhook te enterás de cada cambio sin preguntar. Está todo en la guía de la API.

Probarlo en dos minutos

1. Pedí una clave de prueba (rtz_pub_test_…).
2. Guardá esto como prueba.html y abrilo en el navegador:

<!doctype html>
<html lang="es">
<body>
  <h1>Mi tienda</h1>
  <div id="rutazo"></div>
  <script src="https://www.rutazo.com/widget/v1.js"></script>
  <script>
    Rutazo.cotizador({ clave: 'rtz_pub_test_…', contenedor: '#rutazo' })
  </script>
</body>
</html>

Eso es todo. Lo que ves ahí es exactamente lo que va a ver tu cliente.