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
- NCATS - Licensing Opportunities
- CDC - Technologies Available for Licensing and Collaboration
- NCI - Available Technologies
- NIAID - Technology Development Licensing and Collaboration Opportunities
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:technology_bundle', // example filter on Technology Bundle under Type facet
filter: 'field_ics:NCATS', // Limit to NCATS abstracts
// filter: '"type:technology_bundle" AND "field_ics:NCATS"', // example filter on Technology Bundle type and NCATS center
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"> </div>
<div class="bookmark save-search" data-category="search"> </div>
</div>
<div class="search-header-container">
<div class="sort-by"> </div>
<div class="pagination"> </div>
<div class="stats"> </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"> </div>
</div>
<div class="facet2wrapper">
<div class="facet2"> </div>
</div>
<div class="facet3wrapper">
<div class="facet3"> </div>
</div>
<div class="facet4wrapper">
<div class="facet4"> </div>
</div>
<div class="facet5wrapper">
<div class="facet5"> </div>
</div>
<div class="facet6wrapper">
<div class="facet6"> </div>
</div>
<div class="facet7wrapper">
<div class="facet7"> </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.