The Swiftype Blog

10 Examples of Well-Designed Search UIs

Nailing your search UI design

As we mentioned in our last blog post about building search interfaces, having a well-designed UI is a critical component of a search installation. If your website visitors or app users are unable to find or effectively utilize your search bar, you will not be delivering the full benefit of your search engine.

Are you implementing search and looking for some inspiration? In general, intuitive search UI designs are easy to access, match the look and feel of the overall website, and offer autocomplete results and filters when appropriate. To give you a better idea, here are 10 examples of well-designed search UIs. 

 

1 — AppDynamics Help Center

AppDynamics has placed their search bar at the top of their help center, inviting visitors to ask their questions in a natural and direct way. As you type your query, autocomplete results are shown which helps you to quickly find helpful information. If you don’t see a relevant result, you can click the “See All Results” button, which is located on the far inner right of the search bar.

After clicking that button, you will be displayed a full page of results which you can filter using the list of content types on the left side. Additionally, if you scroll to the bottom of a results page, you will see related results that the underlying search engine thinks might be relevant to you.

 

2 — BikeTours.com Website

Search is an integral feature of the BikeTours.com website as the search bar is positioned in the center of the home page. When you click on the BikeTours.com search bar, you are presented with a dropdown that lists popular destinations and specific bike tours. After clicking the search bar, you can then either enter your search query or select a destination or bike tour from the dropdown. If you elect to enter your search query, you will be presented with autocomplete results.

If you don’t see a result that interests you, then you can click the search button and you will be directed to a results page with nicely designed cards highlighting tours. Additionally, the results page features rich filtering capabilities which enable you to filter content by categories like country, difficulty level, duration, and price.

 

3 — City of Boston Website

When you visit the homepage on the City of Boston’s website, you can access the search bar by clicking the search icon in the upper right corner. Once you click the icon, a large search bar sweeps across the front of the page. The search bar runs the length of the page and the CSS styling matches the overall design of the website quite nicely.

Once you enter your query and hit enter, then you are presented with a list of filters and some labeled search results. If you know which filter you should apply to your search, then you can check the appropriate box and apply the filter to narrow down your search. If you choose the wrong filter, you can quickly reset it without having to re-execute your search query.

 

4 — Duke University’s Fuqua School of Business Website

When you land on the homepage of Duke’s Fuqua School, you’re presented with an elegant search bar that asks, “what are you looking for?” Duke knows that many of their website visitors come to their site seeking specific information, so they’ve centered the design of their home page around a search bar. Additionally, by directing website visitors to a flexible interface like a search bar, Duke can help a wider range of people to find exactly what they’re looking for.

As you enter your search query, you are displayed with some relevant autocomplete results. You can either select one of these results or press enter to visit a full page of search results.

 

5 — Swiftype Website

To access the site search feature on the Swiftype website, you click the search icon in the upper right corner. After clicking the icon, you are presented with a large search bar and a results container that takes up the full page. Since the Swiftype search UI is a full page experience, website searchers are able to focus on the singular task of finding what they need. Additionally, the search results are large and easy to read so users can ensure they are clicking on helpful results.

As you search, the autocomplete search results continue to update. If you do end up typing out your full query, there’s no need to press enter as your complete search results will already be displayed on the page.

 

6 — TechCrunch Website

When you land on the TechCrunch website, you can access the site search feature in the upper right hand corner. The home page search UI is designed so that it’s readily available but doesn’t take away focus from hot or trending home page content.

Once you enter a search query, you are presented with a full page of results that you’re able to filter by “Most Relevant” or “Latest”. Right below the search bar, you can see how many search results have been returned. On the right left side of the page, you can filter results based on date, content type, author and other attributes. Overall, TechCrunch’s search is simple and easy to use — enabling readers looking for information on specific companies or people to quickly find engaging content.

 

7 — Harvard Law Review Website

The Harvard Law Review’s home page is clean and well-organized as users can quickly read about recent cases, jump to sections of the website such as the Blog or Forum or enter a specific search. To enter a search query, you can utilize the search box in the navigation bar under the featured article. The HLR’s home page search UI is integrated into the overall design of the page but not too subtlety styled where it would largely go unnoticed.

After you enter a query into the search bar, you are then presented with a simple list of results as well as a count for how many results were returned. If you’d like to enter a new query, you can utilize the search bar which is now positioned at the top center of the page.

 

8 — PetCareRx Website

The PetCareRx search bar starts out in the upper right hand corner of the page but expands to the full width of the nav bar when you click on it. Many people come to the PetCareRx store knowing what product or brand they are looking for so search is the ideal interface for them. This partial page search UI has one filter — “Search PetPlus-eligible items only” — which keeps things uncluttered but enables high intent shoppers to get to what they need more quickly.

If you do not select an autocomplete result when you enter a search query, you are brought to a results page where you can apply additional filters like “Category” and “Product Feature”. Below these filters, related search terms are displayed which enable shoppers to easily change their existing search or find additional products.

PetCareRx also has a search bar in their large website footer, giving them more opportunity to drive website visitors to content and products that are relevant to them.

 

9 — Twilio Help Center

Similar to AppDynamics, Twilio prominently features search in their help center. The grey-bordered search bar extends across the top of the help center right under the red header. Under the search bar, Twilio has listed some popular topics to help guide visitors who do not know exactly what they’re looking for.

As you enter a search query, relevant autocomplete results are displayed. If you do not see what you need in the autocomplete results, you can press enter and be directed to a full results page which will highlight your search term in all of the returned results. To learn more about how Twilio has leveraged search technology to improve their help center and overall customer experience, you can read this case study.

 

10 — Stitch Fix Men’s Style Guide Website

Stitch Fix’s Style Guide is a strong content marketing website that provides helpful information for both existing customers and potential future customers. Stitch Fix wants to make sure all of their high-quality content is accessible, so they’ve included a search bar on their Style Guide website.

The search bar is in the upper right hand corner of the page and stays fixed there after you enter a search query. As you enter a search term, autocomplete results are displayed but you can also press enter to be displayed a full page of search results. Although search is not a prominent feature of this website, it plays an important role in helping visitors to continue getting value from content when its not featured on the home page.

 

Implementing your search UI

At Swiftype, we provide powerful search as a service complete with customizable search UIs. We make it easy for you to get a search engine up and running by providing a web crawler and API for ingesting data, an intuitive admin dashboard for managing your search experience, and multiple options for implementing your search UI including our search and autocomplete jQuery libraries. Ready to get started with Swiftype? Sign up for your 14-day free trial here.

How to Build a Search UI

You need a powerful search backend + a well-designed UI

Depending on the purpose and scale of your website or app, search can be a critical feature that enables your users to quickly find the information they need. While the backend of a search installation is critically important, your users will not be able to get the full benefit of your search engine without an intuitive user interface.

At Swiftype, we provide search as a service to completely handle the backend of your search engine, but we also help you to build well-designed search UIs. In 3 simple steps, you can have a functioning search UI implemented in your website or app. Read on to learn how.

Step 1 — Create a Swiftype account and index your data into Swiftype

We offer a customizable web-based crawler as well as an extensively documented API for indexing your data. If you need to create a Swiftype account, you can do that here.

 

Step 2 — Customize your search results

Swiftype enables you to customize search results on a query-by-query basis (result ranking), adjust the weights placed on your data types (weights), and create synonym groups through a dashboard (synonyms). For full programmatic control of your search engine’s relevancy, you can leverage the Swiftype API.

 

Step 3 — Implement your search bar

How you preform step 3 is determined by whether you used the crawler or API to index your data.

How to implement your search bar if you indexed your data with the crawler:

If you used the Swiftype crawler to index your data, then you can copy the code given to in your Swiftype dashboard and paste it onto your web pages where you want a search bar to appear. As noted in your Swiftype dashboard, if you already have a search bar on your website, you will need to add the class ‘st-default-search-input’ to that input field.

Since you’ll likely want your search UI to match the design of the rest of your website, Swiftype makes it easy to customize the appearance of your search bar and results container. To customize your search installation, simply click the “Edit Install Setup” or “Edit Appearance” cards under the “Customize Your Installation” portion of the Swiftype onboarding flow. You can also access the customization features by clicking the “Install Search” tab on the dark blue side bar.

As you experiment with the look and feel of your search, you can preview your changes in the Swiftype dashboard (before pushing your changes live). For more information on configuring the look and feel of your search engine, check out this video tutorial

Note that you can also customize your Swiftype search bar installation through CSS directly on your web page. Here’s a tutorial that introduces you to customizing Swiftype visual styles with CSS.

How to implement your search bar if you indexed your data with the API:

When you use the Swiftype API, the standard embed install code for implementing search on your website is not available because it doesn’t work with custom Document Types. Therefore, you’ll need to implement your search UI using the Swiftype search and/or autocomplete jQuery libraries which are written to be flexible based on your specific use-case. While implementing your search bar with these libraries gives you more control over the look and functionality of your UI, they also require a greater understanding of HTML, CSS, and Javascript.

Let’s walk through implementing your search UI using the autocomplete jQuery library.

Step 1 — Add the Swiftype library code to your codebase. Note that you need to add a Javascript and CSS file (unless you want to write all of your own CSS).

Step 2 — Include the following code in the header of your web pages where you want your search bar to appear. Note that you need to include a reference to the latest version of jQuery.

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.swiftype.autocomplete.js"></script>
<link type="text/css" rel="stylesheet" href="autocomplete.css" media="all" />

Step 3 — Add a search input field to your website. If you already have a search input, then add the id ‘st-search-input’ as the input’s id. Your code would look something like this:

<input type='text' id='st-search-input' placeholder='Search' style="width: 300px;"/>

Step 4 — Include a Javascript snippet on pages where you want your Swiftype search engine to work. Keep in mind you will have to use your own Swiftype engine key which you can find on the right side of on the “Overview” tab of the Swiftype Dashboard.

<script>
$('#st-search-input').swiftype({
        engineKey: 'your_engine_key'
});
</script>

Step 5 — Optional: Customize your search queries and how your results are displayed. For example, you can specify a result limit for search queries and explicitly list the fields you want returned for each document type.

Specify a result limit:

<script>
$('#st-search-input').swiftype({ 
	engineKey: 'your_engine_key',
	resultLimit: 20
});
</script>

Fetching only the fields you specify:

<script>
$('#st-search-input').swiftype({ 
	fetchFields: {'books': ['title','genre','published_on']},
	engineKey: 'your_engine_key'
});
</script>

For more information on customizing your search UI with the Swiftype jQuery libraries, see this tutorial. In addition, we have some helpful documentation on the search and autocomplete GitHub pages.

In Review: Getting your search UI to production

How is your search implementation going? Hopefully, you were able to get up and running with Swiftype and implement a beautiful search bar on your website. If you’re struggling to get your search bar set up, feel free to reach out at support at swiftype.com. Happy building!

How to Migrate from Google Site Search to Swiftype

Google Site Search is sunsetting 🌇

As you likely know by now, Google has discontinued the sale/renewal of their Google Site Search (GSS) product. On April 1, 2018 the product will be completely shut down. Since your website will (hopefully) not also be shutting down, it’s about time to replace your GSS with another site search solution.

What about Google Custom Search as a replacement?

Google plans to keep their Custom Search (CSE) product running so you may be thinking of switching over to that solution. What’s great about CSE is that it’s free. What’s not so great is that ads will show up in the search results and you have little control over the UI. In addition, you will face query limits if your website gets serious traffic and your new content will take a while to be indexed for search.

As Search Engine Land stated in their article covering the sunsetting of GSS, “Google Custom Search is a great solution for small blogs, and maybe even local businesses, but if you’re already scaling on a large level — or plan on advertising at state, country or global level — Google Custom Search will not fit all of your needs.”

How Swiftype Site Search stacks up against GSS

If Google Custom Search doesn’t meet the search needs of your business, then you can easily switch over from GSS to Swiftype Site Search. Swiftype matches GSS’s ease of use, but it offers a far richer feature set, including the ability to customize your search results at a granular level. With the ability to completely control what content is included in your search engine and how it is ranked for search, you can utilize Swiftype to drive visitors to high-value content and impact your bottom line.

Here are some of the powerful features of Swiftype:

Indexing control — Swiftype gives you full control over when your content is visited by our web crawler so your search engine stays up-to-date. With Swiftype you can, on-demand, have us recrawl your entire site, a single URL, or you can just login to our dashboard and delete/edit a page manually.

Customize how Swiftype crawls your content — By default, Swiftype will crawl your entire website (up to page limit of your plan), but we make it easy to exclude or include portions of your site as well as individual web pages. To include/exclude portions of your site, you can use the Swiftype dashboard to whitelist/blacklist certain URLs or set up rules in your robots.txt file. To customize what data from each of your individual web pages is included in your search engine, you can utilize meta tags and body-embedded data attribute tags.

Ranking customization — By default we rank your search results intelligently, but in the end we believe it’s your website, so you should have the final say. We let you add to, remove from, and fully re-order the search results for any keyword on your site, all through our web-based dashboard. You can also adjust the weights placed on your data fields and create synonyms which are groups of terms that are treated equally for the purposes of search (car = vehicle).

Analytics — We offer a built-in suite of search analytics in our dashboard. These analytics range from simple (e.g. graphing the trend of total searches per day over time), to the more interesting (e.g. “Most popular searches with zero results”). These analytics are collected by default and in real-time, with no additional work needed on your end, and our algorithms use them to automatically improve your search results over time.

Are you a Google Analytics aficionado? Swiftype offers a Google Analytics integration.

Mobile ready — Our JavaScript-based search widgets were built from the ground up to offer a great experience for mobile users, without requiring additional configuration by the site owner. Even on non-mobile optimized sites, once you tap a Swiftype-powered search input, we take over the mobile browser and make sure mobile users get an optimal search experience.

Developer-friendly — Swiftype was designed to be easy to start using, but customizable enough to accommodate the wide variety of Site Search implementations you see on the web. To that end we offer a powerful API and client libraries in many popular languages including Ruby, Python, Node.js, jQuery, Java, iOS, and Android.

For an in-depth view of how Swiftype stack up against GSS and Custom Search, check out this comparison chart.

How to migrate from GSS to Swiftype Site Search in 4 simple steps

Are you convinced that Swiftype is the next site search solution for you? Here’s how you can get set up. And no, we didn’t forget any steps; it’s really this easy!

  1. Create a Swiftype account — We offer a 14-day free trial so you can really get a feel for Swiftype before committing to anything.
  2. Index your data — As we mentioned in the features overview section, it’s really easy to get your data into your Swiftype search engine. We offer a customizable web-based crawler as well as an extensively documented API for indexing your data. If you’d like some help on getting set up, we offer special GSS migration assistance. You can sign up here.
  3. Customize your search results — Swiftype enables you to customize search results on a query-by-query basis, adjust the weights placed on your data types and create synonym groups. For full programmatic control of your search engine’s relevancy, you can leverage the Swiftype API.
  4. Implement your search UI — Last but certainly not least, you will need to add your new search engine to your website. If you indexed your content using the web crawler, you can simply copy and paste the code given to you in the Swiftype dashboard into your website source code. If you’d like to customize your search UI’s appearance, you can configure the layout and color of your search bar and results directly from the dashboard. For full customization of your search UI, you can use the Swiftype search and autocomplete JQuery libraries.

Ready, set, migrate!

After hearing more about Swiftype’s features and ease of use, are you ready to migrate over? We’ve already helped many organizations including NYU Libraries and the City of Portland switch from GSS to Swiftype. We are happy to provide you with migration assistance so that you can have a quick and easy migration from GSS to Swiftype.

Build vs. buy: Evaluating full-featured search as a service for your business

Building your own search vs. buying search as a service

You’ve been tasked with implementing a search engine, and you’re trying to decide if you should build your own search or utilize search as a service. As you can imagine, building your own search requires a significant investment of time and resources. Depending on your use case and resource constraints, you will evaluate your options and move forward with a search implementation that makes the most sense for your project.

Key concerns for choosing a search implementation method for your project

Development resources – The first key concern for deciding how to implement search is whether you have a developer or development team that can work on the project. If you don’t have at least one developer for your search project, then you know you should go with search as a service. If you do have development resources, then project timeline is probably the next constraint you’ll want to consider.

Project timeline – How soon does your new search engine need to be up and running? Even if you have development resources for your project, it may make more sense to utilize a pre-built search solution rather than architecting your own, especially if your search engine needed to be implemented yesterday.

Scope of project and desired level of customization – If your search engine requires a high level of customization, it may make more sense for your team to build it. Although it will take some time to custom build your search engine, you will have full control over the end solution. On the other hand, if you go with a pre-built solution, there is only so much you can change. A good example of a company choosing to build their own search is Dell for their e-commerce website search engine.

Swiftype — Full-featured search as a service, built on the Elastic Stack

At Swiftype, we provide a full-featured search as a service solution built on top of the Elastic Stack (Elasticsearch, Beats, Logstash, Kibana), a powerful technology for indexing, searching and visualizing data in realtime. If you’re a developer, the Elastic Stack is an extremely useful technology for building search engines. But, if you’re not a developer or you don’t have development resources available to you, using the Elastic Stack to implement search may not be an option.

Enter Swiftype — a search as a service solution that’s easy to implement. Swiftype enables you to index your data, fine-tune your search results through an intuitive dashboard, and implement your search UI by dropping a javascript snippet into your website source code.

Swiftype + Elastic: We know search

What’s nice about Swiftype is that we are owned by Elastic so our product is officially supported by the makers of the Elastic Stack, an open source technology that has more than 150 million downloads worldwide. The Elastic Stack is the go-to search technology for companies like Dell, Yelp, Goldman Sachs, Facebook, and Instacart; Swiftype makes that technology easily accessible to businesses and teams of all sizes and technical competency.

The Elastic Stack is the go-to search technology for companies like Dell, Yelp, Goldman Sachs, Facebook, and Instacart; Swiftype makes that technology easily accessible to businesses and teams of all sizes and technical competency.

What is full-featured search as a service?

Does it seem like Swiftype might be the ideal solution for your search use case? Let’s dig into what full-featured search as a service means and learn about how it can help your business.

Index as much data as you want – Swiftype enables you to easily index all of your data that you want to make searchable. There are two methods for indexing your data into Swiftype:

  • Crawler – Swiftype’s crawler gathers and indexes data from your web pages in a similar manner to the way Google crawls data for its internet-wide search engine. To get started with the Swiftype crawler, you simply input your website’s URL and Swiftype will begin indexing your content. For more on getting started with the Swiftype web crawler, read this blog post.
  • API – The Swiftype API gives you full programmatic control over the content in your search engine, enabling you the set the schema for the data that you index. For more on getting started with the Swiftype API, read this blog post.

If you’re trying to decide whether to use the crawler or the API, check out this blog post written by Swiftype cofounder Quin Hoxie.

State of the art relevance, right out of the box – Once Swiftype has indexed your content, you can begin utilizing your search engine. Because Swiftype is built on the Elastic Stack, the search engines we create for your data return very relevant results right out of the box.

Fine-tune your search results through an intuitive dashboard – No coding is required to tweak the relevancy of your search engine. If you do prefer to programmatically control your search engine’s relevancy, you can use the Swiftype API.

  • Result Rankings – Utilize a drag-and-drop interface for ranking search results on a query-by-query basis. For each search term, you can also delete results that you don’t want to include and add results that are not included by default.

  • Weights – With a simple slider, you can adjust the weight placed on a field and then immediately test the impact that the change has on your search engine. If you don’t like the changes, you can restore the default settings with the click of a button.

  • Synonyms – Create groups of terms that will be treated as equivalent for the purposes of search (car = vehicle).

Robust search analytics – Your search bar is a great source of actionable data and Swiftype provides all of your user search data in a dashboard. You can use Swiftype Search Analytics to view:

  • Volume of search queries
  • Popular search queries
  • Queries returning no results
  • CTRs on search results

One meaningful way we’ve seen our customers utilize search analytics is for data-driven content development. Our customers will look at what popular search results are returning no results and then create content to fill those voids.

Search bar implementation – If you use the Swiftype crawler to index your data, then you can copy the code given to in your Swiftype dashboard and paste it onto your web pages where you want a search bar to appear. As for customizing your search installation’s appearance, Swiftype enables you to configure the look and feel of your search experience directly from the dashboard. For more information on customizing the appearance of your Swiftype installation, watch this video tutorial.

If you use the Swiftype API to index your data or if you want to fully customize your search UI, you can use the Swiftype search and autocomplete jQuery libraries to implement your search bar.

For those who are more technically-savvy, Swiftype’s API is extensively documented and enables you to build the search engine you want for your website or app.

Developer friendly – For those who are more technically-savvy, Swiftype’s API is extensively documented and enables you to build the search engine you want for your website or app. The Swiftype API endpoints enable you to easily index your data, perform and customize search queries and access analytics. Furthermore, if you’d prefer to interact with your Swiftype search engine via a client library, we currently support libraries for:

In review: Should we build or buy?

After reviewing some of the core features and capabilities of Swiftype Search as a Service, hopefully you have a better idea of whether or not it’s an ideal solution for your search project. To summarize, search as a service is a great option for projects that need to be implemented quickly and that don’t require a large amount of customization. If you’re building search for a specialized use case and you have a development team to support your project, then building your own search may be the way to go. Ultimately, if you’re leaning towards rolling your own search, I would first check out Swiftype as it’s a great starting point for search projects of all sizes. 

Want to try out Swiftype Search as a Service? You can sign up for a 14-day free trial here.

City governments: Better serve your citizens through intuitive website search

Providing critical information to your citizens

As a city government, you’re a critical source of information for your citizens. Whether you’re a small city of 15,000 people or a metropolis with millions of people, you’re relied on to keep track of your city’s records and make them easily accessible to your citizens.

On a daily basis, citizens come to you with questions about city codes, community events, utilities and many other things that impact their lives. Although there’s a few ways that people can get this information, it’s likely that many of them prefer to get it from your website.

After all, what do you do when you want to find out who won the game last night or who the mayor of Cleveland is? You fire up your web browser, go to your favorite search engine and search for it. Almost instantly, you have your answer.

Search as a window for information

These days, websites are a major source of knowledge and search is an excellent interface for accessing information and getting the answers we need. But sometimes, we forget that we can apply advanced search technology to our government websites so that our citizens can quickly get their questions answered, regardless of who they are and what they’re looking for.

At Swiftype, we specialize in building relevant site search technology and making it incredibly easy to set up on your website. We feel quite fortunate to be working with some innovative cities like Wilson and Portland and we wanted to highlight their Swiftype success stories.

 

City of Wilson (NC) + Swiftype

The City of Wilson is situated in the heart of eastern North Carolina and prides itself on innovation and service excellence as it serves its 50,000 citizens. Know as the birthplace of BB&T, Wilson is about 40 miles east of Raleigh and enjoys a diverse economy based on agriculture, manufacturing, commercial, and service businesses.

During a recent overhaul of the city’s website, Wilson’s IT leadership decided to upgrade their site search technology. After evaluating a few options, the City of Wilson chose to go with Swiftype, citing easy implementation and out-of-the-box relevancy as major drivers of their decision.

External and internal use cases

The City of Wilson actually rolled out Swiftype for both their external, citizen-facing website as well as for their internal departments enabling them to better serve their citizens and boost productivity across their organization. Since implementing Swiftype, the City of Wilson has “gotten great feedback both internally and from citizens”, according to Brandon Evans, a Technical Services Representative for the city.

Here are 3 ways Swiftype Site Search has helped Wilson:

  • Better way to navigate content – Swiftype has allowed citizens and city employees to quickly and easily find the information they need, regardless of what they are looking for
  • Accessibility – The City of Wilson has featured search prominently on their website, directing citizens to utilize the search bar to get their questions answered
  • Analytics – Swiftype’s robust analytics dashboard enables the City of Wilson to see what people are searching for most frequently, what high volume searches are returning no results and what results people are (or are not) clicking on

“Search is very much an early warning system for us” – Will Aycock, General Manager

Hurricane Matthew: How search comes in handy during natural disasters

In October 2016, Hurricane Matthew made landfall in the Southeastern United States after causing severe damage in the Caribbean nations of Haiti, Cuba, and the Bahamas. As the storm closed in on the North Carolina Coastline, citizens from Wilson turned to wilsonnc.org to give them answers about for flood prevention materials, roadway hazards, and other information on storm-related city services. Although Wilson is about 100 miles from the Coastline, the city was still expected to receive high winds and lots of rain.

Using search analytics to identify and pinpoint issues

As the storm closed in, Swiftype’s real-time search analytics gave the City of Wilson early insights into potential issues and helped them to identify what was important to citizens. As Wilson saw people searching for critical time-sensitive information like street closures, they were sure to keep their website up-to-date. Since Swiftype quickly indexes new content and updates your search engine, the City could be confident that its citizens had access to accurate information so they could avoid flooded areas.

As more and more flood-related search queries rolled in, the City of Wilson decided to build a dedicated app to show which streets were flooded. The app, which was built in response to data from the Swiftype analytics dashboard, proved to be a huge help to citizens.

 

City of Portland (OR) + Swiftype

With a population well over 600,000, Portland is the largest city in Oregon. Over the past 20 years, Portland has seen a significant boom in the the technology and creative marketing industries and its GDP per person has grown by 50%. In 2015, Oregon was the most popular moving destination, according to United Van Lines.

Replacing Google Site Search with Swiftype

Richard Davies, a web application developer for the City of Portland, recently replaced an installation of Google Site Search with Swiftype. Turning to Swiftype as a turn-key solution to replace the sunsetting Google Site Search product, the City of Portland was able to get up and running with Swiftype in about an hour.

“Swiftype Site Search is very easy to use and I was able to implement the basic search functionality in about an hour.” – Richard Davies, Web Application Developer for the City of Portland

Portland was excited to test out the advanced features of Swiftype including drag-and-drop results ranking, custom weighting and synonym groups. After using Swiftype for a few months, Richard and his team grew appreciative of our relevant results, support team, and robust documentation. Overall, the City of Portland has found Swiftype to be a powerful and full-featured site search solution that meets the needs of their citizens.

Getting started with Swiftype Site Search

To get started with Swiftype, you just enter your website’s address and Swiftype will index your site and create your search engine in real-time. No coding is required, but developers can use the API for extra control. Swiftype can index any amount of content and new content is indexed automatically, so your search is always up-to-date.

A free trial makes trying Swiftype risk free

Want to try out Swiftype Site Search for your website? You can sign up for a free trial here.

Building and Architecting a Search Platform on Elasticsearch

In case you haven’t heard, Swiftype has recently joined forces with Elastic, the makers of popular open source products such as Elasticsearch, Kibana, Beats, and Logstash. Launched during the Y Combinator Winter 2012 Batch by Matt Riley and Quin Hoxie, Swiftype has been an early adopter of Elasticsearch — leveraging the technology to revolutionize the way people find information across their organization and on public facing websites and applications.

Since our founding in 2012, we’ve added many popular features to our Site Search product including drag-and-drop results ranking, weighting and a robust analytics dashboard. Along our journey, we’ve been fortunate to serve customers like Lyft, Cloudflare, Twilio, AT&T, Qualcomm, Duke University, and TechCrunch. In working with these incredible organizations and thousands of others, we’ve been able to continually improve our product offerings and provide best-in-class hosted search for use cases of any scope and scale.

So how did we get here? Join us on November 29 for a live webinar and learn how Swiftype was able to scale and build a search platform with Elastic’s open source products. Swiftype founders and newest members of the Elastic team will conduct a presentation on building a robust search solution (and company) on top of the Elastic Stack.

Swiftype Site Search Analytics

Matt and Quin will go over the following topics:

  • Architectural approach to building a SaaS search solution
  • Scaling to support 100s of thousands of search engines across 10s of thousands of customers.
  • Upgrading to the latest versions of Elasticsearch and tips to minimize downtime
  • How Swiftype simplified the power and complexity of Elasticsearch to give control to non-technical stakeholders
  • Leveraging Kibana and Logstash to monitor and analyze IT operations and customer support

Webinar Details:

Date: Wednesday, November 29, 2017
Time: 9 a.m. PST / 12 p.m. EST / 5 p.m. GMT/ 6 p.m. CET
Featured Speakers: Matt Riley and Quin Hoxie

Swiftype Crawler overview: Easily index your website content for search

Why use the Swiftype Web Crawler?

Easily index your website content for search

The Swiftype web crawler, Swiftbot, is a quick and easy way to index your website’s content for search. While you can also index your content using the Swiftype API, utilizing the web crawler requires less technical know-how and generally enables you to implement your site search faster. If you’re trying to decide whether to use the crawler or the API, check out this blog post written by Swiftype cofounder Quin Hoxie.

Swiftype’s crawler gathers and indexes data from your specific website in a similar manner to the way Google crawls data for its internet-wide search engine. To get started with the Swiftype crawler, you simply input your website’s URL and Swiftype will begin indexing your content. Once your website has been crawled, you can use the Swiftype dashboard to review your indexed content, customize your search results, and view analytics.

Getting started with the Swiftype Web Crawler

Here’s a quick overview of how to get started with the Swiftype web crawler. For additional information, check out our Crawler Quick Start Documentation.

Create your search engine

To use the Swiftype crawler, you will first need to create a new search engine in your Swiftype dashboard and then enter your site’s URL. Still need to create a Swiftype account? You can sign up here.

Preview your search engine before implementation

After your URL has been verified, Swiftype will begin indexing your website’s content. If you have a sitemap, Swiftype will use it as a starting point for crawling your site. When all of your content has been indexed and your search engine is ready, Swiftype will notify you with an email. If you would like to test out your search engine before implementing it on your site, you can preview your search experience directly from the Swiftype dashboard.

Installing a search box on your website

When you’re ready to install a search bar on your website, you can copy and paste the code given to you in the Swiftype dashboard.

Customizing the look and feel of your search

Since it’s likely that you’ll want your search UI to match the design of the rest of your website, Swiftype makes it easy to customize the appearance of your search bar and results container. To customize your search installation, simply click the “Edit Install Setup” or “Edit Appearance” cards under the “Customize Your Installation” portion of the Swiftype onboarding flow.

As you experiment with the look and feel of your search, you can preview your changes in the Swiftype dashboard (before pushing your changes live). For more information on configuring the look and feel of your search engine, check out this video tutorial.

Indexing new website content

After Swiftype has indexed your content and you’ve implemented your search engine on your website, Swiftype will continue reindexing your content according to your plan level. If you make changes to your website and would like to manually trigger a recrawl, you can do so from the Swiftype dashboard.

Customizing your crawl

Provide direction to the Swiftype web crawler

By default, Swiftype will index your entire website (up to page limit of your plan). In order to optimize the search experience on your website, it’s likely that you will need to customize how the Swiftype crawler indexes the content on your site. For example, you may want to exclude certain pages or portions of pages on your website from being indexed by your search engine. 

How to customize your crawl

When it comes to customizing how Swiftype indexes your website content, you have a few options.

Excluding/Including portions of your site:

  • Domain path exclusions – Use the Swiftype dashboard to whitelist and/or blacklist portions of your website
  • Robots.txt rules – Swiftype will adhere to the rules set in your robots.txt file
  • Robots meta tag – Swiftype will adhere to the rules set in your robots meta tag

Excluding/including portions of a page (such as header and footer):

Use meta tags to explicitly set what data is extracted from a page (override default crawler settings):

  • Meta tags – Deliver structured information to the Swiftype web crawler and determine what content on your pages will be made searchable
  • Body-embedded data attribute tags – If you’d prefer to set what data will be indexed inside the body of your pages (rather than using meta tags), you can add special html tags to your existing source code

Additional information:

Swiftype Joins Forces with Elastic

We are thrilled today to announce that Swiftype is joining forces with Elastic, the makers of Elasticsearch. This new alliance will accelerate the development of new features and tools that will make it easier for you to manage and deploy world-class search functionality to your website or organization. The Swiftype product suite will continue to serve our existing and future customers, and we could not be more excited for the road ahead. The full copy of our joint announcement (also available on the Elastic blog) follows:

A note from Shay Banon, CEO at Elastic

I am thrilled to announce that Swiftype is joining forces with us. Swiftype is the creator of a highly-regarded, popular SaaS-based Site Search product and a newly launched Enterprise Search product. Meet Matt and Quin in a Swiftype webinar coming up on November 29.

Some of you may be wondering, why is a company focused on building SaaS search applications joining forces with a search technology company?

As I’ve said, I’ve always viewed ‘search’ as a wonderful foundation to solve many different use cases, whether it is search embedded in an application; search used for logging, security, or metrics; or search being used to create a whole set of new applications and products. Well, Swiftype did this. They built an entire company focused on making it simple for users to put a search box on their websites or within their applications and an enterprise search product for organizations to manage disparate content from various web applications.

Swiftype’s first product is Site Search. If you go to websites like Asana, Shopify, SurveyMonkey, and TechCrunch, that’s the Swiftype Site Search product powering the search box experience. And under the hood of Site Search, is Elasticsearch. In fact, Swiftype has been using Elasticsearch for a long time, since Elasticsearch version 0.90 for indexing and storing searchable content. Like so many other successful SaaS companies do, Swiftype created an amazing user interface and a lot of infrastructure around Elasticsearch to provide an incredible SaaS-first Site Search experience. I’m excited to announce that Site Search will be offered with a new introductory subscription plan starting at $79/month (explore with a free trial). This will allow customers to grow at their own pace. In addition, Swiftype’s Site Search also provides an ideal migration path for Google Site Search (GSS) customers.

Earlier this year, Swiftype released its second product, Swiftype Enterprise Search. This product has web crawlers and out-of-the-box connectors to cloud applications like Atlassian, Box, Dropbox, Github, Google Apps, Microsoft Outlook, Salesforce, Slack, Zendesk, and an API to build custom connectors. With the EOL of traditional enterprise search products like GSA (Google Search Appliance), Swiftype Enterprise Search meets the needs of today’s modern organization using many cloud-based shared and private content repositories. Effective immediately, Swiftype’s Enterprise Search product will be available as a beta via trial request. As we move towards making it GA, our combined engineering teams will integrate more capabilities of the Elastic Stack and X-Pack into this product, as well as make this product available as both a SaaS service and on-premise solution.

I’d like to welcome the entire Swiftype team, customers and community to the Elastic family. It’s really exciting that Swiftype’s founders — Matt Riley and Quin Hoxie — and the Swiftype team are joining us to further extend our vision to offer tailored solutions on top of the Elastic Stack.

Now some words from Swiftype’s founders.


A note from Matt Riley and Quin Hoxie

Swiftype set out to build a cloud-based search platform that dramatically simplified the process of creating powerful, high-quality search experiences. With the ever-growing amount of content published on the web, and with consumers expecting intuitive search tools, the need for world-class search capabilities is greater than ever before for businesses of all sizes. Our ongoing goal has been to stay ahead of this need by delivering incredible search for any team, technically savvy or not.

When we began designing our own infrastructure, we made an early bet on Elasticsearch as a foundational technology in our system — and it turned out to be a good one. Elasticsearch not only powers our primary search functionality, but has also grown to support a wide variety of other product and operational use cases. Suffice to say, we have been power users of Elasticsearch for almost as long as is possible, and we’re thrilled to now be part of this incredible team spearheading the next wave of innovation in search.

It quickly became obvious when meeting the team at Elastic that it was a special company, and as we learned more about Shay’s vision for the future, we were confident that we had found an amazing partner in the pursuit of our mission. As part of Elastic we could not be more excited to continue innovating with the Swiftype product suite and delivering an amazing service to our customers around the world.

Swiftype API overview: Customize your search engine

Why use the Swiftype API?

The Swiftype API gives you full control over your search engine

The Swiftype API gives you full control over the schema of your search engine and the content that you index. With the Swiftype API endpoints, you are able to index data, execute search queries, and access rich analytics.

When you use the Swiftype API to index content for your search engine, you can still use the Swiftype Dashboard to fine-tune the relevancy of your search engine. With the Swiftype Dashboard, you can re-rank search results on a query-by-query basis, adjust the weights placed on each of your data fields, and set synonyms.

Swiftype REST API and Client Libraries

Swiftype’s API is a JSON-based REST API, making it easy to use with a JSON parser and HTTP client. Swiftype also supports a read-only public API with JSON, so you can execute cross-domain search requests instead of tunneling through your server. Furthermore, if you’d prefer to interact with your Swiftype search engine via a client library, we currently support libraries for:

Getting started with the Swiftype API

Here’s a quick overview of how to get started with the Swiftype API. For more detailed information, check out our API Quick Start Documentation.

Create a schema that fits your data model

Your schema will determine what content Swiftype will index and how it will be configured for search. When designing your schema, you’ll need to create a Document Type for each set of Documents that you wish to make searchable.

From a high level, you’ll design your schema for each set of Documents by determining which data fields to index and what types they should be. Then, you’ll create a Document Type to hold the set of Documents that will conform to the schema you’ve designed.

For more information, check out our Schema Design Tutorial.

Perform an initial content index

When you’re ready to start indexing your content, you can use a few different bulk operations to get your data flowing to Swiftype.

Indexing a very large number of documents? Consider using the Swiftype asynchronous indexing API.

Update Swiftype documents when your database is updated

When an item in your database changes, you’ll need to update it in Swiftype so that your search engine stays up-to-date.

In general, the approach to using the Swiftype API will follow this pattern: perform a create_or_update request when content is saved and a delete request when content is removed (or hidden).

Building your search UI

When you use the Swiftype API, the standard embed install code for implementing search on your website is not available because it doesn’t work with custom Document Types. Therefore, you’ll need to implement search using the Swiftype Search jQuery plugin which is written to be flexible based on your specific use-case. To get started with the plugin, you will need to have at least three elements on your page: a form, an input field within the form, and a container for results.

Key API Endpoints and Public API

Key API Endpoints:

  • Search – The search endpoints enable you to search an entire engine or a single Document Type and customize the search query that you execute.
  • Autocomplete – The Autocomplete endpoint supports nearly all of the same options as the search endpoint, but performs prefix matches on fields rather than token matching.
  • Indexing – Once you’ve created your search engine and set up your schema, you can index your data using the Indexing endpoints. Note that you’ll have to keep your Swiftype engine up-to-date by hitting the Swiftype API whenever your database is updated.
  • Analytics – The Analytics endpoints allow you to extract and record analytics information from a search engine. These endpoints provide the same analytics details that are available in the Swiftype dashboard.

Read-only Public API

In addition to the private API which is secured with your API key, Swiftype supports a read-only public API that uses your Search Engine’s Engine Key. The public API is read-only, so it is appropriate for using from client-side JavaScript or a mobile app where you do not want to expose your read-write API key.

 

Have questions or interested in learning more about Swiftype Site Search? Head over to the Swiftype Community Forum.

Dreamforce Sessions: Connect Salesforce to your Universe of Cloud Apps

There are so many amazing things happening at this year’s Dreamforce! From 3,200+ sessions (including a keynote with Former First Lady Michelle Obama) to the Dreamfest concert featuring Alicia Keys and Lenny Kravitz, you know it’s going to be another memorable week of fun and learning with your fellow Trailblazers!

As you know, Swiftype is excited to sponsor Dreamforce for the first time this year. Our team will be at the Customer Success Expo to show you how your company can boost sales productivity and customer engagement by connecting Salesforce to your universe of cloud apps with Swiftype’s AI-powered search.

As you are mapping out your agenda, be sure to catch one of our 20-minute Partner Theater Sessions, featuring Jonas Lavoie (@iamjll), from Swiftype’s product management team.

Connect Your Universe: Search, Explore and Discover Salesforce Data and Beyond

Use Swiftype Enterprise Search to search across all your cloud data sources and deliver AI-powered, highly-relevant results in a single search experience all without leaving your Salesforce environment.

Date: Monday, November 6
Time: 2:00 p.m. – 2:20 p.m
Location: Moscone South, Partner Theater 4
Bookmark Session

Date: Wednesday, November 8
Time: 2:30 p.m. – 2:50 p.m
Location: Moscone South, Partner Theater 4
Bookmark Session

Search that works: Salesforce Communities, Websites and Beyond

Create custom and powerful website search with Swiftype, thanks to seamless indexing, best-in-class relevance, and intuitive customization features. Get the control and insights you’ve always wanted from your search.

Date: Tuesday, November 7
Time: 10:30 a.m. – 10:50 a.m
Location: Moscone South, Partner Theater 4
Bookmark Session

 

Can’t make the sessions? Come by and see us at booth #1928

 

Subscribe to our blog