GUÍA DE INSTALACIÓN

Tu localizador, dentro de tu sitio

El diseño, las ubicaciones y el inventario se administran en Kromaps. Instala el código una vez; los cambios guardados aparecerán en el mismo localizador.

Antes de copiar el código

  1. Selecciona la marca correcta.

    Entra en Localizador y comprueba logo, filtros, botones y las vistas de escritorio y móvil.

  2. Publica y guarda.

    Abre Publicar, activa Publicar localizador y guarda el diseño. Comprueba el enlace público en otra pestaña.

  3. Elige la altura de instalación.

    Empieza con 780 px. El mapa tiene su propia altura en Estilo. Aumenta la instalación si el marco corta información o necesita demasiado desplazamiento.

  4. Copia el código guardado.

    Después de guardar, usa Copiar código guardado. El código incluye la marca, su enlace y la altura actual.

Dónde pegarlo

En cualquier sitio que acepte HTML, añade un bloque HTML o código e inserta el iframe. Usa todo el ancho del contenedor.

WordPress

Usa un bloque HTML personalizado. En un constructor visual, usa su bloque o widget HTML. Tu cuenta debe tener permisos para insertar un iframe; algunas configuraciones lo eliminan al guardar.

Documentación de HTML personalizado

Shopify y otros constructores

Usa una sección que admita HTML o Liquid personalizado, si el tema lo permite. Pega el iframe y revisa la página publicada. Si el editor elimina el código, solicita al administrador del sitio que lo añada en el tema.

Documentación de secciones en Shopify

Comprueba la página publicada

  • Logo, colores y tipografía corresponden a la marca.
  • Hay ubicaciones visibles y una búsqueda por ciudad encuentra la correcta.
  • Los filtros, los marcadores y los botones funcionan en móvil.
  • Los enlaces de contacto y compra en línea llevan al sitio esperado.
  • Cerca de mí pide permiso sólo cuando lo eliges; el sitio debe usar HTTPS.
  • El token público de Mapbox permite el dominio de Kromaps y el sitio del cliente.

Una instalación por etiquetas

En Localizador → Publicar → Instalación por etiquetas, elige los productos o servicios que quieres mostrar. Selecciona si cada ubicación debe tener todas las etiquetas o cualquiera de ellas. El contador indica las sucursales activas que coinciden; abre la vista previa y copia el código filtrado.

La instalación conserva este filtro al limpiar una búsqueda. Las ubicaciones siguen administrándose en la misma marca y utilizan su diseño guardado. Este filtro es de presentación, no un permiso: el enlace público general sigue disponible. Sin seleccionar etiquetas se muestra la red completa.

Elementor, Wix y Squarespace

El centro de instalación incluye instrucciones específicas para estas plataformas. En Elementor usa el widget HTML. En Wix utiliza Insertar HTML y ajusta el contenedor. En Squarespace utiliza un bloque de Código en HTML; el plan del sitio debe admitir iframe.

Webflow

Añade un elemento Code Embed a la página, pega el iframe y publica el sitio. Usa el ancho completo del contenedor; revisa el resultado fuera del editor.

El centro de instalación

En Localizador → Publicar encontrarás el Centro de publicación e instalación. Comprueba las ubicaciones activas y sus coordenadas, guarda el diseño y elige tu plataforma para consultar los pasos y copiar el código guardado.

Introduce la página HTTPS del cliente donde instalarás el localizador. Guardamos su dominio para consultar las visitas, búsquedas y acciones de los últimos 30 días. Por ejemplo: https://marca.com/ubicaciones. Los parámetros y fragmentos se eliminan del enlace guardado.

Abre la página publicada, realiza una búsqueda y vuelve al centro para pulsar Actualizar actividad. Copiar el código o abrir el localizador directamente no confirma la instalación. La demo y la vista previa del editor no generan estas visitas.

La actividad detectada es una señal de uso; no verifica la propiedad del dominio ni garantiza que el diseño esté correctamente instalado. Si el sitio utiliza otro subdominio, guarda el enlace final correspondiente. Si su política de privacidad oculta la referencia de origen, las visitas no podrán atribuirse a ese dominio.

Tu instalación, paso a paso

El centro distingue seis pasos: ubicaciones válidas, publicación guardada, versión de producción, página del cliente, actividad desde su dominio y revisión manual de la experiencia.

En Revisa la experiencia confirma sólo lo que hayas probado: navegación móvil, búsqueda y selección, y enlaces de contacto. Guarda la revisión para retomarla después. Cambiar la página o guardar otro diseño reinicia estas confirmaciones.

Una visita desde el dominio es una señal de uso del iframe, no una comprobación de la página exacta ni de su apariencia. Abre la web publicada sin sesión de administrador y prueba Cerca de mí tanto permitiendo como rechazando la ubicación. La versión de revisión puede tener protección de Vercel; no cuenta como producción pública.

La experiencia móvil

El mapa se muestra primero y utiliza más altura. Cambia entre Mapa y Ubicaciones; al seleccionar una sucursal en la lista volverás al mapa. Filtros abre las opciones cuando las necesitas y Más opciones del mapa reúne los controles secundarios. El detalle permite recorrer sucursales y consultar Cómo llegar.

Si no aparece

Abre primero el enlace del iframe. Si funciona, revisa que el editor haya conservado el código y que la política de seguridad del sitio permita cargar el dominio de Kromaps. Un dominio de prueba protegido por Vercel puede exigir iniciar sesión: comprueba el acceso con quien administrará el piloto.

Si cambias el enlace público de la marca, tendrás que copiar e instalar el nuevo código. Cambiar sólo estilos o ubicaciones no requiere reinstalarlo.