@coveops/standalone-searchbox-initializer
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Standalone Searchbox Initializer

    The Standalone Searchbox Initializer makes it quick to add a configurable standalone searchbox to a page.

    Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.

    Getting Started

    1. Install the component into your project.
    npm i @coveops/standalone-searchbox-initializer
    
    1. Use the Component or extend it

    Typescript:

    import * as StandaloneSearchInitializer from '@coveops/standalone-searchbox-initializer';

    Javascript

    const StandaloneSearchInitializer = require('@coveops/standalone-searchbox-initializer');
    1. You can also expose the component alongside other components being built in your project.
    export * as StandaloneSearchInitializer from '@coveops/standalone-searchbox-initializer'
    1. Include the component in your template as follows:

    Add a basic integration into the page

    <div class="coveo-search-section">
        <!-- <div class="CoveoCustomPipelineContext"></div> -->
        <div class="CoveoAnalytics"></div>
        <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
    </div>

    Add the following script if you're serving the component independently via a CDN:

    <script>
        CoveoStandaloneSearchboxInitializer(demoConfig.orgId, demoConfig.token, {
            standaloneSearchBoxRootSelector: '.coveo-search-section',
            restUri: demoConfig.restUri,
            searchPageUrl: demoConfig.searchUrl,
            language: "en",
            searchHub: demoConfig.searchHub,
            placeholder: 'Sample Placeholder'
        })        
    </script>

    Add the following script if you're serving the component from the project bundle using the swapVar utility:

    <script>
        Coveo.StandaloneSearchboxInitializer(demoConfig.orgId, demoConfig.token, {
            standaloneSearchBoxRootSelector: '.coveo-search-section',
            restUri: demoConfig.restUri,
            searchPageUrl: demoConfig.searchUrl,
            language: "en",
            searchHub: demoConfig.searchHub,
            placeholder: 'Sample Placeholder'
        })        
    </script>

    Be sure to update the variables to have the relevant information.

    Options

    The following options can be configured:

    Option Required Type Default Notes
    orgId Yes string The ID of the Coveo Organization
    token Yes string The API Key of the Coveo Organization
    options.standaloneSearchBoxRootSelector No string .coveo-search-section The target search section containing the searchbox
    options.restUrl No string The Coveo API url
    options.searchPageUrl Yes string The local url to redirect to
    options.searchHub Yes string Searchhub the searchbox uses

    Contribute

    1. Clone the project
    2. Build the code base: npm run build
    3. Update the test organization ID and API Token and configure your port on the npm serve script in the package.json: --org-id <ORG_ID> --token <ORG_KEY> --port 8080
    4. Serve the sandbox for live development npm run serve

    Keywords

    none

    Install

    npm i @coveops/standalone-searchbox-initializer

    DownloadsWeekly Downloads

    6

    Version

    1.0.1

    License

    Apache-2.0

    Unpacked Size

    12.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • ehsanshahneh
    • dsisodraker
    • watallah
    • coveoit
    • gfoumbi
    • rvundavalli
    • jwolfe-coveo
    • sfecteau
    • mthusscoveo
    • jfleurent
    • eqcoveo
    • jmdro
    • davebouffard
    • jfallaire
    • achouan
    • hsinghcoveo
    • wnijmeijer
    • lgcarrierbedard
    • elafleur_coveo
    • plavigueur
    • eaubin
    • lpblais-coveo
    • jpdery26
    • cricha