Instalar el botón de reserva en tu sitio web

Para esto no necesitas un programador, y no necesitas entender el código. Copias dos fragmentos de texto de Rentalbuddy y los pegas en tu sitio web. Esta guía explica exactamente adónde va cada uno y qué hacer cuando el botón no aparece.

Los dos fragmentos, y por qué necesitas ambos

Fragmento	Qué hace	Adónde va
Copiar código del motor de reservas (el script)	Carga Rentalbuddy en tu sitio web	Una vez para todo el sitio, en tus ajustes de código/pie de página globales
Copiar código del botón (el botón)	Marca el punto exacto donde debe aparecer el botón	En la página donde quieres el botón

Ninguno funciona por separado. El script sin el código del botón carga Rentalbuddy pero no muestra nada. El código del botón sin el script deja un hueco vacío en la página. Este es el error más común — los operadores copian solo el código del botón y se preguntan por qué no pasa nada. (La única excepción: los enlaces de los correos para desbloquear o ampliar una reserva funcionan sin botón.)

Antes de empezar

El botón de reserva se configura por ubicación, así que haz esto para cada ubicación que deba tener un botón en tu sitio web.

Paso 1 — Abre la configuración del Botón Reservar

En el menú izquierdo, abre Ubicaciones.
Haz clic en la ubicación que quieras.
Abre la pestaña Botón Reservar.

Paso 2 — Elige cómo reservan los clientes

En ¿Dónde reservan los clientes?, elige Mi propio sitio web.

Después, en ¿Cómo reservan los clientes desde su sitio web?, elige Integrado en tu sitio web — esta es la opción que te da el código del botón. (La otra opción, Enlace de reserva, solo te da un enlace a una página alojada por Rentalbuddy y no necesita nada de código. Si no estás seguro de poder instalar código, es una alternativa perfectamente válida.)

Paso 3 — Dile a Rentalbuddy qué creador web usas

En ¿Qué creador web usas?, elige tu creador de la lista — WordPress (tres variantes), Wix, Squarespace, GoDaddy Website Builder, Webflow, Jimdo, IONOS (MyWebsite) u Otro / no lo sé.

Esto no cambia el código. Cambia las instrucciones que se muestran junto a cada paso para que coincidan con los menús de tu creador. Elige Otro / no lo sé si nada encaja — igualmente recibes instrucciones generales.

Paso 4 — Añade el script a tu sitio web (una vez)

En el paso Añade el motor de reservas a tu web, haz clic en Copiar código del motor de reservas. Obtienes una sola línea con este aspecto:

<script defer src="https://plugin.rentalbuddy.io/static/js/main.js"></script>

Usa siempre el botón de copiar en lugar de escribirlo a mano — la copia te da la dirección exacta que usa tu cuenta.

Pégalo en el área de código global de tu sitio web, al final del body de la página. En los creadores web ese campo suele llamarse código personalizado, código de cabecera/pie, scripts de seguimiento o algo que mencione "antes de </body>". Las propias palabras de Rentalbuddy bajo este paso: "Carga Rentalbuddy en tu web. Añádelo una vez por dirección web."

Aproximadamente dónde buscar en los creadores más comunes (los nombres de menú cambian, así que tómalo como punto de partida):

WordPress — WordPress no tiene un campo integrado para esto. La guía dentro del producto recomienda instalar un pequeño plugin gratuito como Insert Headers and Footers o WPCode y usar su campo Footer / "antes de </body>". Si usas un plugin de caché, vacía la caché después de guardar.
Wix — Ajustes del sitio y la app → Código personalizado (a veces en Seguimiento y analítica), colocación Body – end, aplicado a Todas las páginas.
Squarespace — Ajustes → Avanzado → Inyección de código → Pie de página. No todos los planes de Squarespace incluyen la inyección de código.

Después guarda y publica tu sitio.

Pega el script una sola vez. Las copias de más se ignoran, así que un duplicado no rompe nada — pero ralentiza la página y hace confuso saber qué copia hay que sustituir si más adelante necesitas la versión para banner de cookies o la asíncrona que se describen más abajo. Si no estás seguro de si ya está puesto, busca rentalbuddy en tus campos de código globales antes de añadir otra copia.

Un sitio web con varias páginas: pégalo una vez, para todo el sitio. Varios sitios web separados: pégalo una vez en cada sitio web.

Paso 5 — Introduce la dirección de tu sitio web

En el paso Coloca el botón donde quieras que aparezca encontrarás el campo URL donde está implementado el botón de reservar. Introduce la dirección completa de la página donde estará tu botón — por ejemplo https://tusitio.com/reservas.

Reglas que el sistema impone:

Debe empezar por https:// o http://. Sin eso, el guardado falla con "La URL debe empezar por https:// o http://."
No debe contener un ?. Esto suele pasar cuando pegas un enlace de vista previa o de prueba. Borra todo desde el ? en adelante.
Es obligatorio. Sin él no puedes guardar la ubicación en modo integrado.

Este campo importa más de lo que parece. Rentalbuddy construye los enlaces que envía en los correos — iniciar alquiler, devolver, ampliar, cambiar la hora — tomando esta dirección y añadiéndole información. Si la dirección apunta a una página que no contiene el código del botón, tus clientes acaban en esa página y nunca llegan a su código PIN ni al paso de devolución. Si cambias la dirección a mitad de temporada, los enlaces ya enviados apuntarán a la página antigua.

Paso 6 — Pon el botón en la página

Todavía en Coloca el botón donde quieras que aparezca, haz clic en Copiar código del botón junto a Reserva estándar. Obtienes una línea así:

<div id="rentalbuddy-checkout" data-site="your-location-id"></div>

Pégala en la propia página — en un bloque HTML / Embed / Código de tu editor de páginas, en el punto exacto donde debe aparecer el botón. No en los ajustes globales del sitio; ahí es donde fue el script del paso 4.

En Avanzado (solo si hace falta) hay dos códigos de botón más: Reserva de producto y Reserva de eventos. Úsalos solo si tu ubicación ofrece tanto productos como eventos y quieres un botón que se salte la elección. Si no, Reserva estándar es el correcto.

Guarda y publica la página.

Paso 7 — Compruébalo

Haz clic en Ahorrar en Rentalbuddy.
Haz clic en Vista previa junto a la opción de reserva — abre tu sitio web en una pestaña nueva con el flujo de reserva para que compruebes que la integración funciona.
Abre también tu página con normalidad, en una ventana privada o de incógnito, para verla como la ve un cliente y no desde la caché.

El texto y el aspecto del botón

Hay dos cosas del aspecto del botón que sorprenden a casi todo el mundo.

Si nunca defines un texto, el botón dice BOOK, en mayúsculas. Esa es la etiqueta de respaldo integrada, no una decisión de estilo tuya. Ponle una etiqueta como es debido en Texto del botón, en esa misma pestaña:

Para esta ubicación: activa Personalizar para esta ubicación y rellena Texto predeterminado. En Ajustes avanzados hay campos Texto para productos / Texto para eventos aparte para los códigos de botón avanzados.
Para todas las ubicaciones a la vez: usa Editar texto para la cuenta.

Dos comportamientos que conviene conocer. Con Personalizar para esta ubicación desactivado se usan los textos de la cuenta y los campos de la ubicación ni siquiera se muestran. Y vaciar todos los campos de la ubicación con el interruptor activado también hace que se vuelva, sin avisar, a los textos de la cuenta.

La hoja de estilos de tu sitio web puede reestilizar el botón. El botón es un elemento de botón corriente en tu página. Sus colores y sus fuentes se definen directamente sobre el elemento, así que los estilos normales de tu sitio no los cambian — pero las reglas marcadas con !important, y las propiedades que el botón deja sin definir (como poner el texto en mayúsculas), sí llegan a aplicarse. Así que si el texto sale en mayúsculas aunque lo hayas escrito en minúsculas, es la hoja de estilos de tu sitio, no Rentalbuddy. Usa Estilo del botón (en esa misma pestaña) para definir su aspecto de forma explícita, y comprueba el resultado con Vista previa.

Los cambios de texto y de estilo no obligan a volver a copiar ningún código: surten efecto la próxima vez que se carga la página.

Qué significa realmente la marca roja

La pestaña Botón Reservar (y la columna URL del botón Reservar de la lista de Ubicaciones) muestra una marca roja hasta que la configuración está completa — y los operadores pelean con ella una y otra vez en el sitio equivocado, por culpa de un malentendido:

La marca roja o verde nunca mira tu sitio web. Rentalbuddy no visita tu sitio ni detecta si el código está instalado. La marca solo refleja lo que está guardado en el admin:

Integrado en tu sitio web: verde en cuanto haya guardada una URL donde está implementado el botón de reservar válida (empieza por http(s)://, sin ?).
Enlace de reserva: siempre verde.
La opción de sitio web alojado por Rentalbuddy: verde en cuanto ese sitio web esté activado.

Así que si la marca "sigue roja aunque el botón está en nuestro sitio": el sitio web es irrelevante — la causa es un campo de URL sin guardar, vacío o no válido. Rellénalo, pulsa Ahorrar, y cambiará. El tooltip te dice en cuál de los casos estás: "Elige cómo reservan los clientes y completa la configuración del botón Reservar." (no has elegido nada o falta la URL) o "La URL debe empezar por https:// o http://." Y al revés: una marca verde no demuestra que el código esté en tu sitio — Vista previa es la herramienta que abre de verdad tu página y muestra si el botón funciona.

Problemas habituales

Si usas un banner de cookies, puede retener el script de Rentalbuddy hasta que el visitante acepte las cookies — así que el botón aparece tarde o no aparece. Rentalbuddy avisa exactamente de esto: "Si el botón de reserva no aparece y usas un banner de cookies, tu sitio puede estar bloqueando el script hasta que los visitantes acepten las cookies."

En Avanzado (solo si hace falta) → Herramientas de consentimiento de cookies hay versiones ya preparadas del script para dos herramientas comunes: Copiar para Cookiebot y Copiar para OneTrust. Sustituye el script que pegaste en el paso 4 por el que corresponda.

Para cualquier otra herramienta de cookies: en los ajustes de tu banner, marca el script de reservas (o el host plugin.rentalbuddy.io) como estrictamente necesario o esencial. No hace falta recategorizar cookies individuales.

El botón aparece pero se comporta de forma extraña

En Avanzado (solo si hace falta) → Carga del script puedes copiar dos versiones alternativas del mismo script: Copiar con async y Copiar sin defer. Prueba una de ellas en lugar de la estándar — de nuevo, sustituyendo la copia que ya pegaste, nunca añadiendo otra.

Quieres un botón en una segunda página

El script ya está cargado para todo el sitio, así que solo necesitas el código del botón. Pega el mismo código del botón en un bloque HTML/Embed de la otra página.

Ten en cuenta que el campo URL donde está implementado el botón de reservar guarda una sola dirección por ubicación. Elige la página a la que quieres enviar a los clientes desde los correos de reserva — esa es la página que abrirán los enlaces del correo.

Quieres un botón en una versión de tu página en otro idioma

Igual que arriba: pega el código del botón en la versión de la página en ese idioma. Si el segundo idioma vive en un sitio web aparte (un dominio distinto), ese sitio necesita su propia copia del script.

Qué idiomas ofrece la propia ventana de reserva es un ajuste independiente de la ubicación — consulta Ajustes de la cuenta: dónde vive cada ajuste.

Tienes más de una ubicación

Cada ubicación tiene su propio código de botón (el valor data-site es distinto) y su propia dirección web. Copia el código del botón desde la pestaña Botón Reservar de esa misma ubicación. El script en sí es el mismo para todas, así que sigue yendo una sola vez por sitio web.

Lista de comprobación: el botón no aparece

Recorre esta lista en orden.

¿Están instalados los dos fragmentos? El script en los ajustes globales del sitio, y el código del botón en la página. Que falte el script es la causa más común.
¿Publicaste? La mayoría de los creadores necesitan un Publicar/Actualizar explícito después de guardar, y hay que vaciar los plugins de caché.
¿Está el script más de una vez? Busca rentalbuddy en tus campos de código globales. Elimina todas las copias menos una.
¿La ubicación está configurada como reserva integrada? Abre Ubicaciones → la ubicación → Botón Reservar y confirma que Mi propio sitio web → Integrado en tu sitio web está seleccionado y guardado. Si la pestaña Botón Reservar muestra un aviso rojo, la configuración guardada está incompleta — consulta Qué significa realmente la marca roja más arriba; se trata del campo de URL guardado, nunca de tu sitio web.
¿La dirección web es válida? Debe empezar por https://, no debe contener un ? y debería ser la página que realmente tiene el código del botón.
¿La está bloqueando un banner de cookies? Prueba la versión Cookiebot u OneTrust del script, o márcalo como estrictamente necesario en tu herramienta de cookies.
Prueba otra opción de carga. Cambia el script por la versión async o sin defer.
Compruébalo en un móvil y en una ventana privada. Las páginas en caché y las extensiones del navegador pueden ocultarlo.
¿Hay algo realmente reservable? El botón puede estar bien instalado y aun así no tener nada que vender si la ubicación no tiene ningún periodo abierto ni productos. En ese caso el cliente no ve una ventana en blanco: ve "Esta estación de alquiler no está disponible para reservas en este momento." con los datos de contacto de tu ubicación. Consulta Horarios de apertura y fechas abiertas y Los clientes no ven horarios disponibles, o no ven ningún producto.
¿Sigues atascado? Envía a soporte la dirección de tu página e indica qué creador usas — las dos cosas que determinan todo lo anterior.