Search

FAQ

The most commonly asked questions about Search
This code is meant to be a starting point that can be tailored to your needs.

Many browsers support voice search natively, making it fairly straightforward for developers to implement into Clerk.io’s search features.

Below is an example script that can be used to transcribe text using a microphone. Specifically, it will insert text into Clerk.io’s Omnisearch input field.

It adds a button that, when clicked, triggers the browser’s voice recognition API and inserts the text into the input field.

You can add this script as a code block to a design editor design for an Instant Search or directly in a code design for Instant Search or Omnisearch.


<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>

Dynamic Banners #

This uses Pages with type: "banner", rendering the first banner found. Adjust HTML/CSS to match your design.

Add dynamic campaign banners in Omnisearch by providing Pages where type is banner and image points to your banner file. When a Page like this is found in a search, the banner appears above results.

  • Data sync must include Pages. See Data Feeds › Pages.
  • Each campaign banner should be a Page with:
    • type: banner
    • url: Banner landing page
    • title: Short description for accessibility/alt
    • image: Direct link to the banner file (JPG/PNG/WEBP)
    • Use text or keywords so your Page shows for matching searches

Example Page object:

{
  "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"
}

In your Omnisearch main layout (code design), add near the top to show the first banner Page:

{% 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 %}

Banner styling:

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

Good To Know #

  • No extra API call; Omnisearch includes pages. Filter by type.
  • Keep your normal Pages section if wanted. This just adds a banner.
  • Make sure your Omnisearch element returns enough pages (suggested: 6–10) for banner Pages to be available. You configure this via element settings (e.g. data-omni-search-pages).