Duda Integration

Adding the widget to your site

Just like with any other app that takes your site past Duda’s default functionality, you need to start with the site editor:

Simply search for “Site Search 360” and install the app that pops up in the App Store.

Protip: You can use the widget’s entry in the App Store to see the plan your search is on, upgrade, or open your Site Search 360 Control Panel to access our advanced configuration settings.

Once the app’s installed, you’ll need to add it to your site. Go to the “Widgets” tab in the left side panel menu, look up “360” and just drag and drop your new search bar wherever you see fit, like in your navigation menu or any other element of your choosing - from header to footer.

Note: Make sure to publish/republish your site when you first install the widget - this will initiate a full crawl of your site and add all available pages from it to your search results.

With that settled, you can move on to adjusting the widget’s look and feel to your needs.

Customizing the widget

Duda’s site editor:

If you choose to change anything about the search box’s default design or functionality, all you need to do is click on it to access a nifty pop-up menu of all available customization options.

This menu contains the same two tabs you’ve probably gotten quite used to while managing your Duda site - “Content” and “Design”.

“Content” settings refer to how your search box and search results are presented:

• What text (if any) is shown inside the search box and the search button:

Note: If you don’t specify the text for your search button, a magnifying glass icon would be shown instead.

• How your search suggestions are displayed - a brand new section:

Note: Search suggestions, also known as autocomplete (or search-as-you-type) results, appear under the search box before the search is initiated. On a live site they would appear like this:

• What your search result layout looks like:

Protip: By default your search results (and thus search suggestions) contain the images pulled directly from the pages that constitute said search results. Our crawler distinguishes images from other content on the page via the Open Graph image tag. To change the extracted image for any given page, you’ll need to adjust its settings under Pages -> Page Settings -> SEO -> Open Graph (or Post Metadata if the page is a blog entry). Simply click on the image the crawler has extracted and select a new one in Duda’s Image Picker. It will allow you to either select between all images available in Duda’s own image collection or upload a new image of your choosing.

Note: If the images on your site don’t have any Open Graph tags, the site’s logo will be shown instead. In that case, you can either stick with the logo or hide the images from the search entirely.

A text snippet is a description of the page, which we pick up automatically in the indexing process. This text can be changed either in your site editor under Page Settings -> SEO -> Page Description or in the “Content Extraction” section of the Site Search 360 Control Panel with custom Include/Exclude XPaths rules (the process is explored in detail in our article on XPaths).

A Data Point, in its turn, is an additional piece of information that further enriches the description - it could be the price or the color of the product you sell, the name of the blog entry’s author or whatever else you wish to be clearly displayed in your search results. This is something that you can configure solely in your Site Search 360 Control Panel, which we will explore in the next section of this guide.

• Which language the search is in:

This refers to your search results as well as various interface elements such as CTA buttons. Our search supports nineteen languages by default: English, German, Spanish, Turkish, Italian, Portuguese, Polish, Dutch, French, Danish, Finnish, Swedish, Norwegian, Russian, Czech, Romanian, Latvian, Lithuanian, Hungarian and Greek.

• Whether the search is connected to Google Analytics:

“Design” settings look a little bit more familiar to seasoned Duda users:

• What your search box looks like:

• How text is presented in the search’s interface, the search results and the search suggestions, as well as in the search box when a query is being entered:

• What should be the look of the search button and the text displayed inside of it (if you opted out of using the magnifying glass icon):

• Whether the search box is animated:

• How much space there is between the search box and other elements of the site’s layout:

But what if you want to implement design options that fall outside of Duda’s default functionality? In this case, you can simply add custom CSS to the project:

• Open “Developer Mode” in your site editor:

• Navigate to site.css under “Site HTML/CSS”:

• Enter whatever CSS your heart desires in the free space on the right side of the screen (we went with CSS that removes highlighting from the search box):

You thus have total freedom over the look of the search even if you need to do some coding to configure your dream design.

These are by no means the only settings you can tinker with to customize the search. The rest of them will be available in your Site Search 360 Control Panel.

SS360 Control Panel:

Despite the fact that this part of your search is not powered by Duda, you don’t have to leave your site editor to work with it. As previously stated, your Site Search 360 app settings can be accessed with a click on the “Open” button in the widget’s entry in Duda’s App Store:

This button will take you directly to your Dashboard, logging you in automatically.

The “Dashboard” section contains three tabs, each providing valuable data about the performance of your search.

The “Analytics” tab has all the information about how the search is being used.

When you first implement the search, you’ll only see some basic information about your project here, like the number of pages our crawler has found on your site and added to the search results. The scope of available data will extend gradually as the search usage grows. You will, among other things, see which search terms your users type in most often and which ones return zero results.

Located in the top right corner of the screen are two buttons that will allow you to filter your search data. The “Quick Filter” button will show you information about the performance of your search on this particular day, the day before and within the last 7, 30 or 90 days. The “Date Range” button, in its turn, will allow you to search through any period of your choosing.

You can learn more about data pulled from your users’ experience with the search in our article on Dashboard Analytics.

The “Search Success Tracking” tab is a dream for anyone worried about their conversion rate. With regular engagement it will go from this:

to this:

Your Search Success rate is essentially a combination of how many users engage with the search, how often they click on the search results they’re presented with and use filters to narrow down their search results as well as how frequently they see no results for their queries. Each query is recorded and detailed in this very tab.

The “Search Map” tab will be of service if you ever need to see where your users are based and which queries are popular in a particular region:

Note: The “Search Success Tracking” and the “Search Map” tabs will only appear on your project page if you have these features enabled for your plan (currently available for “Holmes” only). Check out our pricing page to learn more about the differences between the plans we offer.

You’ll notice that there is a “Chat” icon at the bottom right of any tab you open. All users have the opportunity to email Site Search 360’s support team at any time, but those on “Holmes” can also use the chat to contact our support specialists without leaving the project page and receive a near-instant reply.

The next section of your project page is called “Data Sources” aka everything that gets crawled in order to populate your search results.

“Sitemap Indexing” is used by default for every Duda project. The respective sitemap is pulled from the site editor the moment your project is created and gets updated automatically whenever you add any pages to your site, edit, or remove them.

You are not limited to the default settings of your sitemap when it comes to the way the content is indexed from your site.

If you find that the exact same content appears in your search twice, you can use our deduplication techniques to clear up the results without making changes to your Duda project, which for some might be tricky:

You can also remove pages from your search results without deleting them from the site by either blacklisting or no-indexing them. Alternatively, you can restrict the crawler to a specific area of your site by whitelisting certain pages.

If you find that our crawler can’t index certain pages from your site, there’s a few things from our “Advanced Settings” that might resolve the issue.

Sometimes pages are hidden from Google and the like by a no-index robot meta tag. In this case, you can allow our app to access said pages without revealing them to the search engines by simply ignoring this meta tag.

Other times, our crawler cannot access a particular subset of pages because it’s password-protected or hidden behind a login screen. In that case, you can simply type in your login credentials and render all content accessible to our crawler.

Crawler Settings are explored more thoroughly in our article on this topic.

These configuration options are applicable solely to your sitemap, yet the sitemap isn’t the only thing that our crawler can use to create search results. You can also add your site’s FAQ to your Data Sources as well as a list of URLs from separate domains or even a YouTube channel (the latter only if you’re on “Holmes”).

While scrolling through this section and others after it you might notice a cheeky little “Show Help” icon next to some of the settings:

Clicking on this icon will open an article from our How-To documentation explaining how this specific setting works:

You can access these docs at any time by entering the name of the feature that proved troublesome to set up in the search field at the top left corner of the screen:

The “Search Preview” section has a pretty self-explanatory title: this is where you can see how your search functions without switching back to your site editor or the live site itself.

Not only will “Search Preview” give you a general idea of how the search functions (i.e. which results show up for any given query, which Result Groups they belong to, etc.) - it’s also where you can see which content has been extracted for each page just by clicking on the “Show Details” button:

Another awesome part of “Search Preview” is that it allows you to configure the general behavior of the search when it’s in use - in a separate section called “Preview Settings”:

Most of these settings’ functions are explained by their very titles, but there’re a few things to note down regardless:

• Search Fuzziness settings are related to how closely the info extracted from the page (its title, text, tags, etc.) needs to match any given query. This is, of course, a spectrum, ranging from “extremely strict” (which means that this match needs to be perfect) to “get more results” (which allows for maximum leniency - the content of the search results has to match just a few of the entered symbols).

• Text (or search) snippet, as we’ve already established, is the description shown under each search result. It can be a simple block of text or a collection of data points which you can set up in the “Data Structuring” section of the project page.

There are also some advanced settings here related to page boosting:

Boosted pages are ones that are automatically ranked higher than others. For instance, if a query match is found on several pages, but one has it in the title and the other in the description, you can make either one appear higher in the result hierarchy by default. You can also create several boosting patterns with different values.

All these settings are explored in detail in our Search Settings article.

Right next to “Preview Settings” there’s a “Search Result Configurator”:

This neat little thing will let you set up the general look of your search results:

• Should titles be extracted using the <h1>, <h2> or <h3> element from each page’s structure

• Should images be detected automatically, picked out from the page’s content or not displayed at all

• Should the search snippet constitute information from the Open Graph description tags, the first two paragraphs of each page’s text or nothing at all

The next item on our list is much teased “Data Structuring”.

This one also has three separate tabs.

Just to recap, “Data Points” are bits of info extracted from the page’s content that are presented in a universal manner across similar entries from the site. It could be sizes for products, dates for articles - the choices are limitless.

In this tab you can manually configure these Data Points to either appear in the search snippets or be used as extraction criteria for filters:

Here’s what your settings can look like for a “Price” Data Point:

You can learn more about setting up Data Points in our step-by-step guide on the topic.

“Result Groups”, in its turn, allows you to categorize the search, creating separate tabs within it for different types of results. You could have Result Groups for videos, articles, FAQ entries - whatever you set your mind to as long as the pages you want to put in the same category have some URL Pattern or XPath element in common.

Here’s what configuration for an automatically created “Products” Result Group looks like:

More information about search categorization is available in our article on Result Groups.

Moving on to something quite exciting. We’ve already covered default content extraction strategies when we discussed the “Search Preview” section of the Control Panel, but if your site’s setup is complex, and you’re looking for precise (perhaps even encompassing numerous patterns) extraction of your pages’ titles, images or content, look no further than the “Content Extraction” tab:

The settings for content are especially cool, because they let you pick and choose which parts of the page should be searchable and which shouldn’t. It’s like blacklisting and whitelisting, only with XPaths. Headers, footers, navigation menus and pop-ups are excluded from the search automatically. The rest is entirely up to you.

A detailed explanation of these settings’ functionality is available in our article on Content Extraction.

Next up we have the “Filters and Sorting” section.

“Filters” are a foolproof way of segmenting your search. With Site Search 360 they are created based on specific Data Points (one or several in the same filter):

This is yet another thing limited solely by your imagination. Here’s what a filter setup based on our “Price” Data Point would be:

You can learn more about filters in our dedicated article or see them in action in this nifty demo.

“Sorting” options, in their turn, order your search results based on the data points you create. This one is fairly straightforward: with a “Price” sorting option, for instance, they can be arranged either from highest price to lowest (Descending) or lowest price to highest (Ascending, set up in the example below):

The feature is further explained in our Sorting Options article.

Off to one of the coolest things we’ve yet to offer - the “Result Manager”.

In other sections of the Control Panel you’ve simply tinkered with the look and feel of the search. This is where you’re given full control over it.

Introducing “Result Mappings”:

Result Mappings will allow you to:

• Customize a unique set of results for any query, automatically applying specific filters and filter values to them as well as selecting a timeframe in which default results should be reordered

• Replace search results for one query with pages relevant to another

• Redirect a query to a specific page rather than show default search results

Here’s an example of a mapping that makes a query that would normally return only one search result automatically redirect search users to a page that corresponds with said result:

The awesome thing about Result Mappings is that you’re not limited to pages extracted from your site. You can also add pages from other domains to your custom set of results and even create entirely new ones. The latter (regular pages and promotional banners alike) can be found in their own “Custom Results” tab:

This kind of customization extends beyond search results to your search suggestions. That’s where “Autocomplete Queries” come into play:

You can either automatically show queries your users searched for most often or add custom queries that will be displayed if they match the first few letters of the terms typed into the search box.

All three of these customization options are explored in our article on Result Mappings.

Finally, there’s the “Boosting” tab:

We’ve already covered what boosting is as part of “Preview Settings”. Boosting in this tab though is about URL patterns that unite a certain number of pages rather than these pages’ specific elements. If you want pages with query matches in the title or the snippet to pop up in the search first, head to “Preview Settings”. If you want all /product/ pages to be ranked higher than, say, /blog/ entries, stick to the “Boosting” tab. The difference is subtle but will allow you to highlight precisely the kind of content you need your users to see.

“Dictionary” is another section that allows for search results customization, albeit less extensive customization than with Result Mappings.

In this section you can make search results for one query appear for an entirely different one and vice versa by making those queries synonyms. Alternatively, you can create a unidirectional “type of” connection so that all results for the “sub types” of the query are displayed whenever someone searches for the “super type” but not the other way around.

Not sure which search terms could enrich your site in the watchful eye of global SEO systems? Feel free to add a link to any page from the site in this area to see what the system proposes:

Learn more about what “Dictionary” has to offer in our dedicated article.

Moving on to yet another section that controls the general behavior of your search - “Search Settings”.

The “General” tab covers all the “Preview Settings” we’ve already discussed.

At the bottom of this tab though you’ll find a nifty button which will clear your project’s cache should you ever need a clean slate:

“PDF Settings” correspond with how your PDFs’ titles, content and thumbnails are extracted:

Note: PDF Indexing is only available for our paid plans - “Columbo” and “Holmes”. The size limit in both cases is 15 MB.

“IP Settings” is about the accessibility of your search:

Here you can prevent certain IPs from using the search or simply exclude them from your search statistics. This tab also allows you to enforce strict query limits so that you’re not charged for using the search more than your plan permits.

Our Search Settings article explores all these tabs in great detail.

And now for our grand finale - the “Index” section!

Here you can see all the pages our crawler has indexed from your “Data Sources”:

As well as filter them:

Sort them by the time when the page was indexed or updated:

And export all this data:

Each page has two buttons on their very right:

• The “Show Details” button opens up a window with all the content our crawler sees on the page and can render searchable - same as the “Show Details” button in “Search Preview”:

• The “Remove” button simply deletes any given page from the Index and thus your search results:

Underneath the table with all indexed pages there are two more buttons - one that starts a full recrawl of your Data Sources, updating pages you’ve already had in your Index Log and adding new ones to it, and the other that purges the Index Log of all pages:

This section is also where you can manually add new pages to your Index Log:

or remove them from it:

Any manually added/removed pages disappear from the Index Log/appear in it again after a full re-index, so this feature is for testing purposes more than it is a genuine indexing method.

So now that you’ve explored all the features of your search in both the site editor and Site Search 360’s Control Panel, what do you do? Just press the Republish button again to display all these exciting changes on the live site and enjoy using your brand new search!

Note: You'll need to republish the site each time any configuration changes are implemented. This will trigger a full re-index, after which the search’s functionality will be updated accordingly.

Manual Integration

You’re now familiar with everything our app has to offer, and, excited as you must be with all the possibilities laid out before you, you might be wondering if you missed something. Or rather if something is missing. At least compared to Site Search 360 projects for non-Duda sites. And indeed, there are some limitations to our Duda app:

• There is no Free trial that will allow you to explore the search’s capabilities in the full glory of our most sophisticated “Batman” plan

• The Free plan is limited to 10 pages; “Columbo”, in its turn, is limited to 200

• Search needs to be added and set up separately for desktop, tablet and mobile

• Results can only be shown in overlay - they can’t be embedded or displayed fullscreen

• PDFs can only be indexed if they are listed in a separate sitemap

So now you’re left wondering whether you should move forward with easy breezy widget integration or roll up your sleeves and manually install our search to enjoy Site Search 360’s full capability. Well, not so fast, partner! Duda has something to entice you with yet:

• Paid plans are a lot cheaper: manually integrated “Columbo” and “Holmes” will cost you $9 and $49 per month respectively while with Duda the exact same monthly plans will go down to $5 and $30

• Normally, “Columbo” projects come with our branding both in the search results and the search suggestions, while Duda “Columbo” removes all branding from the search

• To update your manually integrated search, you’ll need to either wait for the next scheduled re-crawl or manually re-index the search - with Duda you can simply republish the site, and all configuration changes will be instantly reflected in the search

• With Duda no coding is required neither to integrate the search nor to customize it

• Content extraction happens automatically thanks to Duda’s default sitemaps, and the widget can even create result groups for your products and blog posts right out of the box

Still not convinced that the widget will suffice? Then here’s what you’ll need to do to integrate the search manually:

• Create an account for your site on our registration page (make sure to email us if your registration page redirects you to the Duda App Store - we'll add your new project to the Site Search 360 database ourselves and transfer ownership to you upon your first login)

• Explore your Control Panel and configure the functionality of your search - these settings are almost identical for both widget and manual integrations

• Set up the design of your search in the “Design & Publish” section of the Control Panel (explored in detail in our introductory article on the Search Designer)

• Press the “Publish” button in the top right corner of the screen to get a bundled JavaScript integration code:

• Paste said integration code in the last line of body-end.html under “Site HTML/CSS” in Duda’s Developer Mode:

• Save the changes and enjoy your brand new manually integrated search

The process isn’t necessarily tricky but definitely is less automated than for the widget. Still, the choice is entirely up to you.