Adding OTT Embedded Search to your site

OTT Embedded Search allows you to add our Technology Search functionality to your web site without having to write any code.  Paste the code below into your web page where you want the search functionality to appear, reload your page, and it should start working immediately.

Sites currently using Embedded Search

Adding Embedded Search to your site

If you use this code, please register your site with us by emailing us at nihott@nih.gov so we can keep you informed on changes and improvements that may affect any sites running the OTT Embedded Search.

Adding Search Components

<div class="ott-embed">
  <div class="placeholder">Loading available technologies...</div>
</div>
<script type="text/javascript" src="https://www.techtransfer.nih.gov/modules/custom/nih_algolia/js/ott-search.js"></script>
<noscript>Javascript must be enabled for the OTT-Embed Search Form to work.</noscript>
<script>
  // custom callback function definition to integrate with analytics
  function myCallback() {
    console.log("Custom Analytics code definition");
  }
  // customize ottEmbedSettings to suit the needs of your site
  ottEmbedSettings = {
    // selector : '.ott-embed', // class name of this code
    // query : false, // true or empty: show search box, false: hide search box
    jQueryUrl: 'https://code.jquery.com/jquery-latest.min.js', // link to latest jQuery version
    // facets: false, // hide facets
    // facet1: false, // hide facet 1 (Content Type)
    facetType: false, // hide Content Type facet
    // facet2: false, // hide facet 2 (Development Stage)
    // facetDevStage: false, // hide Development Stage facet
    // facet3: false, // hide facet 3 (Disease Area)
    // facetDiseaseArea: false, // hide Disease Area facet
    // facet4: false, // hide facet 4 (Technology)
    // facetTechnology: false, // hide Technology facet
    // facet5: false, // hide facet 5 (Collaboration Sought)
    // facetCollaboration: false, // hide Collaboration Sought facet
    // facet6: false, // hide facet 6 (Center)
    // facetCenter: false, // hide Center facet
    // facet7: false, // hide facet 7 (inventor)
    // facetInventor: false, // hide Inventor facet
    sort: false, // hide sort by dropdown
    // stats: false, // hide number of results
    pager: false, // hide all pagers
    // pager_top: false, // hide pager at top
    // pager_bottom: false, // hide pager at bottom
    // results: false, // hide search results
    // filter: 'type:tech', // example filter on Technologies under Type facet
    filter: 'field_ics:NCATS', // Limit to NCATS abstracts
    // filter: '"type:tech" AND "field_ics:NCATS"', // example filter on Technology Bundle type and NCATS center
    // techOnly: true, // if False, do not add "type:tech" to the filter, allowing all types to be returned
    hitsPerPage: 20, // number of results per page
    // Example html template for each search result. Clicking on a result will bring you to its detail page on 
    // https://techtransfer.nih.gov. You may edit the html or leave empty to use default
    searchResultTemplate: `
      <article class="{{ type }}">
        <p class="content-type">
          Technology <span class="field_id">{{#helpers.snippet}}{ "attribute": "field_id" }{{/helpers.snippet}}</span>
        </p>
        <p class="title">
          <a href="https://techtransfer.nih.gov/{{ url }}">{{#helpers.snippet}}{ "attribute": "title" }{{/helpers.snippet}}</a> 
          <!-- To link to a detail page on your site, set href="https://yoursite.url/?tech={{ field_id }}" -->
          <!-- where tech is the detailParameter. You can find further details on this below -->
        </p>
        <p class="inventors">
          {{#helpers.snippet}}{ "attribute": "field_lead_inventors" }{{/helpers.snippet}}
        </p>
        <p class="desc body">
          {{#helpers.snippet}}{ "attribute": "rendered_item" }{{/helpers.snippet}}
        </p>
      </article>
      `,
    // Example html template for the embedded search form. You may edit the html or leave empty to use default
    searchFormTemplateHtml: `
      <div class="ottEmbedSearch">
        <div class="query-container">
          <div class="query">&nbsp;</div>
          <div class="bookmark save-search" data-category="search">&nbsp;</div>
        </div>
        <div class="search-header-container">
          <div class="sort-by">&nbsp;</div>
          <div class="pagination">&nbsp;</div>
          <div class="stats">&nbsp;</div>
        </div>
        <div class="search-results-container">
          <div class="facets-left-column search-results-container-column">
          <div class="filterLabel toggler"><span>Filter(s)</span><span class="chevron panel-is-expanded"></span></div>
            <div class="facets">
              <div class="facet1wrapper">
                <div class="facet1">&nbsp;</div>
              </div>
              <div class="facet2wrapper">
                <div class="facet2">&nbsp;</div>
              </div>
              <div class="facet3wrapper">
                <div class="facet3">&nbsp;</div>
              </div>
              <div class="facet4wrapper">
                <div class="facet4">&nbsp;</div>
              </div>
              <div class="facet5wrapper">
                <div class="facet5">&nbsp;</div>
              </div>
              <div class="facet6wrapper">
                <div class="facet6">&nbsp;</div>
              </div>
              <div class="facet7wrapper">
                <div class="facet7">&nbsp;</div>
              </div>
            </div>
          </div>
          <div class="hits-right-column search-results-container-column">
            <div class="hits"></div>
            <div class="search-footer-container">
              <div class="sort-by2"></div>
              <div class="pagination2"></div>
              <div class="stats2"></div>
            </div>
          </div>
        </div>
      </div>
      `,
    analytics_callback: myCallback, // custom analytics code // COMING SOON
  };
  ott_embed(ottEmbedSettings);
</script>
<style>
  .ott-embed .search-results-container .facets-left-column {
    margin-right: 32px;
    width: 33%;
    max-width: 33%;
  }

  .ott-embed .ais-Hits-item .title>a {
    color: #0051a8;
    text-decoration: underline;
    font-weight: normal;
  }
</style>

The analytics_callback function (coming soon) is used as middleware to integrate Algolia and an analytics tool, such as Google Analytics or Adobe Analytics.

Same-site Detail Pages

The basic Embedded Search will link out to the TechTransfer.nih.gov website for detail pages.   If you would like to keep users on your own site instead of sending them to our site, tweak the SearchResultTemplate parameter and use the code below into your web page where you display the details page for a search result, reload your page, and it should start working immediately.

<div class="ott-embed">
  <div class="placeholder">Loading available technologies...</div>
</div>
<script type="text/javascript" src="https://www.techtransfer.nih.gov/modules/custom/nih_algolia/js/ott-search.js"></script>
<noscript>Javascript must be enabled for the OTT-Embed Search Form to work.</noscript>
<script>
  // customize ottEmbedSettings to suit the needs of your site
  ottEmbedSettings = {
    detailSelector: '.ott-details', // class name of search result details code
    detailParameter: 'tech', // name of parameter used to identify search result record. Make sure that it matches the 
      // parameter used in the a tag of the searchResultTemplate in the above code block.
    // Example html template for the search results' details page. You may edit the html or leave empty to use default
    detailTemplate: '\${record.rendered_item_embed}',
    detailTitleTemplate: '${title} | Technology Details', // template for detail page title
    detailBreadcrumbSelector: '.ott-details-breadcrumb ul', // class name of details breadcrumb code
    detailBreadcrumbTemplate: '
      <ol class="ott-details-breadcrumb">
        <li><a href='/'>Home</a></li>
        <li><a href='/technology'>Technology</a></li>
        <li>\${title}</li>
      </ol>
      ',
  };
  ott_embed(ottEmbedSettings);
</script>
<style>
  .ott-embed .search-results-container .facets-left-column {
    margin-right: 32px;
    width: 33%;
    max-width: 33%;
  }

  .ott-embed .ais-Hits-item .title>a {
    color: #0051a8;
    text-decoration: underline;
    font-weight: normal;
  }
</style>

Integration Assistance

For assistance with using this code, contact nihott@nih.gov.