If you got your own place on the Internet, helping your visitors find what they are looking for is a great way to engage them and keep them staying a bit longer. A custom site search can achieve just that. Implement this feature with DuckDuckGo, a friendly search engine that doesn't track its users!
DuckDuckGo (DDG for short) sprang to life in 2008. The name stems from the children's game duck, duck, goose. The company have their headquarters in Paoli, Pennsylvania. The search engine processed some 15 million direct daily queries as of early 2017.
Compare this to Google's 9 billion.
The engine uses over 400 sources in total, as well as own crawlers, to return "the best results, rather than the most results".
Its major differences from the popular search giants (you-know-who) are:
With the end of Google Site Search, the need for a reliable custom search with little advertising is out there.
If you don't offer a search function on your website or blog yet, think hard. 80% of Web use starts with a search. Your visitors just expect it to find their way around, and can be lost – in every sense – without it. Moreover, their queries let you know what they are looking for when visiting, so you can better understand their needs and suit those by providing this exact information.
Using DuckDuckGo search on your site is easy if you want it this way, but can be adjusted with many parameters to be as sophisticated as you need it.
You can generate a search widget for your domain on a dedicated page from DuckDuckGo (the link opens in a new browser tab/window).
However, the widget resides on the DuckDuckGo server – you access it through an iframe –, and is somewhat restricted in terms of search features and styling options.
If you prefer having full control over how the search results are fetched and presented, use the form below to configure a custom search you can host on your own site.
You will be able to test it immediately from this same page as you proceed.
Ready? Here you go! Make some easy choices, generate the code, and test your widget within minutes! If stuck, scroll down for further explanations and assistance.
I tried to set up the configurator above as easy and straightforward to use as possible – that is, from my point of view. If you have difficulty with it, find some explanations below, or feel free to ask for assistance!
The widget presented on this page uses the same generated code from the box below it. When you click on the update button, both elements receive the new code.
This code will work just the same way on your site, with following exceptions:
Though you can choose any combination of settings, not all of them are 100% compatible.
For example, you can't search with Google over two domains. Or, you can't skip the results page when searching with Google.
When two conflicting options are chosen, the widget will behave to satisfy the one located earlier in the form.
This means in case of the above examples:
The conflicting settings are discussed, among other things, in the section below.
When you query for several words, engines behave differently if you enclose them in quotes. The returned results tend to contain the exact search phrase, as opposed to all its words found somewhere in the page.
I might be wrong, but I got the feeling that literal search also yields fewer advertisements.
As mentioned above, if you choose to search over two domains, this option is disregarded.
This option is only possible with DuckDuckGo search. Even in this case, the empty SERP will be shown if no results are available.
The good: If the search is successful, the visitor is sure to stay put.
The bad: The visitor is left without a choice.
I think this is quite useful.
If you have Google Analytics installed on your site, this option can generate an event every time your visitors search for something with the widget. The event category is set to engagement, its action is search, while its label records the search query itself, as suggested by Google.
In this way, you will not only be able to monitor what your visitors are looking for on your site, but also to know which queries originate from what pages.
The code to trigger events is compatible with both Google Tag Manager (gtag.js) and its predecessor, Google Analytics Object (analytics.js).
The events report is found in Analytics under Behavior/Events. Learn about events here.
If you don't use Google Analytics yet, you can still select this option. Including it is safe, no matter whether Analytics is already in place on your site or not. Event generation will start as soon as you enable tracking your pages.
These options look alike, but work different. The first one concerns the SERP, while the second one affects the links on it.
The latter option is only in effect with DuckDuckGo search, not when searching with Google.
If neither is chosen, all redirects happen in the same tab. The original page gets replaced by the SERP, which leads to whatever the user selects on it, or inputs in its address or search bar, for that matter.
If you don't want to take a risk losing your visitor on the SERP, these are your choices:
Whatever you decide, don't select both new tab options—this can be a rather irritating user experience.
The settings in this section are only in effect with DDG. They style the DuckDuckGo search results page.
Start with choosing the background colours for its header and content part. There are several presets, but you can also choose your own custom colour.
The next three settings style the result snippets. If you don't provide them, they will be chosen automatically over at DuckDuckGo's. Test these choices first, as they are surprisingly well made.
If you are after the exact look-and-feel of your site, follow the suggestions for choosing custom colours in their respective input boxes.
Use your favourite width specification together with units. Anything goes here — the value you enter is taken over as is.
Don't forget px if you choose pixels.
For responsive templates, per cent or viewport units would work best.
You can modify it to your liking; scroll to Advanced fine-tuning for details.
The original DuckDuckGo search widget only offers a green button, which can make some people actually avoid using it altogether.
I can relate to it.
Choose your favourite look out of five here, or generate the widget and adjust its appearance to your liking.
Important notice: Changes you make in the configurator are not applied on the fly. To update the widget with your settings and generate its code, click on the Update widget button.
Essentially, if you still see your last search query in the input field, it's time to hit the Update button! The "loaded", up-to-date and ready-to-test widget will show the placeholder text instead.
To test the widget, just enter a sample query.
When you are satisfied with the results, click on Select code, then copy (Ctrl-C in Windows, Cmd-C on a Mac) and paste it (Ctrl-V or Cmd-V, respectively) in a simple text editor without fancy formatting options—plain text is all what you need.
If you think you have everything you need, and can't wait to see it in action—wow, great! Double-check the code is still in the clipboard (just kidding). Skip the editor step above and the boring stuff below altogether, and proceed to Installing the widget. You are almost done.
To change the standard wording, e.g., translate it into another language, locate the <noscript>…</noscript> string in the generated code and replace its inner part, i.e., that represented by …, with your own HTML content.
If you opted for DuckDuckGo search, you can further adjust the results page, with custom fonts, for example. The complete list of available parameters is provided in the links section near the end of the page.
If you need help with applying some of them to your widget, send me your code along with the explanation of what you are trying to achieve.
If you believe that Bing or Yahoo! know your site better than Google or DDG do, it is possible to make one of them do the job. For this:
The widget is self-contained, meaning its code includes the style as well.
To modify the input field and the button, try playing with the settings in the provided <style> element.
To change the global appearance, for example, the size of the enclosing div, edit the latter's style attribute.
The button can be easily adjusted to meet your needs. Replace 🔍 standing for the magnifying glass icon on its face with a short text, for example, Go, or another symbol or emoji, such as › , » , etc.
To change the text colour, modify color attrbiute in #widdget button style settings. The surface colour is made up of linear gradients, one for each of the normal and the pressed states. Feel free to change them as you see fit in background-image attributes of #widdget button and #widdget button:active style rule sets, respectively.
Just paste your final code into an HTML file. If working with page templates, select a block which holds raw HTML and make it appear on all your pages. Rebuild, upload, and test for real. Finished!
This was easy, wasn't it? If you still have questions, feel free to ask!
The widget is free to use. I would only ask you to retain the leading comment in its code on your site. If you deem it useful, please spread the word!
Tags: #customsearch #ComeToTheDuckSide #duckduckgo #widget
jscolor colour picker by Jan Odvárko.
Unattributed images on this page are sourced from public domain via Pixabay and Wikimedia Commons.
Is it useful 👍? Awful 👎? Leave a message! Your comments help make this site better (and give me a kick—one way or another).