Guía de instalación

Agrega el widget de reservas de Travel404 a Carrd

Agrega una barra de búsqueda de reservas a tu sitio de Carrd con el elemento Embed. Requiere Carrd Pro Standard o superior — los niveles gratuito y Pro Lite no lo incluyen.

Guía de instalación

El elemento Embed de Carrd acepta HTML, CSS y JavaScript sin procesar, pero está restringido por nivel de plan: necesitas Pro Standard o superior. Pro Lite (el nivel pago de entrada) no lo desbloquea, ni tampoco el plan gratuito.

Antes de empezar

  • Un sitio de Carrd en el plan Pro Standard o superior.
  • Tu propiedad configurada en Travel404 con un slug (Propiedad → Motor de reservas lo muestra).

Pasos

En Travel404

  1. Copia el código del widget

    En la app de Travel404, ve a Propiedad → Motor de reservas y abre Widget de barra de búsqueda compacta. En Código de inserción, toca el ícono de copiar. Son dos líneas — un <div> y un <script> — y el slug de tu propiedad ya viene puesto, así que no tienes que editar nada antes de pegarlo.

En Carrd

  1. Abre tu sitio en el editor de Carrd

    Ve a la sección de la página donde quieres el widget.

  2. Agrega un elemento Embed

    Haz clic en Add Element (el botón +) y elige Embed.

  3. Pon Type en Code

    En la configuración del elemento, pon Type en Code (no URL).

  4. Pega el fragmento y pon Style en Inline

    Pega las dos líneas de Travel404 en el campo Code, y luego pon Style en Inline para que se muestre donde lo colocaste — Hidden lo inserta en el head/body de la página en lugar de mostrarlo.

  5. Publica

    El editor de Carrd no ejecuta el código insertado en su propia vista previa — publica el sitio y revisa la página en vivo.

El código para pegar

<div data-t404-property="your-property-slug" data-t404-mode="widget"></div>
<script async src="https://travel404.com/embed.js"></script>

Cómo saber que funcionó

Abre la página en vivo en una ventana privada/incógnito — no en una pestaña que ya tenías abierta antes de pegar el código, porque puede mostrar una versión en caché — y confirma que la barra de búsqueda carga con tu propiedad, que los selectores de fecha abren, y que Buscar lleva al huésped a una página de reserva. Si no aparece nada, revisa los pasos de arriba antes de asumir que está roto.

Si algo se ve mal

No veo la opción Embed

Probablemente estás en Pro Lite o en el plan gratuito — el elemento Embed necesita Pro Standard o superior. Revisa Account → Upgrade.

No aparece nada después de publicar

Revisa la configuración Style del elemento — si está en Hidden, el código se inserta en el head o body de la página en lugar de mostrarse visiblemente. Cámbialo a Inline.

El widget muestra una barra de desplazamiento o el calendario se corta

El elemento Embed de Carrd es una caja de tamaño fijo como la de Wix — arrástralo más alto en el editor (600px es generoso) para dejar espacio al calendario.

El widget aparece en inglés pero mis huéspedes hablan español

Agrega data-t404-lang="es" al <div> (ej. <div data-t404-property="your-property-slug" data-t404-mode="widget" data-t404-lang="es">). Ese atributo solo aplica a mode="book"; el snippet de widget de arriba siempre se muestra en inglés.

Preguntas frecuentes

¿Qué plan de Carrd necesito?

Pro Standard o superior. Pro Lite y el plan gratuito no incluyen el elemento Embed.

¿Puedo previsualizar el widget antes de publicar?

No — Carrd solo ejecuta el código insertado en el sitio publicado, no en la vista previa del editor.

¿Puedo poner el widget en más de una página?

Sí. Pega el mismo fragmento donde tenga sentido — inicio, una página dedicada de "Reservar ahora", hasta tu footer. embed.js soporta cualquier cantidad de copias en la misma página o en todo el sitio.

Míralo funcionando en tu hostel

Configúralo en 30 minutos. Sin tarjeta de crédito.