SearchCue
Menu
FeaturesPricingHow it worksFor WordPressDocs
Start free

Introduction

Add SearchCue to any site

What this guide covers

This guide adds SearchCue to a site by using a script tag. For a WordPress site, use the WordPress setup guide.

Part 1: Create an account

At searchcue.com, select Start free. Enter your email address. Open the sign-in link that SearchCue sends to you, then add your site.

SearchCue uses email sign-in links instead of passwords. Use the same process each time you sign in.

Part 2: Set up SearchCue

Enter your site URL, such as bobs-watermelons.com. SearchCue then crawls the site and prepares its search index.

Add the SearchCue script to the site so that visitors can use search. SearchCue provides a script for your site after you add it.

If you need help, contact support.

Part 3: Activate the search interface

Use one of these methods to open SearchCue:

  • Add a link whose destination is /search.
  • Add an input with a type of search.

The simplest method is a link to /search:

<a href="/search">Search</a>

To open SearchCue with a query already filled in, add the preferred sc-search parameter:

<a href="/search?sc-search=delivery+times">Search delivery times</a>

mnc-search is accepted too. /search and ../search links can also use q.

If a link has multiple query parameters, SearchCue uses sc-search first, then mnc-search, and finally q. An empty branded parameter prevents fallback to a lower-priority parameter.

Add sc-search to any page URL that loads the embed. Search opens with that query when you open or refresh the page.

The following destinations open the same query:

  • search:delivery%20times
  • search://delivery%20times
  • http://search:delivery%20times
  • https://search:delivery%20times

Style the link to match your site. You can also add a custom SVG icon, such as one from Heroicons.

Choose the search panel size

Open your site's design editor to choose how the panel opens:

  • Full height opens the full-height panel. This is the default.
  • Start compact opens with the search field and any required notices. The panel grows when it needs more space.

Start compact works with left, centre, and right positions, and on mobile devices. The panel keeps its largest height when you change or clear the query. Closing and reopening the panel resets its height. A small screen or an open keyboard can limit its height.

This choice does not change autocomplete or search placed within a page.

Preview design changes

On wide screens, a preview appears beside the settings. It shows the search panel or launcher over the last captured screenshot of your site. The view follows the setting you edit.

New website screenshots do not include the SearchCue launcher button. Start a new crawl to replace an older screenshot.

Before the first crawl completes, the preview shows labelled examples. It then uses live search results. Empty results and search errors do not show examples.

If the screenshot is unavailable, the preview uses a plain background.

Narrow editors hide the preview and show a notice. Changes apply to your live site as you make them. Select Open live search to open your site with a sample query. Use a second window to check each change.

Add a search input

To add a search input, use this HTML:

<input
  type="search"
  placeholder="Search my site"
  style="width: 300px; border: 1px solid #ccc; padding: 0.5rem; border-radius: 4px"
/>

Keep a filter input separate

For a filter input, use type="text" without the search-input class. Add data-searchcue-ignore to exclude it from automatic search handling:

<input type="text" aria-label="Filter items" data-searchcue-ignore>

Set the attribute in the HTML. For script-created inputs, set it before you add the input to the page. You can also set it on a containing element to exclude all inputs inside that element.

Plain text inputs also avoid automatic input detection by older search embeds. Collection inputs use this setup automatically. The autocomplete="off" attribute controls browser suggestions, not the SearchCue interface.

Install a collection

You can add a collection anywhere on an existing page or a new page.

  1. Open Collections in the site menu.
  2. Open a collection.
  3. Open Add to site.
  4. Copy the installation code.

On WordPress:

  1. Add a Custom HTML block at the required position.
  2. Paste the installation code.

On other sites, paste the installation code into the page HTML at the required position. Do not put it in the page header.

Open Appearance to change the layout and card fields. Drag a field by its dot handle to change its position. You can also focus a field and press Arrow Up or Arrow Down.

Select Platform style under Style to use your site's WordPress or Squarespace styles. WordPress products use WooCommerce markup.

Set Style for items and Control style for search, filters, and sort. The two settings are independent. Select SearchCue style to use the built-in design, or Unstyled to write your own CSS. Unstyled keeps the layout, accessible labels, and working controls.

When you select Unstyled, Information for your LLM appears below that selector. Select Copy instructions to copy guidance for a coding agent. It includes the current collection settings, the CSS selectors for this collection, and installation guidance. If both settings are Unstyled, either button copies the same instructions for styling them together. The instructions leave any Platform or SearchCue-styled part unchanged.

The preview cannot reproduce styles from your website. Check the collection on your website after installation.

Select 50%, 75%, or 100% above the preview. A lower value shows more content. These controls do not change the collection settings.

Choose content and visitor filters

Content selects the collection. Filters gives visitors choices within that collection. Search lenses do not change a collection.

Unavailable content types are disabled and show an explanation. Product content also requires support from your site's connection. Check the explanation beside a disabled switch before changing your content settings.

  1. Open Content.
  2. Select items or branches in the path tree. Use All content above the tree to select or clear everything.
  3. For content types or path and tag rules, open Show the advanced mode. The tree and Content to show stay in sync.
  4. Open Filters if visitors need choices.
  5. Select Create new filter.
  6. Name the filter in the window that opens.
  7. Enter option names in the first column and matching tags or values in the next.
  8. Choose a suggestion, or type a pattern such as News* and press Enter.
  9. Add more options in the empty rows. More rows appear as you scroll.
  10. Check the match counts, then select Create.

The filter name appears above the options on your website. Open Internal name to distinguish saved filters in the editor. For example, two filters can show Categories to visitors. Use Blog categories and Shop categories as their internal names. Select the appropriate filter for each collection.

Without an internal name, the editor uses the visitor name. Each saved filter must have a different name in the editor. Internal names are not shown to visitors or used by AI answers.

For example, /blog/* includes items under /blog/. The rule tag:News includes items with the News tag. Use /* to include all content. An empty field shows no items.

In Content to show, put ! before a rule to exclude matches. For example, combine /blog/* with !tag:Archived. This includes blog pages but excludes items with the Archived tag. Exclusions override inclusions in this mode. Exclusion rules alone show no items.

Select Show instructions for path and tag examples. The examples use the current rule mode.

Content to show suggests available indexed paths and tags. The filter table suggests available indexed values and counts matching items in this collection. Options with no available source values are hidden from visitors, but their saved definitions are kept. An option available elsewhere on the site can remain visible with no matches in this collection.

One option can match several values. Type News* to match values beginning with News; wildcard pills have a subtle dashed outline. * matches any text. Choose an autocomplete suggestion to match its exact value, even if it contains a star. When typing directly, use \* for a literal star and \\ for a literal backslash.

Suggestions hide exact values already added to the current option. Remove a value to make it available again. You can still use the same value in another option.

Values such as Medium: Ink and Medium: Pencil create an automatic Medium filter. A prefix must have at least two different options. Automatic options stay in sync with indexed content. Turn on its switch in Filters to use it in this collection.

The filter list shows each filter's name, option count, and example labels. Also used on links to the Filters section of other collections in new tabs. Use a filter's switch to enable or disable it in this collection. Drag the dot handle to reorder filters, or focus the handle and press Arrow Up or Arrow Down. Select Edit to change a filter's labels and matching values.

Each collection keeps its own order. Switching a filter off leaves it in place. You can reorder disabled filters and switch them back on without losing their positions.

Choose Hide under Filter controls at the top of the Filters tab to hide visitor filters. Your filter selections and placement are kept when you choose Show again.

Product specific filters is disabled when Products is switched off under Content. Your product filter settings are kept.

Select Suggest filters beside Create new filter to find additional custom filters. AI uses currently available content and filter values. It considers existing available filters, including those switched off in this collection, to avoid duplicate groupings. Automatic prefix filters are excluded. A loading card appears below the list, then becomes a review. Review each filter name, option label, and matching value, then select Apply suggestions. Cancel closes the card and restores Suggest filters.

Drag the small row handle to reorder options, or use its Move up and Move down menu. Tab moves through cells and their controls. Arrow keys move between rows or cells at the start or end of the text. In a matching-values cell, Alt+Up and Alt+Down choose autocomplete suggestions. In an option-name cell, they reorder the row.

AI assist in the bottom bar opens a space to describe the filter you want. Select Generate to fill the draft with suggested options, then check the names, values, and match counts before saving.

The match count beside each option shows how many items in this collection match any of its values. The collection stays visible behind the filter window; there is no separate filter preview.

Display-only changes keep the current preview session, including the visitor's search and filter choices.

Select Use Search Lens rules to use the same rule behaviour as Search lenses. In that mode, a rule excludes matches. Add ! to include matches. Inclusions override exclusions.

Collection settings save automatically. Filter changes stay in the window until you select Create or Save. Cancel, Escape, or clicking outside asks before discarding unsaved filter changes. Empty rows are ignored, and missing or invalid entries are only flagged when you try to save.

A saved filter definition can be used by several collections. Editing that definition changes every collection that uses it. Turning off a filter in one collection does not delete the definition.

To delete a custom filter from every collection, use its bin button in the filter list. Check the affected collections in the confirmation dialogue, then select Delete filter everywhere. Other filter definitions are not changed.

Saved filter definitions also help AI answers interpret indexed values. They do not automatically restrict answers or add filters to regular search.

Share a collection

Collection controls update the page URL automatically. The URL stores the query, selected filters, price range, sort order, and page.

Copy the URL from your browser's address bar to share it. Opening or refreshing that URL restores the settings. Collections with infinite scroll restore up to 20 previously loaded pages. You can continue scrolling to load more.

Each collection on the page keeps separate settings. Closing search does not clear the collection settings. The results can change when your site's content changes.

These URLs apply to public collections, not admin previews.

Programmatic activation

Developers can also activate SearchCue programmatically.

The script exposes the SearchCue object on window. Contact support if you need help with this API.

For example, this code uses an input with the ID search and renders results in an element with the ID results:

<script type="module">
  let searchcueReady = false;

  function tryInitialiseSearch(input) {
    const mount = document.getElementById("results");
    if (!mount || !window.SearchCue)
        return false;

    window.SearchCue.createCustomInterface(input, mount);
    return true;
  }

  function handleFocus(event) {
    const {target} = event;
    if (searchcueReady || target.id !== "search")
        return;

    try {
        searchcueReady = tryInitialiseSearch(target);
        if (searchcueReady)
            document.removeEventListener("focusin", handleFocus);
    } catch (err) {
        console.error("Failed to initialise SearchCue:", err);
    }
  }

  document.addEventListener("focusin", handleFocus);
</script>

Part 4: Customise SearchCue

Use the design and page exclusion editors in the SearchCue admin interface to customise search.

Regular search has no visitor filter controls. Product tags remain visible as text.

Use Collections to add collections with visitor filters. You configure these filters inside each collection, not in a separate site menu.

Get help

Contact support if you cannot complete a step or need help with a custom setup.

Previous
Overview
Next
Troubleshooting