---
title: Coveo Global Searchbox
slug: '3040'
canonical_url: https://docs.coveo.com/en/3040/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Global Searchbox
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

The **{doctitle}** rendering implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [Omnibox](https://coveo.github.io/search-ui/components/omnibox.html) component.
The **{doctitle}** rendering also provides data source options so you can configure it as a global searchbox.

The **{doctitle}** rendering triggers search and query suggestion calls to the Search API through the reverse proxy.

## Usage notes

* Ensure you set the `Override search hub` data source value properly (see [About the search hub](https://docs.coveo.com/en/3302/)).

* When used solely in article pages, the **{doctitle}** is initialized as a standalone search box which redirects to the search page specified in the `Search page URI` data source field (see [Scenario 1: Different search boxes in and out of the search results page](https://docs.coveo.com/en/2329/?c4scV5HiveType=tab-hive#scenario-1-different-search-boxes-in-and-out-of-the-search-results-page)).

* When used in both your article and search results page header, insert the **{doctitle}** rendering in an **External Components Section**.
This links the **{doctitle}** to the Coveo Search Interface specified in the **External Components Section** data source and ensures the **{doctitle}** behaves as if it were inserted within that Coveo Search Interface (see [Scenario 2: Same search box in and out of the search results page](https://docs.coveo.com/en/2329/?c4scV5HiveType=tab-hive#scenario-2-same-search-box-in-and-out-of-the-search-results-page)).

* You can [customize the CSS](https://docs.coveo.com/en/2342/) associated with this rendering.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>When adding the <strong>Coveo Global Searchbox</strong> solely to your article headers, insert the <strong>Coveo Global Searchbox</strong> rendering as illustrated in the video below.</p>
  <p>When linking the <strong>Coveo Global Searchbox</strong> to a search interface, the <strong>External Components Section</strong> rendering adds a <code class="highlighter-rouge">Global Searchbox</code> placeholder. Insert your <strong>Coveo Global Searchbox</strong> rendering in this <code class="highlighter-rouge">Global Searchbox</code> placeholder.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/global-searchbox-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="footnote">
    Example insertion sequence for the <strong>Coveo Global Searchbox</strong> rendering. A placeholder whose <code class="highlighter-rouge">Placeholder Key</code> value is <code class="highlighter-rouge">ArticleHeaderPlaceholder</code> was created and its Allowed Controls were edited to include the <strong>Coveo Search Resources</strong> (a mandatory rendering), <strong>Coveo Global Searchbox</strong>, and <strong>Coveo Page View Analytics</strong> renderings. The <code class="highlighter-rouge">ArticleHeaderPlaceholder</code> was inserted in an article layout .cshtml file. This insertion sequence applies to scenario 1 in <a href="{{ site.baseurl }}/2329/" >Insert and configure a global search box</a> in which the <strong>Coveo Global Searchbox</strong> is added solely to your article headers.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>When adding the <strong>Coveo Global Searchbox</strong> solely to your article headers, insert the <strong>Coveo Global Searchbox</strong> rendering in the partial design <code class="highlighter-rouge">header</code> Sitecore placeholder.</p>
  <p>When linking the <strong>Coveo Global Searchbox</strong> to a search interface, the <strong>External Components Section</strong> SXA rendering adds a <code class="highlighter-rouge">coveouiexternalcomponentssxa</code> placeholder. Insert your <strong>Coveo Global Searchbox</strong> rendering in this <code class="highlighter-rouge">coveouiexternalcomponentssxa</code> placeholder.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/global-searchbox-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="footnote">
    Example insertion sequence for the <strong>Coveo Global Searchbox</strong> rendering. This insertion sequence applies to scenario 1 in <a href="{{ site.baseurl }}/2329/">Insert and configure a global search box</a> in which the <strong>Coveo Global Searchbox</strong> is added solely to your article headers.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

[%header,cols="33%,66%"]
|===
|Option name
|Description

|Placeholder text
|See the [placeholder](https://coveo.github.io/search-ui/components/omnibox.html#options.placeholder) component option.

|Height
|See the [height](https://coveo.github.io/search-ui/components/searchbox.html#options.height) component option.

|Search page URI
|The search page on which to redirect when there's a query (see the [initSearchbox](https://coveo.github.io/search-ui/globals.html#initsearchbox) component option).

|Enable partial match
|See the [enablePartialMatch](https://coveo.github.io/search-ui/components/querybox.html#options.enablepartialmatch) component option.

|Partial match minimum number of keywords
|See the [partialMatchKeywords](https://coveo.github.io/search-ui/components/querybox.html#options.partialmatchkeywords) component option.

|Partial match threshold
|See the [partialMatchThreshold](https://coveo.github.io/search-ui/components/querybox.html#options.partialmatchthreshold) component option.

|Enable wildcards
|See the [`enableWildcards`](https://coveo.github.io/search-ui/components/querybox.html#options.enablewildcards) component option.

|Enable question marks
|See the [enableQuestionMarks](https://coveo.github.io/search-ui/components/querybox.html#options.enablequestionmarks) component option.

|Enable lowercase operators
|See the [enableLowercaseOperators](https://coveo.github.io/search-ui/components/querybox.html#options.enablelowercaseoperators) component option.

|Enable query syntax
|See the [enableQuerySyntax](https://coveo.github.io/search-ui/components/querybox.html#options.enablequerysyntax) component option.

|Query suggest character threshold
|See the [querySuggestCharacterThreshold](https://coveo.github.io/search-ui/components/omnibox.html#options.querysuggestcharacterthreshold) component option.

|Clear filters on new query
|See the [clearFiltersOnNewQuery](https://coveo.github.io/search-ui/components/omnibox.html#options.clearfiltersonnewquery) component option.

|Enable Coveo Machine Learning query suggestions
|See the [enableQuerySuggestAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablequerysuggestaddon) component option.

|Enable field suggestions after typing @ in searchbox
|See the [enableFieldAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablefieldaddon) component option.

|Enable field suggestions in searchbox
|See the [enableFieldAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablefieldaddon) component option.

|Enable suggestions of query extensions
|See the [enableQueryExtensionAddon](https://coveo.github.io/search-ui/components/omnibox.html#options.enablequeryextensionaddon) component option.

|Query pipeline
|See the [pipeline](https://coveo.github.io/search-ui/components/searchinterface.html#options.pipeline) component option.

|Maximum age
|See the [maximumAge](https://coveo.github.io/search-ui/components/searchinterface.html#options.maximumage) component option.

|Override search hub
|Used to specify a search hub to override the search hub used for query suggestions in the `Search page URI` (see [About the search hub](https://docs.coveo.com/en/3302/)).

|Initialization file name
|Specifies the `cshtml` file to use to initialize the search box (see [Use custom initialization scripts](https://docs.coveo.com/en/2788/)).

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **Omnibox** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding rendering behavior

In the following example, the **{doctitle}** rendering is inserted directly in an article page header (that is, not in an **External Components Section**).
The data source is set with the following values:

* `Search page URI`: `Content/Site4/CoveoSearch`

* `Override search hub`: `ArticleHeaderSearchHub`

**Generated HTML**:

```html
<!-- Beginning of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml"
     or custom searchbox .cshtml initialization file -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var searchboxElement = document.getElementById("_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9");
        searchboxElement.addEventListener("CoveoComponentInitialized", function() {
            CoveoForSitecore.initSearchboxIfStandalone(searchboxElement, "/Site4/CoveoSearch");
        });
    })
</script>
<!-- End of the "<SITECORE_INSTANCE_ROOT>\Website\Views\Coveo Hive\Initialization\Initialize Searchbox.cshtml"
     or custom searchbox .cshtml initialization file -->

<div id="_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9_container" class="coveo-for-sitecore-search-box-container"
data-prebind-maximum-age='currentMaximumAge'>
  <div id="_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9" class="CoveoSearchbox" data-enable-omnibox='true'
  data-prebind-maximum-age='currentMaximumAge' data-clear-filters-on-new-query='false'>

    <!-- Beginning of Validate Resources Are Included.cshtml view file -->
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var componentId = "_185F67BF-1D73-4AEE-9564-FDE5B0EB24D9";
            var componentElement = document.getElementById(componentId);

            function showError(error) {
                    console.error(error);
            }

            function areCoveoResourcesIncluded() {
                return typeof (Coveo) !== "undefined";
            }

            if (areCoveoResourcesIncluded()) {
                var event = document.createEvent("CustomEvent");
                event.initEvent("CoveoComponentInitialized", false, true);

                setTimeout(function() {
                    componentElement.dispatchEvent(event);
                }, 0);
            } else {
                componentElement.classList.add("invalid");
                showError("The Coveo Resources component must be included in this page.");
            }
        });
    </script>
    <!-- End of Validate Resources Are Included.cshtml view file -->

    <div class="CoveoForSitecoreBindWithUserContext"></div>
    <div class="CoveoForSitecoreExpressions"></div>
    <div class="CoveoForSitecoreConfigureSearchHub" data-sc-search-hub="ArticleHeaderSearchHub"></div>
  </div>
<div>
```

**Global Searchbox behavior**:

![Global searchbox redirects to search page | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/global-search-redirects.gif)