DuckDuckGo search for your website
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!
You may want to rotate your phone in order to improve your browsing experience on this site.
Quick links
DuckDuckGo: A different animal
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:
- limited advertising on search results pages
- no biased (personalized) search results
- no search results censorship based on location
- no tracking cookies
- no IP address tracking
Create your DuckDuckGo search widget!
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.
DuckDuckGo mascot, DaxUsing 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.
For quite some time, you could generate a search widget for your domain on a dedicated page from DuckDuckGo proper. The widget resided on the DuckDuckGo server, was accessed through an iframe and somewhat restricted in terms of search features and styling options.
Anyway, this option seems to have vanished completely, so just use the form below to configure a custom search with all the bells and whistles that you can host on your own site.
You will be able to test it immediately from this same page as you proceed.
NB: Some widget features require JavaScript to be turned on in your visitors' browsers. If you don't select these features, the widget will not use JavaScript.
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.
Note on GDPR compliance
The widget itself doesn't collect any information from your visitors, nor does it use cookies. If you decide to employ it in connection with Google Analytics, the standard disclaimer about using GA on your site, required by Google to be included in your privacy policy, would suffice.
The search results page is served by the search engine you address when configuring the widget (e.g., DuckDuckGo, Google, Bing, or Yahoo!). Like any external page you link to from your site, this is governed by its respective host's privacy policy. In case of DDG, that is quite explicit: "We do not track you, ever".
It is different with other search engines, but a general sentence explaining that you don't take responsibility for any websites you are linking to, probably already in place within your privacy policy, would cover you for this, too.
Your own search engine
How it works
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!
What you see is what you get, almost
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:
- When you test the widget here, the results page will always open in a new tab or window, even if you didn't select this. This is done for two reasons: First, you don't have to jump back and forth between results and this page through your browser history. Second, you are able to compare results achieved with different settings. In any case, the widget installed on your site will behave exactly as you specified it.
- If you choose to generate Google Analytics events with your widget, no such events can/will be generated when testing it from this page.
- If you select a per cent value for the widget width, it will display differently on your site, depending on the container it will be placed in.
- Since you can't update the widget with JavaScript disabled, you won't be able to see your version with the NOSCRIPT warning. However, if you turn JavaScript off and reload the page, you should get a feeling of how it might appear to your visitors. Be careful not to loose your settings while trying.
Some animals are more equal than others
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:
- If you provide a second domain name, the widget will search with DuckDuckGo even if you'd prefer to search with Google.
In other words: To search with Google, leave the alternate domain empty. - If you chose to search with Google – and didn't provide a second domain –, your visitors will land on the Google SERP no matter how you opted to deal with it.
In other words: To bypass the results page, don't search with Google.
The conflicting settings are discussed, among other things, in the section below.
Configuring the widget
Search settings
Literal search
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.
Search with Google
As mentioned above, if you choose to search over two domains, this option is disregarded.
Behaviour
Fast forward to the first result
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.
Connect with Google Analytics
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.
Show results/open links in new window
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:
- Select one of these options to minimise the chance of visitors straying off. (The SERP in a new window option is safer in this regard.)
- Make use of the feeling ducky option to skip the SERP for good.
- Work on your page titles, descriptions, and content to get that click from the SERP.
Whatever you decide, don't select both new tab options—this can be a rather irritating user experience.
Results page
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.
Search widget
Width
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.
NOSCRIPT warning
If the widget requires JavaScript being enabled in the browser, this option, when selected, will show a corresponding hint to users with JavaScript turned off — other visitors won't be affected.
The standard message would look like This feature requires JavaScript to be turned on. in your site's font.
You can modify it to your liking; scroll to Advanced fine-tuning for details.
Button
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.
Testing and getting the code
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.
Advanced fine-tuning
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.
Custom NOSCRIPT message
As mentioned above, some widget features only work in JavaScript-enabled browsers. If you choose them and expect that some of your visitors might have turned JavaScript off, opt for showing a short explanation.
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.
Other DuckDuckGo search parameters
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.
Other search engines
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:
- Generate your widget to Search with Google.
- In its code, look for the string ?q=%21g (near the end).
- Replace g with b for Bing, or y for Yahoo!
- Install the modified code.
Widget style
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.
Installing the widget
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!
Revision history
- 3.0 2020/06/18 - Modified widget code to use scripting only if necessary
- 2.1 2019/05/08 - Updated event generation to use Google Tag Manager where installed
- 2.0 2017/12/07 - Replaced image buttons with styled ones
- 1.0 2017/05/27 - Initial version
The very small print
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
In this series
- How to embed YouTube videos
- See examples for embedding videos on your website or blog in creative and unusual ways. Learn about player parameters and IFrame Player API. Get ideas and inspiration for your own online projects.
- Online breadcrumb navigation code converter
- This easy to use tool lets you upgrade outdated breadcrumb markup to the newest schema supported by Google.
Useful links
- DuckDuckGo search
- The search engine that doesn't track you. Make it your browser's default, and learn what it can do for you.
- DuckDuckGo search parameters
- The complete list of search parameters and their values for your widget.
- IrfanView image viewer and editor
- The buttons for the first version of the search widget were created from the DuckDuckGo green original in IrfanView. The shareware application has been around for over 15 years. I remember creating contact sheets for the first pages of my gallery with it, in 2002.
jscolor colour picker by Jan Odvárko.
Unattributed images on this page are sourced from public domain via Pixabay and Wikimedia Commons.
Tell me what you think!
Is it useful 👍? Awful 👎? Leave a message! Your comments help make this site better (and give me a kick—one way or another).
Popular articles
-
A kind of magic
If a digital picture has to be seen in the real world, printed on a real medium and displayed in a real showcase, its transition from RAW to real is better done in an old school image editor. Enter A…
-
A duck for a dog
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 …
-
"Might as well have the best"
Aiming for better images? Think better lenses! This is your most important piece of gear, so you better get it sorted out. — Need some advice?
Become a patron for