Cómo añadir Algolia InstantSearch a un sitio de Webflow sin salir del Designer

La búsqueda nativa de Webflow es una solución fiable para necesidades de contenido sencillas. A medida que tu sitio crece e incluye catálogos extensos, directorios de recursos o conjuntos de datos complejos, es posible que quieras añadir funciones de descubrimiento más sofisticadas.

También puede que quieras añadir funciones de descubrimiento más sofisticadas, como resultados en tiempo real "mientras escribes", filtrado por facetas granular y clasificación personalizada. Así, los visitantes encontrarán exactamente lo que necesitan, justo cuando lo necesitan.

La biblioteca InstantSearch.js de Algolia ayuda mediante widgets de interfaz preconfigurados (cuadro de búsqueda, lista de resultados, filtros, paginación) que se conectan al índice de búsqueda alojado en Algolia mediante una clave API pública.

Tú diseñas la estructura en Webflow, añades contenedores de widgets como elementos HTML con IDs únicos, inicializas InstantSearch con unas pocas líneas de JavaScript y Algolia se encarga del resto, devolviendo resultados en milisegundos que se actualizan con cada pulsación de tecla, con soporte completo de filtros y paginación.

En esta guía, exploramos dos enfoques: indexación estática (subir el contenido una vez mediante CSV o JSON) y sincronización dinámica (mantener automáticamente tu índice de Algolia actualizado cuando cambian los elementos del CMS de Webflow). La mayoría de los equipos empiezan con la indexación estática y añaden la sincronización más tarde.

¿Qué necesitas para añadir Algolia Instant Search a Webflow?

Necesitas un plan de Webflow de pago para acceder al código personalizado, una cuenta de Algolia con un índice poblado, y tu ID de aplicación y clave API de solo búsqueda.

Plan de Webflow con acceso a código personalizado

El elemento Code Embed (que usarás para añadir los contenedores HTML y la inicialización de JavaScript de InstantSearch) solo está disponible en los planes de pago de Webflow.

Hay dos rutas, y la mayoría de los artículos solo mencionan una. La regla de Webflow es un Workspace Core, Growth, Agency o Freelancer, o un plan de sitio activo en el propio sitio. Por lo tanto, un sitio que todavía esté en el plan Starter gratuito puede usar Code Embed si se encuentra dentro de un Workspace de pago.

Comprueba ambas opciones antes de concluir que necesitas actualizar el sitio. Ten en cuenta que Team y Enterprise son planes de plataforma en lugar de planes de sitio, por lo que se sitúan en un eje diferente de los precios de Webflow que Basic y Premium.

Una cuenta e índice de Algolia

Regístrate en algolia.com. La escala de planes es Free, Grow, Grow Plus y Elevate. El plan Free incluye 10.000 solicitudes de búsqueda al mes y 50.000 registros, y Algolia lo posiciona para un uso real, no solo para evaluación, incluyendo pequeñas tiendas.

Grow es de pago por uso con su propia asignación incluida (10.000 solicitudes y 100.000 registros) antes de que empiecen los cargos, a 0,50 $ por cada 1.000 solicitudes de búsqueda adicionales y 0,40 $ por cada 1.000 registros adicionales. Grow Plus se sitúa por encima con el mismo precio por registro, pero a 1,75 $ por cada 1.000 solicitudes adicionales, a cambio de clasificación por IA y sinónimos.

Lee la asignación de solicitudes junto con lo que construye esta guía, porque ambas interactúan de una forma que sorprende a la gente. Algolia cuenta una solicitud de búsqueda por cada pulsación de tecla en una interfaz de "mientras escribes", que es exactamente lo que te ofrece InstantSearch.

Un visitante que escribe una consulta de ocho letras gasta ocho solicitudes, por lo que 10.000 solicitudes al mes equivalen a unos pocos cientos de búsquedas reales en lugar de unos pocos miles.

Tus credenciales de API

Una vez que hayas iniciado sesión en el panel de control de Algolia, ve a Ajustes → Claves de API.

Necesitarás dos valores:

• ID de la aplicación: Identifica tu aplicación de Algolia
• Clave de API de solo búsqueda: La clave pública que puedes exponer sin riesgos en el código del frontend

Nunca utilices tu clave de API de administrador en el código del frontend.

La clave de administrador tiene acceso de escritura a tu índice y debe permanecer en el lado del servidor. La clave de solo búsqueda es de lectura. Está diseñada para integrarse en JavaScript.

Si planeas restringir la clave de solo búsqueda por dominio en el panel de control de Algolia (recomendado para producción), recuerda incluir en la lista blanca tanto tu dominio personalizado como tu .webflow.io subdominio de pruebas durante el desarrollo.

3 pasos para añadir Algolia InstantSearch a Webflow

Añadir Algolia InstantSearch a un sitio de Webflow implica crear un índice de Algolia para tu contenido, diseñar la página de búsqueda en Webflow usando elementos de inserción HTML como contenedores de widgets e inicializar InstantSearch.js con tus credenciales y widgets en la sección de código personalizado de la página.

La implementación se divide claramente en tres partes: llevar tu contenido a Algolia, crear el diseño del contenedor en Webflow y conectar el JavaScript. Los pasos 1 y 2 son una configuración única. El paso 3 es el que le da vida.

Identifica tu método de sincronización antes de empezar (estático o dinámico), ya que esto determinará si te detienes en el paso 3 o si continúas hasta el paso 4.

Usa la indexación estática (pasos 1-3 con carga de CSV) si:

• Tu contenido no cambia con frecuencia (menos de una vez al día)
• Necesitas poner en marcha la búsqueda rápidamente sin infraestructura de backend
• Tu conjunto de datos tiene menos de unos pocos miles de registros

Usa la sincronización dinámica (añade el paso 4) si:

• El contenido de tu CMS de Webflow se actualiza regularmente y los resultados de búsqueda deben estar siempre al día
• Estás creando un catálogo de productos, una bolsa de trabajo o un directorio donde se publican nuevos elementos con frecuencia

Si no estás seguro de qué camino tomar, empieza con la indexación estática. Puedes añadir la sincronización mediante webhooks más adelante sin tener que reconstruir el frontend. El código de inicialización de InstantSearch es idéntico en ambos casos.

1. Crea tu índice de Algolia y sube el contenido

Tu índice de Algolia es el conjunto de datos estructurado que hace funcionar los resultados de búsqueda. Cada elemento que quieras que aparezca en los resultados (entradas de blog, productos, recursos) debe existir como un registro en este índice.

Creación del índice

Inicia sesión en el panel de control de Algolia, haz clic en Search en la barra lateral izquierda y luego en Indices → Create Index. Ponle al índice un nombre descriptivo (por ejemplo, webflow_blog_posts, products, resources).

El nombre del índice distingue entre mayúsculas y minúsculas, y se hace referencia a él en tu código de inicialización de JavaScript.

Estructuración de tus registros

Cada registro en Algolia es un objeto JSON.

Para una entrada de blog, un registro podría verse así:

{
  "objectID": "post-slug-here",
  "title": "How to Build a Booking Form in Webflow",
  "description": "A step-by-step guide to adding a booking form using Calendly...",
  "category": "Forms & Automation",
  "url": "/blog/booking-form-webflow",
  "publishedDate": "2025-03-15"
}

objectIDes obligatorio en cada registro y debe ser único en todo el índice. Usa un identificador natural: el slug de la URL, un ID de elemento del CMS de Webflow o una combinación (por ejemplo, "blog-how-to-build-booking-form"). Si falta objectID, Algolia generará uno automáticamente, pero perderás la capacidad de actualizar o eliminar registros específicos más adelante.

Qué incluir: Título, descripción, URL (para que los resultados puedan enlazar al contenido) y cualquier campo por el que quieras filtrar (categoría, etiquetas, tipo). Mantén los registros ligeros. No envíes todos los campos de tu CMS; solo los que la búsqueda necesite para mostrar y filtrar.

Subir mediante CSV (la vía rápida)

Exporta los datos de tu CMS de Webflow como CSV (en el Diseñador de Webflow: CMS → tu colección → Exportar).

Limpia el CSV para incluir solo los campos que necesites. En el panel de control de Algolia, selecciona tu índice → Add records → Upload file.

Una limitación importante: el CSV no admite fácilmente campos de matriz de JavaScript (como etiquetas o valores de selección múltiple). Si tu contenido usa matrices para filtrar (por ejemplo, ["Design", "Development"]), usa JSON o la API en su lugar.

Subir mediante JSON (recomendado para filtrado por facetas)

Crea un archivo JSON siguiendo esta estructura:

[
  {
    "objectID": "how-to-build-booking-form",
    "title": "How to Build a Booking Form in Webflow",
    "description": "Step-by-step guide for adding booking functionality...",
    "category": "Forms",
    "tags": ["booking", "calendly", "forms"],
    "url": "/guides/build-booking-form"
  },
  {
    "objectID": "add-algolia-search-webflow",
    "title": "How to Add Algolia Instant Search to a Webflow Site",
    "description": "Add real instant search to Webflow using InstantSearch.js...",
    "category": "Search",
    "tags": ["search", "algolia", "cms"],
    "url": "/guides/algolia-instant-search-webflow"
  }
]

En el panel de control de Algolia: Index → Add records → Upload file → selecciona tu archivo JSON. Verás una confirmación que indica cuántos registros se indexaron.

Configuración de atributos buscables y facetables

Después de subir los datos, configura qué campos usará Algolia para buscar y filtrar:

1. En tu índice, haz clic en Configuration
2. En Searchable attributes, añade: title, description (en ese orden: Algolia da más peso a los atributos que aparecen primero)
3. En Atributos para facetas, añade todos los campos que planees usar para filtrar: category, tags

Este paso es obligatorio para que los refinementList widgets funcionen. Algolia no permite filtrar por atributos que no estén habilitados explícitamente para facetas.

2. Crea el diseño de la página de búsqueda en Webflow

La biblioteca InstantSearch.js de Algolia renderiza los widgets dentro de cualquier elemento HTML que tenga un ID coincidente. Tu trabajo en Webflow es crear los elementos contenedores. Luego, Algolia los rellena.

Creación de una página de búsqueda dedicada

En el Diseñador de Webflow, crea una página nueva (o usa una existente) para la búsqueda. Añade una sección con un div contenedor para tu diseño.

Estructura el diseño de la página antes de añadir los contenedores de los widgets. Un diseño de búsqueda típico utiliza una estructura de dos columnas: una barra lateral estrecha a la izquierda para los controles de filtro y un área principal más amplia a la derecha para el cuadro de búsqueda, los resultados y la paginación.

Asigna una clase a cada columna (search-filters y search-results funcionan bien). Esta estructura envolvente te permite controlar el espaciado y el comportamiento responsivo en el panel de Estilo de Webflow, en lugar de pelearte con el HTML de los widgets inyectado por Algolia mediante CSS personalizado.

En los puntos de interrupción para móviles (por debajo de 767px), cambia el diseño a vertical (dirección Flex: vertical) para que los filtros se apilen sobre los resultados en lugar de competir por el espacio horizontal.

Añadir contenedores de widgets mediante elementos de inserción HTML

Para cada widget de InstantSearch que quieras renderizar, arrastra un elemento de inserción de código (en tutoriales antiguos se llama HTML Embed) y añade un <div> con un ID único. Los IDs en las inserciones de Webflow deben coincidir exactamente con los valores de container que referencias en tu inicialización de JavaScript; ten en cuenta que distinguen entre mayúsculas y minúsculas.

Un diseño de búsqueda estándar utiliza estos contenedores:

(1) Contenedor del cuadro de búsqueda: Añade una inserción HTML en cualquier parte de la página:

<div id="searchbox"></div>

(2) Contenedor de resultados: Añade una inserción HTML en tu área de contenido principal:

<div id="hits"></div>

(3) Contenedor de paginación: Añádelo debajo del contenedor de resultados:

<div id="pagination"></div>

(4) Contenedor de filtros (opcional, para filtrado por facetas): Añádelo en una barra lateral o encima de los resultados:

<div id="category-list"></div>

(5) Botón para borrar filtros (opcional):

<div id="clear-refinements"></div>

Asigna una clase a cada inserción HTML en Webflow para posicionarla. Los divs se renderizan dentro de la inserción, por lo que dar estilo al elemento envolvente controla el diseño. Ejemplo: un diseño de dos columnas con filtros a la izquierda y resultados a la derecha.

Después de colocar las inserciones, publica la página. Los contenedores se renderizan como divs vacíos en el sitio en vivo, y el JavaScript de Algolia los completa.

3. Inicializa InstantSearch.js en el código personalizado de Webflow

Una vez colocados los contenedores, añade la librería InstantSearch.js y el script de inicialización a tu página de Webflow.

Cómo añadir scripts CDN a la configuración de la página

Abre la configuración de tu página de búsqueda (haz clic en el icono del engranaje en el panel de Páginas). Desplázate hasta Código personalizado → Código del pie de página (antes de la etiqueta </body>). Añade aquí los scripts CDN de Algolia. Esto permite cargarlos después de que el HTML de la página se haya renderizado, lo cual es necesario para que InstantSearch encuentre los elementos contenedores.

Copia y pega ambas etiquetas CDN

<script
  src="https://cdn.jsdelivr.net/npm/algoliasearch@5.57.0/dist/lite/builds/browser.umd.js"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.115.0/dist/instantsearch.production.min.js"
  crossorigin="anonymous"
></script>

Fija las versiones en lugar de seguir la última, para que una actualización del CDN no modifique tu página de búsqueda sin que tú lo despliegues. Los fragmentos de instalación de Algolia también incluyen un atributo integrity="sha256-…" junto a crossorigin; copia el par actual de su documentación si quieres integridad de subrecursos, ya que crossorigin por sí solo no verifica el archivo.

Cómo añadir el script de inicialización

Justo debajo de las etiquetas de script CDN (todavía en la sección Antes de </body>), añade tu inicialización de InstantSearch

<script>
window.addEventListener('DOMContentLoaded', function () {
  // Initialize the Algolia client using v5 lite client
  const { liteClient: algoliasearch } = window['algoliasearch/lite'];

  const searchClient = algoliasearch(
    'YOUR_APPLICATION_ID',    // Replace with your Application ID
    'YOUR_SEARCH_ONLY_API_KEY' // Replace with your Search-Only API Key
  );

  // Initialize InstantSearch
  const search = instantsearch({
    indexName: 'YOUR_INDEX_NAME', // Replace with your index name (e.g., 'webflow_blog_posts')
    searchClient,
  });

  // Add widgets
  search.addWidgets([

    // Search input
    instantsearch.widgets.searchBox({
      container: '#searchbox',
      placeholder: 'Search articles...',
      cssClasses: {
        input: 'wf-search-input',
        submit: 'wf-search-submit',
        reset: 'wf-search-reset',
      },
    }),

    // Search results
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        item: (hit, { html, components }) => html`
          <div class="wf-hit">
            <a href="${hit.url}" class="wf-hit-link">
              <div class="wf-hit-title">
                ${components.Highlight({ hit, attribute: 'title' })}
              </div>
              <div class="wf-hit-description">
                ${components.Highlight({ hit, attribute: 'description' })}
              </div>
              <span class="wf-hit-category">${hit.category}</span>
            </a>
          </div>
        `,
        empty: () => `<p class="wf-no-results">No results found. Try a different search term.</p>`,
      },
    }),

    // Pagination
    instantsearch.widgets.pagination({
      container: '#pagination',
      cssClasses: {
        list: 'wf-pagination',
        item: 'wf-pagination-item',
        selectedItem: 'wf-pagination-selected',
      },
    }),

    // Results per page configuration
    instantsearch.widgets.configure({
      hitsPerPage: 9,
    }),

  ]);

  // Start InstantSearch
  search.start();
});
</script>

Sustituye YOUR_APPLICATION_ID, YOUR_SEARCH_ONLY_API_KEY y YOUR_INDEX_NAME por los valores de tu panel de control de Algolia.

Sobre el contenedor: colocar el script en la sección Antes de </body> ya garantiza que los divs contenedores se analicen antes de que se ejecute, por lo que el oyente DOMContentLoaded es una medida de seguridad adicional aquí. Mantenlo de todos modos: no cuesta nada y hace que el código sea seguro para moverlo al <head> o a un bloque compartido en todo el sitio más adelante, que es donde realmente surge el error de contenedor no encontrado.

Cómo añadir un filtro de categoría opcional

Si configuraste un category como atributo para el facetado en el Paso 1, añade el widget refinementList a tu matriz search.addWidgets([...]):

// Category filter (requires 'category' in Attributes for Faceting)
instantsearch.widgets.refinementList({
  container: '#category-list',
  attribute: 'category',
  cssClasses: {
    checkbox: 'wf-filter-checkbox',
    count: 'wf-filter-count',
  },
}),

// Clear all active filters button
instantsearch.widgets.clearRefinements({
  container: '#clear-refinements',
  templates: {
    resetLabel: ({ hasRefinements }) => hasRefinements ? 'Clear filters' : 'No active filters',
  },
}),

Cómo añadir la hoja de estilos predeterminada de Algolia (opcional)

InstantSearch no inyecta sus propios estilos. Algolia ofrece dos temas, Algolia y Satellite, además de un reinicio básico. Añade uno en Configuración del sitio → Código personalizado → dentro de la etiqueta <head>.

Elige con cuidado, ya que ambos hacen cosas muy distintas. El reinicio solo anula los valores predeterminados del navegador (box-sizing, estilos de lista, márgenes) y deja cada widget sin estilo, que es lo que buscas si pretendes darle estilo a todo tú mismo desde Webflow.

Satellite es la hoja de estilos temática que sí da formato a los botones de paginación y a los estados de las casillas de verificación, y ya incluye el reinicio:

<!-- Unstyled baseline: reset only -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.21.0/themes/reset-min.css"
/>

<!-- Or the full theme, which bundles the reset -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.21.0/themes/satellite-min.css"
/>

Dale estilo a los widgets para que coincidan con tu diseño de Webflow

InstantSearch renderiza su propio HTML dentro de tus divs contenedores. No puedes darle estilo directamente desde el panel de Estilo de Webflow. Cada widget en el código de inicialización anterior acepta una opción cssClasses que te permite asignar tus propios nombres de clase a los elementos inyectados.

Apunta a esas clases con un bloque CSS global en Configuración del proyecto → Código personalizado → <head>:

<style>
  .wf-hit { padding: 16px 0; border-bottom: 1px solid #eee; }
  .wf-hit-title { font-weight: 600; margin-bottom: 4px; }
  .wf-hit-description { color: #666; font-size: 14px; }
  .wf-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
  .wf-pagination-selected a { font-weight: bold; text-decoration: underline; }
</style>

Consulta el estilo de widgets de Algolia para ver la lista completa de nombres de clase inyectables por widget.

Publicación y pruebas

Los efectos de código personalizado aparecen en los modos de vista previa y comentarios del Diseñador para que puedas verificar los widgets allí. La vista previa no puede decirte si el código funciona en el dominio activo, lo cual es importante aquí porque una clave de "solo búsqueda" restringida por dominio funcionará en un lugar y no en el otro. Publica en tu .webflow.io subdominio de pruebas y abre la URL activa para la prueba real.

Después de publicar, abre la página de búsqueda en un navegador, escribe en el cuadro de búsqueda y observa cómo se completan los resultados desde tu índice de Algolia.

Deberías ver:

• El cuadro de búsqueda se renderiza y acepta entradas
• Los resultados aparecen inmediatamente al cargar la página (mostrando todos los registros por defecto)
• Los resultados se actualizan a medida que escribes
• Los controles de paginación aparecen cuando los resultados superan hitsPerPage
• Las casillas de verificación de categorías aparecen y filtran los resultados si añadiste el refinementList widget

Si el cuadro de búsqueda se renderiza pero no aparecen resultados, revisa primero la consola del navegador. "Target container is not a DOM element" significa que hay una discrepancia de ID entre tus incrustaciones de Webflow y el JavaScript; "Invalid Application ID" o "Invalid API Key" significa que hay un problema con las credenciales.

4. Mantén tu índice de Algolia sincronizado con el CMS de Webflow (opcional)

Las cargas estáticas funcionan, pero cada vez que publicas o actualizas un elemento del CMS en Webflow, tu índice de Algolia queda desactualizado. Para contenido que se mantiene activamente (entradas de blog, ofertas de empleo, páginas de productos), configura un webhook de Webflow que envíe actualizaciones a Algolia automáticamente.

El repositorio de ejemplos de Webflow incluye una implementación de referencia de sincronización con Algolia construida sobre los webhooks de colección de Webflow. Léela para entender la arquitectura, no como código para copiar: se actualizó por última vez en 2023 y apunta al SDK de la API v1 de Webflow (ya obsoleto) y al cliente v4 de Algolia, por lo que no funcionará con los endpoints v2 y el cliente v5 utilizados anteriormente.

Si prefieres ejecutar toda la pila de búsqueda en el lado del servidor en lugar de desde el Diseñador, esa es una construcción diferente con sus propios pros y contras, y nuestra guía sobre búsqueda facetada te guía de principio a fin: indexación masiva y sincronización mediante webhooks como Route Handlers, sin que tu clave de administrador de Algolia salga nunca del servidor.

La arquitectura funciona en dos fases.

Fase 1 (Sincronización masiva inicial)

Un script de Node.js lee todos los elementos del CMS desde la API de Webflow, los transforma en registros de Algolia (mapeando los nombres de los campos de la colección a tu esquema de índice) y los sube usando el saveObjects método de Algolia.

El script recorre la API de CMS paginada de Webflow (la API de datos devuelve hasta 100 elementos por solicitud), transforma cada elemento en un registro de Algolia que coincide con tu esquema de índice y agrupa las subidas usando el saveObjects método de Algolia. El cliente divide automáticamente los registros en lotes de 1000.

Esa cifra es el tamaño de lote del cliente, no un límite estricto: el límite de la API es de 1 GB por lote, y Algolia recomienda apuntar a unos 10 MB por lote, lo que equivale a entre 1000 y 10 000 registros, dependiendo de lo grandes que sean los tuyos.

Una implementación mínima en Node.js:

javascript

const { algoliasearch } = require('algoliasearch');
// No fetch import needed: fetch is global on Node 18 and later,
// and node-fetch v3 is ESM-only, so require() of it throws.

const algolia = algoliasearch('YOUR_APP_ID', 'YOUR_ADMIN_API_KEY');

async function syncWebflowToAlgolia(collectionId, indexName) {
  let offset = 0;
  const limit = 100;
  let allItems = [];

  // Paginate through Webflow CMS items
  while (true) {
    const res = await fetch(
      `https://api.webflow.com/v2/collections/${collectionId}/items?limit=${limit}&offset=${offset}`,
      { headers: { Authorization: `Bearer YOUR_WEBFLOW_API_TOKEN` } }
    );
    if (!res.ok) {
      // Without this, a 429 yields no `items`, concat appends
      // undefined, and .length throws on the next line — crashing
      // on exactly the rate limit this script is meant to survive.
      throw new Error(`Webflow API ${res.status}: ${await res.text()}`);
    }

    const data = await res.json();
    allItems = allItems.concat(data.items);
    if (data.items.length < limit) break;
    offset += limit;
  }

  // Transform and upload to Algolia
  const records = allItems.map(item => ({
    objectID: item.id,
    title: item.fieldData.name,
    description: item.fieldData.description,
    category: item.fieldData.category,
    url: `/guides/${item.fieldData.slug}`,
  }));

  await algolia.saveObjects({ indexName, objects: records });
  console.log(`Synced ${records.length} records to Algolia`);
}

Reemplaza collectionId, indexName, y los nombres de las propiedades fieldData por los nombres reales de tu colección y campos de Webflow. Ejecuta este script una vez para establecer el índice base antes de configurar la sincronización en tiempo real en la Fase 2.

El límite de tasa de la API de datos de Webflow depende de tu plan de sitio: 60 solicitudes por minuto en los planes Starter y Basic, 120 en los niveles CMS, Ecommerce y Business, y límites personalizados en Enterprise. (La tabla publicada aún utiliza los nombres de planes anteriores a 2026, así que lee "Premium" donde dice CMS o Business).

Si tu colección tiene más de unos pocos cientos de elementos, añade un retraso entre las solicitudes de paginación para evitar 429 Too Many Requests errores.

Fase 2 (sincronización en tiempo real)

Un endpoint de webhook en tu aplicación Node.js escucha los eventos collection_item_created, collection_item_changed, y collection_item_deleted de Webflow. Cuando se dispara un evento, el controlador actualiza el registro correspondiente en Algolia.

Registra el webhook a través de la API de Webflow en lugar del panel de control; la interfaz de usuario de webhooks en la Configuración del proyecto solo admite los disparadores form_submission y site_publish.

Envía una solicitud POST al endpoint de creación de webhooks de Webflow (https://api.webflow.com/v2/sites/:site_id/webhooks) usando un token de sitio, con triggerType configurado en collection_item_created y tu URL de endpoint como destino.

Para equipos sin un backend en Node.js, herramientas sin código como Zapier y Make pueden escuchar los eventos del CMS de Webflow y enviar actualizaciones a Algolia mediante llamadas a la API HTTP, utilizando los endpoints de la API REST de Algolia.

¿Qué causa que Algolia InstantSearch falle en sitios de Webflow?

La mayoría de los fallos de Algolia InstantSearch en Webflow se deben a una de estas cuatro razones: falta de objectID en los registros, una discrepancia de ID entre los elementos incrustados de Webflow y JavaScript, facetas no habilitadas en los atributos de filtro, o el script de inicialización ejecutándose antes de que el DOM esté listo. Los síntomas suelen ser evidentes; las causas, no siempre.

Aquí te explicamos cómo diagnosticar los problemas más comunes.

El cuadro de búsqueda aparece pero no muestra resultados

Síntoma: El cuadro de búsqueda aparece y acepta texto, pero el contenedor de resultados permanece vacío sin importar lo que escribas.

Causa 1: el índice está vacío o los registros no son los que crees. Ten en cuenta que la falta de un objectID no es la causa aquí: Algolia genera uno automáticamente y el registro se indexa igual, por lo que los registros sin él son buscables. Lo que pierdes es la capacidad de actualizar o eliminar un registro específico más tarde, lo cual es un problema de mantenimiento, no de falta de resultados. Abre tu índice en el panel de control de Algolia y explora los registros para confirmar qué es lo que realmente se guardó.

Causa 2: Nombre de índice incorrecto en la inicialización. El indexName en tu JavaScript debe coincidir exactamente con el nombre del índice en Algolia, incluyendo mayúsculas y minúsculas. webflow_blog_posts y Webflow_Blog_Posts son índices diferentes. Copia el nombre directamente desde tu panel de control de Algolia.

Causa 3: Se usó una clave de API de solo búsqueda en la aplicación incorrecta. Las claves de API de Algolia están vinculadas a una aplicación específica. Si tienes varias aplicaciones de Algolia, verifica que el ID de la aplicación y la clave de API de solo búsqueda que estás usando pertenezcan a la misma aplicación que tu índice.

Los filtros no hacen nada al marcarlos

Síntoma: El widget refinementList muestra las casillas de verificación de categorías, pero al hacer clic en ellas no se filtran los resultados.

Causa: El atributo no se añadió a "Attributes for Faceting" en Algolia. El widget refinementList solo filtra basándose en atributos explícitamente habilitados para facetas en la configuración de tu índice. En tu panel de control de Algolia: Índice → Configuración → Attributes for Faceting — añade el nombre del atributo (por ejemplo, category) y guarda los cambios.

Este es el error de configuración más común. El widget se renderiza sin errores aunque las facetas no estén habilitadas, lo que hace que el problema sea difícil de detectar.

Error "Target container is not a DOM element" en la consola

Síntoma: La consola del navegador muestra y los widgets no se renderizan.Target container is not a DOM element,

Causa 1: Desajuste de ID entre los elementos incrustados de Webflow y JavaScript. El valor en cada configuración de widget (por ejemplo, ) debe coincidir exactamente con el atributo en tu elemento HTML incrustado de Webflow. Esta comparación distingue entre mayúsculas y minúsculas: no coincide con .container'#hits'idid="Hits"container: '#hits'

Causa 2: el script se ejecuta antes de que existan los contenedores. Esto sucede cuando mueves la inicialización al o a un bloque de código personalizado para todo el sitio sin un contenedor . En la posición Antes del del Paso 3, los contenedores ya han sido analizados, así que si ves este error ahí, primero revisa el desajuste de ID de la Causa 1.<head>window.addEventListener('DOMContentLoaded', ...)</body>

Qué construir a partir de esto

La base de InstantSearch admite varias extensiones sin tener que reconstruir nada:

• Sugerencias de autocompletado: La biblioteca de autocompletado actual de Algolia, , añade una capa de sugerencias desplegable sobre el mismo índice (la versión anterior es la v0, ya retirada)@algolia/autocomplete-jsautocomplete.js
• Estado de búsqueda basado en URL: InstantSearch tiene esto integrado en lugar de ser un paquete separado. Configura para serializar la consulta y los filtros activos en la URL, de modo que los usuarios puedan compartir o marcar resultados filtradosrouting: { router: instantsearch.routers.history() }
• Análisis de clics: Configura en tu configuración de InstantSearch para rastrear en qué resultados hacen clic los usuarios, lo que alimenta las funciones de clasificación y personalización de Algoliainsights: true
• numericMenuTipos de filtros adicionales: los widgets , y amplían el filtrado más allá de las categorías; requiere índices de réplica de Algolia para cada opción de ordenamientorangeSlidersortBysortBy
• Conjuntos de resultados con mucho contenido multimedia: vincular el índice con una CDN mantiene rápidos los resultados ricos en imágenes, lo cual cubrimos en nuestra guía de Algolia y Cloudinary

Explora los métodos de conexión entre Webflow y Algolia, y descubre cómo encaja Algolia en el ecosistema de integración más amplio de Webflow.