The Swiftype Blog / Category: Developer

App Search is Now Generally Available

Note: The full App Search GA post is available on the Elastic blog.

We’re excited to announce that the Elastic App Search Service (powered by Swiftype) is moving out of Beta today and into General Availability. Since announcing App Search at Elastic{ON} in February, we’ve had the pleasure of interacting with a large number of our early adopters, hearing about their experiences with the product, and incorporating that valuable feedback into this latest release. We’re confident that App Search is ready for production deployments now, and as the first major release since Swiftype joined forces with Elastic last year, our team is thrilled to see what the Elastic community builds with App Search.

Powerful new search product built for developers

For those of you who missed our initial launch announcement, App Search is a search-as-a-service solution designed to simplify the process of building rich, user-facing search experiences. We leverage the incredible power of Elasticsearch and focus it squarely on powering search experiences in software applications of every kind — from ecommerce websites, to SaaS applications and mobile apps.

Elastic App Search key benefits

Developers using App Search are able to build search experiences much faster, due to three key factors:

  1. Simple Implementation: features such as schemaless indexing and built-in typo tolerance, in conjunction with a library of first-party API Clients, enables developers to be up-and-running in minutes.
  2. Cloud-Based SaaS Model: no need for on-premise deployment, infrastructure provisioning, or long-term maintenance. Simply create an account and get started immediately.
  3. Seamless Scalability: App Search is designed to scale seamlessly and painlessly as your usage increases.

Getting started

To learn how to get started with App Search, read our full blog post on elastic.co and we’ll guide you through the basics of creating an App Search-powered search experience. And be sure to join us for the Elastic App Search webinar on June 6th for an overview and live demo of Elastic App Search.

Introducing Swiftype App Search: Now Available in Public Beta

Note: The full App Search announcement post is available on the Elastic blog.

Powerful new search product built for developers

Since joining forces last November, the Swiftype team at Elastic has been busy developing a powerful new search product for developers. This new product is called App Search, and it extends core Elasticsearch functionality to provide a set of intuitive tools and building blocks for creating modern, user-facing search experiences. App Search is now in public beta, and we’re excited to get feedback from the developer community.

What is App Search?

Relevant search for your applications — right out-of-the-box

App Search is a search-as-a-service solution that simplifies the process of building rich search experiences. It’s designed to power search in software applications of every kind — from ecommerce websites, to SaaS applications, to mobile apps.

The product delivers the full power of Elasticsearch but abstracts away the complexities of building a relevant search engine from the ground up. Right out-of-the-box, App Search enables developers to implement search experiences with highly relevant results, fast autocomplete matching with typo-tolerance, faceting and filtering and more.

Ships with dashboard for managing your search engine

App Search ships with a beautiful administrative dashboard that assists you during the development process and helps you easily customize your search engine for the unique needs of your application. Inside the dashboard, you can inspect log files, fine-tune search relevance options, and tweak search results for specific search queries.

Built-in search analytics

Analytics are an important component of search implementations and App Search doesn’t fall short in this category. After you add App Search to your application, it will automatically collect metrics like popular queries which help you to recognize trends in user behavior and continuously improve relevance.

Hosted search API means no infrastructure management and quicker implementations

Finally, just like Swiftype Site Search, App Search is a SaaS product which means zero time spent configuring and managing infrastructure as well as quicker product implementations. Now, instead of regularly investing time in maintaining and scaling your search infrastructure, you have relevant and reliable search through a simple API call.

Why did we build it?

Hop over to the Elastic blog to learn more about why we built App Search.

Trying out App Search

Calling all developers

We’re inviting developers to join the publicly accessible beta and give App Search a test drive. Your feedback is welcome as we iterate rapidly towards a general release in the coming months. You can send your feedback directly to [email protected].

Now that we are part of Elastic’s engineering team, we look forward to building new features and tools that make it easier to deploy and manage world-class search functionality in your applications, on your website, and inside your organization.

Free vs. Paid: Comparing Google Custom Search and Swiftype

Free Site Search

When many people think about search, they think about Google, so it’s only natural that Google’s Custom Search Engine (CSE) solution is a popular choice for site search installations. Additionally, Google Custom Search is a free product (supported by ads), so it’s an attractive solution for smaller websites and non-commercial use cases.

Replacing Google Site Search

After Google announced that they were sunsetting their paid site search product, Google Site Search (GSS), last year, many businesses began looking for replacements. CSE is an option for these companies, but it has some significant differences from GSS, and it doesn’t provide the robust functionality and flexibility of paid hosted search solutions. Furthermore, companies that implement Custom Search are at risk of showing their competitors ads directly on their website and will have to include Google branding alongside their search installation.

Comparing Google Custom Search Engine and Swiftype

To understand the differences between CSE and Swiftype, let’s dig into some of the features of both solutions. As you evaluate a paid search solution for your business, consider how you can benefit from advanced functionality such as the ability the fine-tune your search relevancy function without writing any code.

1 — Indexing your data

Web crawlers and structured data

Both Swiftype and Google have powerful web crawlers for indexing your website’s data. Additionally, both products enable you to provide structured data to your crawler and exclude/include portions of your website so that your search engine only searches across relevant content.

Confusing Google’s crawler

One key consideration for Custom Search is that if you incorrectly provide structured data, it can affect how your website is indexed for regular Google Search since Google will also be crawling your website to rank it in its Internet-wide search engine. With a paid site search solution like Swiftype, this is much less of a concern. Swiftype enables you to use meta tags and body-embedded data attribute tags to set exactly what content is extracted and indexed from your pages.

Indexing API option

Swiftype also gives you the option of indexing your data via an API. Utilizing the API gives you full control over how your data is indexed and allows you to index content from sources other than web pages like databases. You can learn more about the Swiftype API here.

2 — Search interface design

Results display

Both Swiftype and CSE enable you to customize the look and feel of your search bar and results through your admin dashboard. More specifically, both solutions enable you customize colors and determine whether you want to show search results in an overlay, on another page, or on the page where the search query is executed.

Granular result customization through a dashboard

Swiftype enables you to determine how many search results are shown and easily specify which data fields are displayed in your results.

Support for building your own search interface

Depending on your business and site search use case, you may want to implement a custom search interface with features like filtering and faceting. Swiftype provides their search and autocomplete jQuery libraries so you can fully customize the appearance of search on your site.

3 — Search relevancy customization

Drag-and-drop Result Rankings

Both Swiftype and CSE allow you to customize search results by pinning content to the results for certain queries but Swiftype enables you to do it through a drag-and-drop interface (a patented design). This interface, the Swiftype Result Rankings feature, enables you to easily customize the complete list of a search results for a given query and makes it easy to add or delete results from the list.

Global relevancy customization with Weights

Swiftype enables you to fine-tune your search relevancy algorithm with sliders. With the Swiftype Weights feature, you can boost the importance of certain data fields and then immediately test your changes inside of the admin dashboard. If you like the changes, you can click a button to make your new search algorithm go live. Alternatively, you can click a button to restore default weights.

4 — Analytics

Basic analytics dashboard

Site search is an excellent source of actionable data that helps you to better understand your customers’ interests and intentions. CSE has a very basic analytics dashboard that provides you with some metrics like volume of queries and popular queries. For more in-depth analytics, “you can get enhanced reporting through Google Analytics site search reporting” according to a note in the Google Custom Search dashboard. 

Leveraging search analytics

Swiftype’s robust analytics dashboard provides charts for viewing total search volume for your desired date range and makes it easy for you to export your data. Swiftype’s dashboard also shows you most popular queries, popular queries that are returning no results, and CTRs on search results. Swiftype customers often use their site search data to drive their content strategy and make decision about product inventory.

Swiftype + Google Analytics

If you’d like, you can also connect Swiftype to your Google Analytics account so that your site search data is available in that platform. You can learn more about connecting Swiftype with Google Analytics here.

5 — Ads

Google search on your website, ads and all

As mentioned earlier, Google Custom Search is an ad-supported product. If you haven’t used a CSE installation, Google displays ads on top of the organic search results just like it does for its Internet-wide search engine.

Questionable user experience and competitors’ ads

Ads above your search results can make for a poor user experience, because your website visitors may not see results from your actual website without scrolling down (see image below for example). Unfortunately, your website visitor might not scroll down at all and instead click on one of the ads…which could be a competitor’s ad.

6 — Support

Free means no support

Sometimes things go wrong when you’re implementing a new solution, and it’s nice to have support on hand when they do. Since Google Custom Search is free, it does not have support so you’re own your own if something goes wrong.

Support and consultation to ensure success

With Swiftype, you have access to our support engineers through email and if you have an enterprise plan, you get access to phone support. Additionally, Swiftype and our partners can help you to get up and running with our site search solution — ensuring that you and your customers capture the full value of our product.

Getting started with Swiftype

Get a feel for Swiftype with a free trial

We love telling people about Swiftype’s reliable indexing, relevancy customization features, and robust analytics but don’t take our word for it. Try out Swiftype with our 14-day free trial.

Get in touch

Prefer to speak with a search specialist directly? Fill out this form and we’ll be in touch!

 

On the Search: How Mapbox uses Swiftype Search in their help center

The following is a Q&A with Mapbox’s Rafa Gutierrez about his experience working with Swiftype Site Search.

About Mapbox

If you’re not already familiar with Mapbox, they are a location data platform for mobile and web applications. They provide building blocks for developers to add location features like maps, search, and navigation into any experience they create. Mapbox’s strong customer portfolio includes The Weather Channel, Tableau, General Electric, and National Geographic. Together, Mapbox’s customers are shaping the way 300 million people explore the world.

Mapbox + Swiftype

Mapbox has been a Swiftype customer for a number of years now, and they use our search technology in a few different places on their website. Mapbox’s core use case for Swiftype is in their help center where they leverage our search technology to give their customers easy access to the documentation that’s relevant to their needs.

Recently, we spoke with Rafa Gutierrez, a Support Engineer at Mapbox, about his experience with Swiftype. During our conversation, Rafa touched on his use of Swiftype’s customizable web crawler, powerful search analytics and synonyms feature. Here’s our full conversation.

Question and Answer with Mapbox’s Rafa Gutierrez

Q: How does Swiftype compare to your previous search solution? What benefits have you experienced since implementing Swiftype?

A: Before we started using Swiftype, we had to build in specific page filtering for each API documentation page. This was cumbersome and we knew it wouldn’t scale for additional SDKs and other frameworks that we’d eventually have come online. We also needed a way for the search to cover the entirety of our site while still having some selective control over what it crawled. With Swiftype, we could just add a code snippet to all the areas of our site we needed covered by search.

We use Swiftype throughout the site but its main customization has been for our help and support pages. Swiftype crawls our pages selectively for content and pulls various categories and tags for filtering. We’re able to blacklist portions of our site to keep things relevant. We also have the ability to tailor content to the specific user and weigh out specific terms to differentiate content on similar searches.

Q: Tell us about the types of users that visit your website regularly.  What are they looking for? How are you creating experiences that are tailored to their unique needs?

A: We’re a developer platform and our customers range from government organizations to autonomous vehicle manufacturers to on-demand transportation companies. Whether it’s finding a coffee spot on Foursquare or building navigation systems for autonomous cars – Mapbox does the geo stuff so developers can focus on building their product.

As we look to meet the needs of our wide array of users, we want ensure a streamlined and tailored experience that gives users fast access to relevant documentation so they can make the most of their use of Mapbox technology. Swiftype helps us deliver relevant content so our customers can find what they’re looking for faster.

 

Swiftype helps us deliver relevant content so our customers can find what they’re looking for faster.


Rafa Gutierrez
Support Engineer

 

Q: In what ways have you utilized the data from the Swiftype Search Analytics dashboard? What is your search data telling you about how users engage with your help center and product?

A: We dive into our metrics dashboard regularly to look for oddities or patterns that give us insight to how customers are finding the info they need. When customers search for terms that we’re not listing in our glossary or used for keywords in our categories, we can find these and add them to synonyms. For instance, we found a number of customers that would search for the phrase “add marker to map”. There are a few ways to do this with our tools so we restructured our docs to surface ones relevant to getting started with creating markers on a map. We also added synonyms to Swiftype to capture words that often get conflated with markers on a map like “pins” or “points”.

 

Q: How are you using the combination of search and quick glance features to drive down customer service requests?

A: We use Jekyll for a static HTML site generator so we can load up all relevant keywords, categories, and excerpts as metadata for our all of our help docs. By doing this, our search can pull this info into the quick glance as customers type in their search terms. At glance, they can see which category their term falls into and read brief excerpts before they click through. This was really valuable for us in that we could apply design treatments to results and watch search results get clicked through more than 50% of the time, reduced our searches with no clickthroughs by 16%, and nearly eliminated results with multiple clicks.

We also used the search in our contact form to provide an extra layer of assistance to ensure our customers didn’t overlook a doc before contacting us. We’re continuing to iterate on this approach for our next release.

Swiftype’s Technical Journey: Building a Search Product on Elasticsearch

Note: This blog post is a summary of the Swiftype’s Technical Journey with Elasticsearch Webinar. You can view it here.

Hosted search built on the Elastic Stack

Swiftype is a search as a service solution built on the Elastic Stack. It abstracts away many of the difficulties of architecting a search engine and provides powerful out-of-the-box functionality. To make it easy to get search up and running, Swiftype provides a web crawler and API for ingesting data, an admin dashboard for managing your search experience, and multiple options for implementing your search UI including a JavaScript snippet as well as search and autocomplete jQuery libraries.

How Swiftype leverages the Elastic Stack

Building a hosted search solution that delivers relevant results for a large amount of varied data is difficult. Building a hosted search solution that allows for a wide-range of result customizations and relevancy tuning is even more of a challenge. Elasticsearch provided a strong backbone for us to build a robust and scalable search solution that works well for many use cases including ecommerce, customer support, marketing websites, digital publishing, mobile, and more.

Here’s how Swiftype leverages the Elastic Stack for scalability, quality of service, search functionality, and search analytics.

Scalability

To touch a little more on the scale of Swiftype, we currently support over 10,000 production search engines, have over 1 billion documents stored in Elasticsearch clusters, and serve over 5 billion queries a month. We have customers ranging from Fortune 500s to high-growth startups from large government organizations to small colleges that trust our search solution everyday.

No doubt, Elasticsearch has been absolutely critical to our ability to scale and its distributed design gave us a leg up in effectively managing large amounts of data. From a scalability and reliability standpoint, we can rest easy knowing that our underlying architecture is sound and will continue to support our growing business for years to come.

Quality of service

We’re constantly making improvements to our product and relevancy algorithm, and occasionally we will make some significant changes. When we do make large changes, Elasticsearch enables us to migrate our customers to updated search engines without taking them offline.

We have a few different ways of managing our Elasticsearch clusters depending on the needs of our customers, such as query load. In some cases, we have multiple customers on a single cluster, while in other cases we have a single customer on a single cluster. Furthermore, the distributed nature of Elasticsearch allows us to put our larger customers on multiple clusters to parallelize operations and provide high availability in the case of server failure.

Search functionality

Diving more into search functionality, Elasticsearch enables us to provide autocomplete, spelling correction, and typo-tolerance to our customers right out-of-the-box. We abstract the coding of these features away from the user and give them full control over their search engine’s relevancy algorithm. When you create a Swiftype search engine, it automatically returns relevant results, but you can also customize your search results according to your needs.

On a query-by-query basis, you can add to, remove from, and fully reorder search results through a drag-and-drop interface. 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). Again, while no coding is required to fine-tune your search engine, we also expose these capabilities through the Swiftype API.

When you make changes to your Swiftype search engine, you can immediately preview your changes in the admin dashboard before pushing them live. For features like weighting, it’s a good idea to review how relevancy updates will affect search results before deploying them to production. Since our search solution is built on Elasticsearch, we can instantly update the relevancy algorithm powering your search engine — enabling you to see the effects of your changes in real-time and determine whether you want to keep them or restore your settings.

Search analytics

Aside from the robust search functionality we offer, the Elastic Stack has also enabled us to provide in-depth search analytics. In the Swiftype admin dashboard, we include metrics like volume of search queries, popular queries, queries returning no results, and CTRs on search results. This data has proved very valuable to our customers as they use it to better understand their website visitors, shape their content strategy, and optimize their relevancy algorithms.

The Elastic Stack: From a bet to best practice

We were an early adopter of Elasticsearch, first utilizing the technology when it was on version 0.19. Back in 2012, we made a bet on the Elasticsearch technology and community and that decision has turned out to be the right one. Over the past few years, the Elasticsearch open source community has grown tremendously and the project has gained tons of momentum. As of today, the Elastic Stack (Elasticsearch, Logstash, Beats, and Kibana) has been downloaded over 150 million times worldwide. Today, building search engines, logging systems, or business analytics dashboards with the Elastic Stack is far from a bet; it has become best practice.

Swiftype 2017 year in review

You can say 2017 was an eventful year for Swiftype. From starting the year with a product launch of Swiftype Enterprise Search, to helping countless customers migrate from their discontinued Google Site Search solutions, to joining forces with Elastic, the makers of popular open source products such as Elasticsearch, Kibana, Beats, and Logstash. To celebrate the new year, here’s a look back at the top blog posts of 2017.

1 — 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.”

We’ve built some great search products at Swiftype over the past 5 years, but honestly, we are just getting started. Joining forces with Elastic enables us to partner with the best search experts in the world, so we can continue to innovate and deliver an increasingly diverse suite of powerful search solutions.

2 – Google Site Search is Sunsetting: What to Expect and How to Move On

“By now you’ve probably heard that Google plans to sunset Google Site Search (GSS) and direct existing customers to use their free replacement, the Google Custom Search Engine (CSE). Unfortunately for these customers, the CSE forces websites to show ads alongside their search results, so the transition isn’t as simple as it may seem. As the dominant alternative to GSS for the past 4 years, we at Swiftype are very familiar with the migration process, and we’re happy to share some of our advice to those weighing their options.”

In early 2017, Google announced it was sunsetting their widely used Site Search product. Since Swiftype Site Search is similar to GSS in its ease of use and out-of-the-box relevancy, many former Google customers turned to us for their website search needs.

3 — Customers Say It Best

“Each month, nearly 900,000 buyers utilize G2 Crowd for unbiased user reviews to assess which products are best for their businesses. Swiftype’s reviews on G2 Crowd both reaffirm the value of our product to our customers, and allow us to improve our products to make sure each and every user is satisfied with their site search.”

When potential Swiftype customers are evaluating our solution, we really encourage them to do a free trial and spend some time using our product. We believe in our product and consistent positive product reviews from our customers help to reaffirm that belief.

4 — Introducing AI-Powered Enterprise Search

“Today, we’re excited to announce a new product that addresses this problem head-on: Swiftype Enterprise Search. By integrating artificial intelligence with our industry leading search technology, Swiftype Enterprise Search is a powerful new way for employees to seamlessly access the data they need, from any device, across the many applications their jobs require.”

Earlier this year, we launched Swiftype Enterprise Search  — a modern, AI-powered search solution that enables companies to unify content from all of their apps and data stores. Our enterprise search solution is available on web, desktop and mobile and integrates with your existing workflows so you can find the files you need without breaking your concentration.

5 — 10 Examples of Well-Designed Search UIs

“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.”

At Swiftype, we’ve helped thousands of businesses to index their content, customize their search engines and then implement search interfaces on their website, either with our JavaScript snippet or our search and autocomplete jQuery libraries. Over the years, we’ve learned what makes for a good search experience and can confidently tell you that these 10 companies have nailed their search UIs — helping them to get the full value of their search technology and enabling their customers to easily find what they need.

6 — How Asana, Twilio, and SurveyMonkey optimized their customer support centers [Infographic]

“Asana, Twilio, and SurveyMonkey have all invested heavily in creating high-quality support content. To ensure this content is easily accessible, these companies leverage advanced search technology that provides relevant results to their customers and actionable analytics for them.”

One big use case for our search technology is in customer support centers. Companies like those listed above utilize Swiftype Search as a flexible portal for their customers to access their support documentation. Since search is a natural way for people to access a wide array of support content, our customers have been very successful in reducing their manual support loads while simultaneously helping their customers to resolve their issues more quickly.

7  — How site search makes higher education websites more accessible

“When a website visitor elects to use the search bar on your website, they have a specific goal in mind, so it’s important to provide them with relevant search results. At Swiftype, we specialize in building relevant site search technology and making it incredibly easy to set up on your website. We’re fortunate to be able to work with some great universities, and we wanted to highlight their Swiftype success stories.”

University websites generally have lots of pages designed to cater to a diverse constituency of prospective students, current students, faculty, staff and parents. Powerful search technology like Swiftype helps higher education institutions to improve the accessibility of their websites so that their site visitors can find the content that’s relevant to them.

8 — Great Developers Ship, They Don’t Configure Search

“Engineers and developers want to spend more time developing products and websites, not configuring search. It’s pretty obvious, and understandable. Developing allows them to be creative, solve problems, and build new things. Search, albeit a critical feature for site visitors, is part of a site’s foundation. It should already be there. And it should work, and work well.”

As you can imagine, we love to build search products at Swiftype and can tell you that they’re difficult to get right. When you’re working on a product or website and need search functionality, you may not have the time or resources to allocate towards building search. And that’s where we come in with our robust search as a service solution and well-documented developer APIs.

9 — Welcome to the Swiftype office in San Francisco [HQ Photo Tour]

“Welcome to Swiftype Headquarters in San Francisco, California. Founders Matt Riley and Quin Hoxie have created a comfortable and fun office environment with an open floor plan, scattered lounges, and various collaborative areas. Take a look at our office photos below to experience a day in the life of a Swiftype team member.”

Take a tour of the Swiftype/Elastic San Francisco Office and get a feel for what it’s like to work at a high-growth startup.

10 — Swiftype API overview: Customize 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.”

One of our main focuses for the Swiftype Site Search product is to make it extremely easy to get your data indexed so you can quickly install a working search bar. Some of our customers prefer to interact with Swiftype through our API or client libraries which enables them to build search to their exact specifications, from the data ingestion process to user interface design.

Test drive Swiftype Site Search

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, and an intuitive admin dashboard for managing your search experience. Ready to get started with Swiftype? Sign up for your 14-day free trial here.

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!

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.

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

Subscribe to our blog