search mobile facets autocomplete spellcheck crawler rankings weights synonyms analytics engage api customize documentation install setup technology content domains user history info home business cart chart contact email activate analyticsalt analytics autocomplete cart contact content crawling custom documentation domains email engage faceted history info install mobile person querybuilder search setup spellcheck synonyms weights engage_search_term engage_related_content engage_next_results engage_personalized_results engage_recent_results success add arrow-down arrow-left arrow-right arrow-up caret-down caret-left caret-right caret-up check close content conversions-small conversions details edit grid help small-info error live magento minus move photo pin plus preview refresh search settings small-home stat subtract text trash unpin wordpress x alert case_deflection
Swiftype Documentation / tutorials: How to Launch the Search Overlay from an Image Link

How to Launch the Search Overlay from an Image Link

You may already be aware that our search widget has some pretty great features under the hood, but did you know that it's easy to replicate the pop-up search box behavior featured on the pages of swiftype.com?

To enable this behavior you will still paste your engine's embed snippet into your site, but we'll go about it in a slightly different fashion.

Configuring your Install Code

On your search engine's Install tab in the Swiftype Dashboard, you'll see install code that looks like this:

<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','YOUR_INSTALL_KEY','2.0.0');
</script>

Step 1:

First select and copy the install code from the Swiftype Dashboard.

Step 2:

Paste the copied code before the closing </head> tag in your site's HTML, or within a custom HTML element if using a site builder.

Step 3:

Choose the Simple Overlay style and save the configuration.

Step 4:

Now it's time to make the magic happen. We'll turn our image into a clickable link with <a></a> tags, and add the st-search-launcher class like so:

<a href="#" class="st-search-show-outputs"> <img src="yourimage.jpg"> </a>

With that class included in your links it will trigger the search pop-up on any page where the the javascript snippet for your engine is included.

This method is also versatile in that you're not limited to wrapping only images. You can also configure text based links, or graphics loaded via CSS.

If you've any questions while implementing this feature into your site, hit us up on the community forum!