FAQ

<button class="mic-button" onclick="startVoiceSearch()">🎙️</button>

<script>
function startVoiceSearch() {
    if (!('webkitSpeechRecognition' in window)) {
        alert("Your browser does not support voice recognition.");
        return;
    }

    let recognition = new webkitSpeechRecognition();
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    recognition.onstart = () => console.log("Listening...");
    recognition.onerror = (event) => console.error("Speech Recognition Error:", event);
    recognition.onend = () => console.log("Speech recognition ended.");
    recognition.onresult = function(event) {
        let transcript = event.results[0][0].transcript;
        updateSearchInput(transcript);
    };
    recognition.start();
}

function updateSearchInput(text) {
    let input = document.getElementById("clerk-omnisearch-input");
    input.value = text;
    // Trigger events for search to update properly
    ['input', 'change', 'keydown', 'keyup'].forEach(eventType => {
        let event = new Event(eventType, { bubbles: true });
        input.dispatchEvent(event);
    });
    console.log("Voice input added:", text);
}
</script>

## Mostrar un banner en la parte superior de Omnisearch desde resultados de Páginas

  Este ejemplo utiliza Páginas con type: "banner" y muestra el primer banner coincidente sobre los resultados. Adapta el HTML/CSS para que se ajuste a tu diseño.



Puedes mostrar banners dinámicos de campaña en Omnisearch enviando Páginas con el `type` establecido como `banner` y una `image` que apunte a tu recurso de banner. Cuando un visitante realiza una búsqueda y se devuelve una Página coincidente de este tipo, el diseño la muestra en la parte superior.

### 1) Crear Páginas de banner
- Asegúrate de que tu sincronización de datos incluya Páginas. Consulta la estructura del objeto en [Data Feeds › Pages](/integrations/any-webshop/data-feeds/#pages).
- Para cada banner de campaña, envía una Página con al menos:
  - `type`: `banner`
  - `url`: URL de destino del banner
  - `title`: Título corto para accesibilidad/texto alternativo
  - `image`: URL completa de la imagen del banner (JPG/PNG/WEBP)
  - Agrega palabras clave relevantes en `text` o `keywords` para que la Página coincida con las búsquedas deseadas

Ejemplo de objeto Página (extracto):

```json
{
  "id": 9876,
  "type": "banner",
  "url": "https://yourstore.com/campaigns/spring-sale",
  "title": "Spring Sale – Up to 30% on Adidas",
  "text": "spring sale adidas shoes sneakers trainers",
  "image": "https://yourstore.com/cdn/banners/spring-sale-adidas.webp"
}

{% assign bannerShown = false %}
{% for page in pages %}
  {% if page.type == "banner" and bannerShown == false %}
    <a class="os-banner" href="{{ page.url }}" aria-label="{{ page.title }}">
      <img src="{{ page.image }}" alt="{{ page.title }}" loading="lazy" />
    </a>
    {% assign bannerShown = true %}
  {% endif %}
{% endfor %}

.os-banner { 
  display: block; 
  margin: 0 0 16px 0; 
}
.os-banner img { 
  width: 100%; 
  height: auto; 
  border-radius: 8px; 
  display: block; 
}