Integración

Configuración del Widget

Todas las opciones disponibles para personalizar el comportamiento y apariencia del buscador.

KoplyConfig

El widget se configura a través del objeto global window.KoplyConfig, que debe declararse antes de cargar el script de Koply. 

<script>
  window.KoplyConfig = {
    apiKey:         'TU_API_KEY',        // requerido
    primaryColor:   '#1b60d9',           // opcional
    placeholder:    'Buscar productos...', // opcional
    locale:         'es',                // opcional
    selector:       'input[type=search]', // opcional
    resultsPerPage: 20,                  // opcional
  };
</script>
<script src="https://koply.eu/widget/koply.js" defer></script>

Referencia de opciones

Parámetro Tipo Por defecto Descripción
apiKey string — Requerido. API key del sitio. Encuéntrala en el panel en Embed code.
primaryColor string #1b60d9 Color principal del widget en formato hex. Se aplica a botones, checkboxes y precios.
placeholder string Buscar productos... Texto placeholder del campo de búsqueda dentro del widget.
locale string es Idioma de los textos de la interfaz. Valores aceptados: es, en, fr, de, pt.
selector string input[type=search] Selector CSS del campo de búsqueda al que se adjunta el widget. Cámbialo si tu web usa un selector distinto.
resultsPerPage number 20 Número de productos por página en los resultados. Máximo 50.

Cambiar el selector del campo de búsqueda

Por defecto el widget se adjunta al primer input[type=search] de la página. Si tu buscador usa un selector distinto, configura el parámetro selector: 

window.KoplyConfig = {
  apiKey:   'TU_API_KEY',
  selector: '#buscador-productos',  // ID específico
  // selector: '.mi-buscador',      // clase CSS
  // selector: 'input[name=q]',     // por atributo name
};

Personalización del color

El parámetro primaryColor controla el color de acento del widget: chips de sugerencias, checkboxes de filtros, precios y botones de acción. Usa el mismo color principal de tu marca para una integración visualmente coherente. 

window.KoplyConfig = {
  apiKey:       'TU_API_KEY',
  primaryColor: '#e85d27',  // naranja de tu marca
};
Nota: El color debe estar en formato hexadecimal de 6 dígitos (ej: #e85d27). No se admiten nombres de color CSS ni formatos rgb().

Idiomas disponibles

El widget incluye traducciones completas para los siguientes idiomas:

Quick Start ¿Dudas? support@koply.eu →