# El buscador del Multilistado en tu sitio web

Búsqueda con filtros, mapa, fichas y formulario de contacto dentro de tu propio sitio, con tu logo y colores. Pegas un código una sola vez; las propiedades se actualizan solas y las solicitudes te llegan a ti.

Fuente: https://multilistado.mx/developers/widget · Actualizado: 2026-09-30 · Otro idioma: https://multilistado.mx/developers/widget.md?lang=en

## Cómo funciona

1. Creas un **widget** en [Portal → Más → Widget IDX](https://multilistado.mx/portal/widget): qué propiedades mostrar, filtros predeterminados, idioma, vista (cuadrícula, lista o mapa), colores y quién recibe las solicitudes.
2. Pegas **un código** en tu sitio. El código carga una página de multilistado.mx dentro de un `iframe`: tu sitio no guarda propiedades ni necesita actualizaciones.
3. Cada visitante ve el inventario **en vivo**. Cuando pide información o una visita, el lead llega a tu [portal](https://multilistado.mx/portal/leads) y a tu correo, con origen `widget:<ID>`.

_(Demostración en vivo en la versión HTML de esta página.)_

## Generador de código

Elige los filtros y copia el código para tu plataforma. Todo lo que no elijas usa la configuración guardada en tu widget.

_(Generador de código interactivo en la versión HTML: elige ciudad, tipo, operación, precios, vista, idioma y resultados por página, y copia el script, el iframe o el código corto de WordPress.)_

## Formas de insertarlo

### Script (recomendado)

```html
<script src="https://multilistado.mx/embed/w/TU-ID.js" async></script>
<div data-multilistado="search"></div>
```

El script busca cada `<div data-multilistado>` de la página e inserta ahí el buscador. **La altura se ajusta sola** al contenido y, al cambiar de página dentro del buscador, la vista regresa al inicio del widget. Puedes poner el `<script>` una vez (por ejemplo en el pie de página) y varios `<div>` en distintas páginas.

- `data-multilistado="search"`: barra de búsqueda + resultados.
- `data-multilistado="listings"`: solo resultados, sin barra (ideal para una página «Casas en venta en Tijuana»).
- Todo lo que escribas dentro del `<div>` (por ejemplo, un enlace a tu sitio) se conserva debajo del buscador.

### iframe

```html
<iframe src="https://multilistado.mx/embed/w/TU-ID" title="Búsqueda de propiedades" style="width:100%;min-height:900px;border:0" loading="lazy"></iframe>
```

Úsalo cuando tu plataforma **ejecuta el código dentro de su propio marco** (Wix, Google Sites y, al parecer, GoDaddy) o no permite scripts. La altura es fija: ajústala en el editor (1000–1200 px funciona bien en computadora y celular). Si tu página sí permite scripts, agrega también la línea `<script src="https://multilistado.mx/embed/w/TU-ID.js" async></script>` y el iframe ajustará su altura solo.

### Solo resultados

```html
<div data-multilistado="listings" data-ciudad="Tijuana" data-tipo="casa" data-operacion="venta"></div>
<script src="https://multilistado.mx/embed/w/TU-ID.js" async></script>
```

En iframe: agrega `bar=0` a la dirección, por ejemplo `https://multilistado.mx/embed/w/TU-ID?city=Tijuana&type=house&operation=sale&bar=0`.

## Opciones

Los filtros del código **reemplazan** los predeterminados del widget. En cuanto el visitante busca, manda lo que elija en la barra.

| Opción | Atributo del script | Parámetro del iframe | Valores |
|---|---|---|---|
| Ciudad | `data-ciudad` | `city` o `ciudad` | Texto (coincidencia parcial, sin acentos) |
| Estado | `data-estado` | `state` o `estado` | Nombre exacto, p. ej. `Baja California` |
| Colonia | `data-colonia` | `neighborhood` o `colonia` | Texto (parcial) |
| Tipo | `data-tipo` | `type` o `tipo` | `casa`, `departamento`, `terreno`, `oficina`, `local`, `bodega`, `rancho`, `edificio`, `otro` · o `house`, `apartment`, `land`, `office`, `commercial`, `warehouse`, `ranch`, `building`, `other` |
| Operación | `data-operacion` | `operation` o `operacion` | `venta`/`sale` · `renta`/`rental` |
| Precio mínimo / máximo | `data-precio-min`, `data-precio-max` | `min_price`, `max_price` (o `precio_min`, `precio_max`) | Número; se compara en la moneda de cada propiedad |
| Recámaras (mínimo) | `data-recamaras` | `bedrooms` o `recamaras` | 1–19 |
| Texto libre | — | `q` | Palabras clave |
| Idioma | `data-idioma` | `lang` | `es` · `en` |
| Vista | `data-vista` | `layout` | `grid` · `list` · `map` |
| Resultados por página | `data-por-pagina` | `per_page` | 6, 9, 12, 18, 24, 36, 48 |
| Orden | — | `sort` | `newest`, `price_asc`, `price_desc` |
| Sin barra de búsqueda | `data-multilistado="listings"` | `bar=0` | — |
| Altura inicial | `data-altura` | (estilo del iframe) | px; con el script es solo el alto mientras carga |
| Otro widget | `data-widget` | (en la dirección) | ID de 24 caracteres |

El script también acepta los nombres en inglés `data-city`, `data-state`, `data-type`, `data-operation`, `data-min-price`, `data-max-price`, `data-bedrooms`, `data-lang`, `data-per-page`, `data-layout` y `data-height`.

**Se configura en el portal, no en el código:** qué propiedades se muestran (todo el Multilistado o solo las tuyas), incluir propiedades en trato, la barra con tu logo y teléfono, colores y modo claro/oscuro, el enlace «Ver todas las propiedades», quién recibe los leads (inmobiliarias) y los dominios permitidos.

## Pasos por plataforma

Etiquetas verificadas el **2026-09-30** en la ayuda oficial de cada plataforma (enlazada). Las plataformas cambian sus menús; si algo no coincide, busca «HTML», «código» o «incrustar».

| Plataforma | Código | ¿Scripts? | Altura |
|---|---|---|---|
| [WordPress](https://multilistado.mx/developers/wordpress) | Plugin (código corto o bloque) | Sí | Automática |
| [Wix](#wix) | iframe | En marco aislado | Fija: arrastra a 1000–1200 px |
| [Squarespace](#squarespace) | Script | Sí (plan Core o superior) | Automática |
| [GoDaddy](#godaddy) | iframe | No verificado | «Altura forzada» ~1000 px |
| [Shopify](#shopify) | Script | Sí | Automática |
| [Webflow](#webflow) | Script | Sí (plan de pago) | Automática |
| [Google Sites](#google-sites) | iframe | En marco aislado | Fija: arrastra el recuadro |
| [Blogger](#blogger) | Script | Sí | Automática |
| [HTML propio](#html) | Script | Sí | Automática |

### Wix

1. En el Editor de Wix: **Agregar elementos → Código incrustado → Incrustaciones populares → Incrustar HTML**.
2. Pulsa **Ingresar código**, elige la opción de código y pega el **iframe** del [generador](#generador). Pulsa **Aplicar**.
3. Estira el elemento a todo el ancho y a **1000–1200 px** de alto (Wix no cambia la altura del recuadro sola).
4. **Publica** y revisa el sitio publicado (en el editor puede no verse igual).

En Wix Studio: **Agregar elementos → Incrustación y redes → Incrustar código**. También puedes usar **Incrustar un sitio** y pegar solo la dirección `https://multilistado.mx/embed/w/TU-ID`.

> **Nota:** Wix ejecuta el código dentro de su propio marco aislado, por eso el script no puede ajustar la altura del recuadro. El elemento no se puede poner en el encabezado ni en el pie. Si usas **Dominios permitidos**, agrega también `*.wixsite.com` y `*.filesusr.com`. Fuente: [Wix — Incrustar un sitio o un widget](https://support.wix.com/es/article/wix-editor-embedding-a-site-or-a-widget), [Wix Studio](https://support.wix.com/es/article/studio-editor-adding-an-html-iframe-element).

### Squarespace

1. Edita la página (lápiz) → **Agregar bloque** → **Código**.
2. Deja el modo en **HTML**, pega el **script** y guarda.
3. Revisa el sitio publicado o la **vista previa en modo seguro**: con sesión iniciada el código a veces no se ejecuta en el editor.

> **Importante:** Squarespace solo permite JavaScript e iframes en bloques de código en los planes **Core, Plus, Advanced** (y Commerce). En el plan **Básico** no funciona ninguna de las dos opciones: enlaza a tu sitio gratuito de Multilistado. Fuente: [Squarespace — Bloques de código](https://support.squarespace.com/hc/es/articles/206543167).

### GoDaddy (Websites + Marketing)

1. Edita tu sitio → **Agregar sección** → busca **HTML** → **Agregar**.
2. Pega el **iframe** en **Código personalizado**.
3. En **Altura forzada** escribe `1000` (vacío = automática; `0` elimina la sección).
4. Los cambios se guardan solos: pulsa **Publicar**.

Fuente: [GoDaddy — Agregar código HTML o personalizado](https://www.godaddy.com/es/help/agregar-a-mi-sitio-web-un-codigo-html-o-personalizado-27252). Que la sección se muestre dentro de un marco no está confirmado; por eso recomendamos el iframe con altura fija.

### Shopify

1. **Tienda online → Temas → Personalizar**.
2. Abre la página donde lo quieres (por ejemplo, una página «Propiedades» creada en **Tienda online → Páginas**) → **Agregar sección → Liquid personalizado**.
3. Pega el **script** y guarda.

Temas antiguos («vintage») sin esa sección: pega el script en la vista HTML del contenido de la página. Fuente: [Shopify — Personalizar temas](https://help.shopify.com/es/manual/online-store/themes/customizing-themes); la sección existe solo si tu tema la ofrece.

### Webflow

1. En el Designer abre el panel **Add (+)** → **Code Embed** (búscalo como «Embed»).
2. Pega el **script** → **Save & Close**.
3. **Publish** y revisa el sitio publicado.

Requiere un plan de sitio de pago (o un plan de Workspace Core, Growth, Agency o Freelancer); el plan gratuito no permite código personalizado. Límite: 50,000 caracteres por elemento. Fuente: [Webflow — Code Embed](https://help.webflow.com/hc/en-us/articles/33961332238611) (consultada por extractos; la página bloqueó la lectura directa).

### Google Sites

1. **Insertar → Insertar → Insertar código**.
2. Pega el **iframe** → **Siguiente** → **Insertar**.
3. Arrastra el borde del recuadro para hacerlo alto (1000–1200 px) y a todo el ancho → **Publicar**.

Google Sites muestra el código dentro de un marco propio, así que la altura no se ajusta sola. Fuente: [Ayuda de Google Sites](https://support.google.com/sites/answer/90569?hl=es). Si usas **Dominios permitidos** y el buscador no aparece, deja la lista vacía para ese widget.

### Blogger

- **En la barra lateral o el pie:** **Diseño → Añadir un gadget → HTML/JavaScript** → pega el **script** → **Guardar**.
- **Dentro de una entrada o página:** cambia el editor a la vista HTML y pega el script.

Fuente: [Ayuda de Blogger](https://support.google.com/blogger/answer/176245?hl=es).

### HTML propio, Joomla, Drupal y otros

Pega el **script** donde quieras el buscador (dentro de `<body>`). Funciona con cualquier sistema que permita HTML: Joomla (módulo «HTML personalizado»), Drupal (bloque con formato «Full HTML»), Hostinger, Jimdo, etc.

```html
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Propiedades</title></head>
<body>
  <h1>Propiedades en venta y renta</h1>
  <div data-multilistado="search"><a href="https://tu-sitio.multilistado.mx/buscar">Ver todas las propiedades</a></div>
  <script src="https://multilistado.mx/embed/w/TU-ID.js" async></script>
</body>
</html>
```

## Consejos para celular

- Pon el buscador a **todo el ancho** de la página, sin columnas laterales.
- Con iframe usa al menos **1000 px** de alto; en celular los resultados se apilan y ocupan más.
- La vista **mapa** necesita espacio: en celular es mejor cuadrícula o lista como predeterminada.
- Prueba en un teléfono real o con el modo «celular» de la [vista previa del portal](https://multilistado.mx/portal/widget).

## Cómo probar

1. Abre tu página publicada en una ventana privada.
2. Busca, cambia de página y abre una propiedad: el widget debe regresar arriba y mostrar la ficha completa.
3. Envía una **solicitud de información** con tus datos: debe llegar a [Portal → Leads](https://multilistado.mx/portal/leads) con origen `widget:<ID>` y a tu correo.
4. En el portal verás las estadísticas del widget (vistas, búsquedas, fichas vistas y leads de los últimos 30 días) y el último dominio donde se mostró.

## Solicitudes, visitas y a quién llegan

| Propiedad | ¿A quién llega la solicitud? |
|---|---|
| Tuya (o de tu inmobiliaria) | Al agente de la propiedad |
| De otro agente (widget con «Todo el Multilistado») | **A ti** (en inmobiliarias, al integrante elegido en el widget), para que colabores con el agente listador |

- **Visitas:** toda visita requiere **identificación verificada** del comprador. Dentro de tu sitio no hay sesión de Multilistado, así que la solicitud queda en espera y el comprador continúa en `multilistado.mx/cuenta/identidad` en una pestaña nueva (unos 2 minutos; vale 12 meses). Después confirmas el horario.
- El formulario no usa cookies de terceros: lleva un token temporal firmado. Límite: 10 solicitudes por hora por visitante y 300 por día por widget.

## Dominios permitidos

En el portal puedes limitar dónde se muestra tu widget (**Dominios permitidos**). Escribe uno por línea: `misitio.com` (cubre también `www.misitio.com`), o `*.misitio.com` para subdominios. Vacío = en cualquier sitio. Se aplica con la cabecera `Content-Security-Policy: frame-ancestors`, que el navegador revisa en **toda** la cadena de marcos: en Wix agrega `*.wixsite.com` y `*.filesusr.com`.

## SEO

El contenido de un iframe cuenta para multilistado.mx, no para tu sitio (y las páginas del widget llevan `noindex`). Para que tu sitio gane posicionamiento, el código incluye un **enlace normal** a tu sitio gratuito de Multilistado o a su página de zona («Ver todas las propiedades»); configúralo en el portal. Tu sitio de Multilistado tiene páginas indexables por propiedad, zona y ciudad.

## Qué se muestra (y qué no)

- Solo propiedades **publicadas** (en trato, si lo activas) de agentes con licencia verificada.
- Las de otros agentes llevan su crédito: «Listada por … · inmobiliaria · teléfono».
- Nunca se muestran propiedades cuyo propietario no autorizó otros sitios (`idx_opt_out`) ni importaciones con licencia de otros MLS.
- Ubicación aproximada en el mapa, salvo que el agente muestre la dirección exacta.

Más detalles en [Lineamientos](https://multilistado.mx/developers/guidelines).

## Widget anterior (/widget.js)

Sigue funcionando para sitios que ya lo usan, pero no recibe mejoras (sin búsqueda, mapa ni leads para ti). Muestra solo las propiedades de un agente o inmobiliaria:

```html
<script src="https://multilistado.mx/widget.js" data-agent="tu-slug" data-limit="12"></script>
```

Te recomendamos cambiarlo por el [script nuevo](#script).
