Widgets

Los widgets para sitios web muestran tus propiedades publicadas en cualquier sitio web que ya tengas, con tu marca y en tu idioma, sin programar: pega un fragmento de código y tus visitantes pueden explorar, buscar, abrir una propiedad y enviarte una Consulta, que llega a tu CRM como un Lead "vía widget".

El fragmento

Un Tenant Admin lo arma en la Consola de Administración, en Integraciones → Widgets para sitios web: elige un widget y sus filtros, revisa la vista previa en vivo, agrega el origen de tu sitio web y copia el fragmento. Se ve así:

<script type="module" src="https://www.letsrealty.io/widgets/v1/lr.js" data-key="lr_pk_1a2b3c4d_xxxx"></script>
<lr-listings layout="grid" listing="sale" limit="6"></lr-listings>

• Carga el script una sola vez por página; todos los widgets de la página comparten su data-key. El atributo key de un widget la reemplaza.
• La clave es una clave publicable: solo funciona en los orígenes que permite, así que agrega cada sitio web (https://www.tuagencia.com) antes de publicar la página.
• El script v1 solo cambia de formas que mantienen funcionando tu fragmento, y las actualizaciones llegan a todas las páginas en minutos.

Los widgets

<lr-listings>

Tus propiedades en una cuadrícula o un carrusel.

| Atributo | Significado | | --- | --- | | layout | grid (por defecto) o carousel | | listing | sale (venta) o rent (alquiler; una propiedad en venta que también se alquila coincide con rent) | | area | el slug de ubicación de un Área, como guanacaste | | place | el slug de ubicación de un Lugar, como tamarindo; tiene prioridad sobre area | | type | un tipo de propiedad, como Condo | | featured | solo tus propiedades destacadas, en su orden de destacadas | | min-price, max-price | un rango de precio, en números enteros | | beds | al menos esta cantidad de habitaciones (de 1 a 10) | | limit | cuántas propiedades (6 por defecto, 100 como máximo) |

Los slugs de ubicación son los de los enlaces de búsqueda de tu sitio web (?location=). Un valor que no es válido se ignora en vez de romper el widget.

<lr-search>

Controles de búsqueda (operación, ubicación, tipo de propiedad, precio, habitaciones y amenidades) armados con tus propias propiedades publicadas, con los resultados y la paginación. Acepta los mismos atributos de filtro que <lr-listings> para preseleccionar los controles, más amenities (claves de amenidades separadas por comas) y limit (12 por defecto).

<lr-lead-form>

Un formulario de Consulta. Sin atributos es una consulta general; property="<id de la propiedad>" pregunta por una propiedad y agent="<id del Agente>" escribe a un Agente. Pasa por Cloudflare Turnstile antes de enviarse; solo muestra un desafío cuando Turnstile lo necesita.

<lr-listing-detail>

Una propiedad en una página de tu propio sitio web, para cuando defines detail-url (abajo). Lee el slug de la propiedad desde la dirección de la página y muestra su galería, sus datos, su Agente y un formulario de consulta. slug="…" nombra una propiedad directamente.

Abrir una propiedad

Al hacer clic en una tarjeta, la propiedad se abre en una ventana modal: sus fotos, datos, descripción, Agente y un formulario de consulta, más Ver la propiedad completa, que abre su página en tu sitio web de letsrealty. La ventana se cierra con Esc, con el botón de cerrar o con el botón de atrás del navegador, y mantiene el foco del teclado dentro mientras está abierta.

Para mostrar las propiedades en páginas de tu propio sitio web, dale a las tarjetas una plantilla detail-url con {slug} donde va el slug:

<lr-listings detail-url="/propiedades/{slug}"></lr-listings>

Las tarjetas enlazan entonces a /propiedades/casa-azul, y en esa página:

<lr-listing-detail detail-url="/propiedades/{slug}"></lr-listing-detail>

También sirve una consulta: detail-url="/listing?id={slug}". Abrir una propiedad, en la ventana modal o en una página de detalle, cuenta como una visita en las estadísticas de la propiedad.

Estilos

Los widgets se muestran dentro de un Shadow DOM, así que el CSS de tu página no los rompe, y toman los colores, las fuentes y el estilo de esquinas de tu Tema publicado. Cambia cualquiera con propiedades personalizadas de CSS sobre el elemento:

lr-listings {
  --lr-primary: #0f766e;
  --lr-primary-foreground: #ffffff;
  --lr-font-body: "Inter", sans-serif;
  --lr-radius: 4px;
}

| Propiedad | Se usa para | | --- | --- | | --lr-background, --lr-foreground | la ventana modal, los campos y el texto | | --lr-surface, --lr-border, --lr-border-strong | las tarjetas y sus bordes, los bordes de los campos | | --lr-muted, --lr-muted-foreground | los marcadores de carga y el texto secundario | | --lr-primary, --lr-primary-foreground | los botones y las etiquetas | | --lr-link, --lr-ring | los enlaces y el anillo de foco | | --lr-overlay-scrim | el fondo detrás de la ventana modal | | --lr-font-heading, --lr-font-body | los títulos y el texto | | --lr-radius, --lr-radius-button | las esquinas de tarjetas y campos, y de los botones |

Para más, dale estilo a las partes con ::part(): card, button, input, form y modal.

lr-listings::part(card) { box-shadow: none; }
lr-lead-form::part(button) { text-transform: uppercase; }

La línea "Con la tecnología de letsrealty" se puede ocultar en los planes Agency y Enterprise, desde Integraciones → Widgets para sitios web.

Idiomas

Un widget usa su atributo lang, si no el <html lang> de tu página, siempre que sea uno de tus Idiomas del Sitio, y si no tu Idioma Predeterminado. Las propiedades vienen en ese idioma cuando tienen traducción; el texto propio del widget está en inglés o en español.

<lr-listings lang="es"></lr-listings>

SEO

Los widgets se muestran en el navegador del visitante, así que los buscadores indexan tus propiedades desde tu sitio web de letsrealty, no desde la página que incluye el widget. La página de la propiedad en tu sitio web de letsrealty sigue siendo la canónica; enlaza a ella (como lo hace Ver la propiedad completa de la ventana modal) en vez de copiar el texto de la propiedad en tus páginas.