WEB CRAWLER-Embed Code

Find answers to your questions quickly and easily

Embedding the Opensolr Search UI

Embedding the Opensolr Search UI

The Easy Way: Two Lines of HTML

Before diving into building a custom search UI from scratch, know that Opensolr provides a fully functional, responsive search interface out of the box. You can embed it on any website with just two lines of HTML:

<div id="opensolr-search" data-index="YOUR_INDEX_NAME"></div>
<script src="https://search.opensolr.com/embed.js" async></script>

Replace YOUR_INDEX_NAME with the name of your Opensolr Index (you can find it in your Control Panel).

That's it. Drop this into any HTML page and you have a fully working search engine with:

  • Full-text keyword search
  • AI-powered semantic/hybrid search
  • Autocomplete suggestions
  • Spell checking ("Did you mean...?")
  • Search result highlighting
  • OG image thumbnails
  • Language and freshness filters
  • Pagination

Optional Parameters

You can customize the embedded search UI using data- attributes on the div element:

Parameter Values Description
data-topbar off Hide the top search toolbar
data-q any string Set an initial search query (pre-fill the search box)
data-in web, media, images Filter results by content type
data-og yes, no Show or hide OG image thumbnails per result
data-source e.g. example.com Restrict results to a single domain
data-fresh yes, today, previous_week Apply a freshness filter to prefer recent content
data-lang e.g. en, de, fr Filter results by detected language

Example with Parameters

<div id="opensolr-search"
     data-index="myindex"
     data-topbar="off"
     data-og="no"
     data-fresh="yes">
</div>
<script src="https://search.opensolr.com/embed.js" async></script>

This embeds the search UI with the toolbar hidden, OG images disabled, and freshness boosting enabled.

When to Use the Embed vs. Building Your Own

Use the embed when:

  • You want search up and running in 5 minutes
  • The default look and feel works for your site
  • You do not need deeply custom result rendering

Build your own UI when:

  • You need the search results to match your site's exact design
  • You want to combine search results with other data sources
  • You need custom filtering, faceting, or result layouts
  • You want to integrate search into a single-page application (SPA)

The rest of this developer guide is for building your own custom UI. Read on to learn about the index fields, the Solr API, and real code examples.

Read Full Answer