Once you've set up your Search Widget, you can embed it into your web page or application by adding a few lines of Javascript code. 

Step 1: Collect the Deployment ID and your Zingtree Organization API Key

You’ll need the Deployment ID to identify the search widget you want to embed. You can find this within the Knowledge Search setup Deployment section.

You’ll need the API Key for authentication for your search widget to display data to your end-users. Information on where to find this and how it works is here.

Step 2: Add the script to your page or application:

Edit this script with your Deployment ID and API Key collected in Step 1. They are added to the <script> tag as data elements. Or can also copy your snippet from the Knowledge Search > Deployment Section.

<script type="module" crossorigin src="https://zingtree.com/knowledge-search/zt-semantic-search.js" id="zt-search-widget" data-deploymentid="DEPLOYMENT_ID_HERE" data-apikey="API_KEY_HERE"></script>

Step 3: Add the required DIV containers to the hosting page:

Now you'll need to add the required DIV containers to the page that will be hosting your Search bar and Search results. You can also copy these from the Knowledge Search > Deployment Section.

a. Search bar for question entry: 

Paste this code where you would like your Search bar to appear on the page:

<div style="border: 1px solid black;">
    <h2> Search bar element</h2>
    <div id="zt-searchbar"></div>
</div>

b. Results of the search query:

Paste this code where you would like the Search results to appear on the page.

<div style="border: 1px solid black;">
   <h2> Results element</h2>
   <div id="zt-search-results"></div>
</div>

Step 4 - Add optional containers to the hosting page:

a. Filters and Sort options:

Add this code if you would like to add filters and sort options to your Search results:

<div style="border: 1px solid black;">
   <h2> Controls element</h2>
   <div id="zt-search-controls"></div>
</div>

Larger Scale Example

This example brings all the parts together and applies a few custom styles. Be sure to replace the DEPLOYMENT ID and DATA API KEY with your own:

<div class="zt-search-container">
    <div id="zt-searchbar"></div>
    <div>
       <div>
          <div id="zt-search-controls"></div>
       </div>
       <div>
          <div id="zt-search-results"></div>
       </div>
     </div>
</div>

<script type="module" crossorigin src="https://zingtree.com/knowledge-search/zt-semantic-search.js" id="zt-search-widget" data-deploymentid="YOUR DEPLOYMENT ID" data-apikey="DATA API KEY" data-mode="embedded"></script>

<style>
.zt-search-container {
width: 80%; 
border: 4px solid green; 
padding: 20px; margin: 20px; 
}
#zt-searchbar .v-autocomplete.v-input.autocomplete-custom-focus {
background-color: white !important;
}
#zt-searchbar .v-field,
#zt-searchbar .v-field--active
{
border: 1px solid black !important;
}
#zt-search-results {
font-family:'Courier New', Courier, monospace !important;
}
</style>

Help Us Improve

Do you or your users have feedback about your search results? Use the thumbs up and thumbs down as you’re using your search widget to help improve it.