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:
First select and copy the install code from the Swiftype Dashboard.
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.
Choose the Simple Overlay style and save the configuration.
Now it's time to make the magic happen. We'll turn our image into a clickable link with
</a> tags, and add the st-search-launcher class like so:
<a href="#" class="st-search-show-outputs"> <img src="yourimage.jpg"> </a>
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!