Embedding the Search Widget in a web page or application

  • Updated

Get Enterprise AI+

Do you want access to this new feature? Contact your Zingtree Account Manager or our Support Team.


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>

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>

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>

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.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Didn't find what you need?

Our friendly customer support team is here to help

Submit a Ticket

Looking for help or advice?

Reach out to our knowledgeable community of users.

Zingtree Community