Help your new visitors find what they came looking for A little tool for your website
This is a small javascript library I initially made as a bookmarklet. It detects and automatically highlights search words your visitors used once they get to your site from a search page (like Google, Yahoo or any other site, even your own)
View demoIf unsure, poke it with a stick!DownloadZIP, including sample files
Lower your bounce-rate: give your new visitors a reason to stay longer, by serving what they wanted (search terms) on a silver plate!
Install it
At the top of your page, include both the required files, as follows:
<link rel="stylesheet" href="sitehilite.css" type="text/css"/>
<script type="text/javascript" src="sitehilite.js"/>
Then insert this line anywhere in your page. You don’t need to wrap it in window.onload, it’s all sorted out.
<script type='text/javascript'> sitehilite.init(); </script>
Configure it
Tweak it here and there, if need be.
<script type='text/javascript'>
config={
content:'div.post',
navMenu:{show:false},
minLength:4,
colorify:false
}
sitehilite.init(config);
</script>
Configuration Options
| Variable | Default | Description |
|---|---|---|
| content | “body” | CSS selector for the main element that contains the text that is highlighted |
| callback | This is an optional callback function that’s executed when everything’s wrapped up. You can use it to reveal an otherwise hidden welcome message to visitors coming from search page. See the demo page for usage. | |
| colorify | true | Assign unique colors to each word within the search phrase |
| minLength | 3 | Filter out any word with a length less then this.With this set to 3, at, on, in..etc. are all filtered out |
| isCasesensitive | false | TRUE makes highlighting case sensitive. Usually, you don’t want to change this. |
| enableArrowKeys | true | Enable keyboard navigation with the left/right arrow keys. |
| enableInput | false | Invoke in-page-search if referring site is not a search page. |
| beginsWith, endsWith | true, false | Highlight words that begin with search term. If both are set to TRUE, it behaves strict and only highlights whole words (and words with the same beginning and ending, like underground given a search term containing und) |
| navMenu | show:true, position:’top’ | Whether the options menu containing the navigation menu is shown, and where it is shown (top/bottom). |
