Search Page & Embed Code

Every Opensolr index comes with a free, fully-featured, hosted search page. You can use it as-is, or embed it directly into your own website with a single line of code. No server setup, no coding required.

Quick start guides

Ready to get started? See the Embed Code guide for a step-by-step walkthrough, or check out Code Examples: Build Your Own Search UI if you want full control over the front end.

What Your Search Page Looks Like

Below is a visual overview of the hosted search page. It has three main areas: the search bar at the top, a facet filter sidebar on the left, and the results list on the right.

Your Search Page URL

Every index you create on Opensolr automatically gets its own public search page. The URL follows a simple pattern:

Your URL

https://search.opensolr.com/YOUR_INDEX_NAME

Replace YOUR_INDEX_NAME with the exact name of your Opensolr index. Share this link with anyone — it is public and works instantly.

Search Page Features

Your hosted search page is packed with features out of the box. No configuration needed — they all work automatically based on your index data.

Full-Text Search

Type anything in the search bar and get instant results. Opensolr searches across all text fields in your index — titles, descriptions, body content, and more.

Highlighted Results

Your search terms are automatically highlighted in the results, so users can instantly see why each result matched their query.

Faceted Sidebar

A sidebar with clickable filters lets users narrow results by category, date, author, or any field you have indexed. Facets update in real time as the user searches.

Autocomplete

As users type, the search bar suggests matching terms. This helps users find what they are looking for faster and reduces typos. See also: Autocomplete & Spellcheck Implementation.

Spellcheck

If a user misspells a word, Opensolr suggests the correct spelling and can automatically search for the corrected query. “Did you mean...?” Learn how to enable spellcheck in Solr.

AI Hints

An AI-generated answer appears above your search results, sourced directly from your content. It answers the user's question at a glance without clicking any result.

AI Reader

Click the “Read” button on any search result to get an AI-powered summary of the full page. Users get the key information without leaving the search page.

Pagination

Results are split across pages, so the search stays fast even with thousands of results. Choose numbered pages or infinite scroll (see below). For API-level pagination and sorting options, see Pagination, Sorting & Freshness Boosting.

Content Tabs

The search page organizes results into three tabs at the top. Users can switch between them to find exactly the type of content they need.

Web

Standard web page results — articles, blog posts, product pages, and any HTML content from your site.

Media

Video and audio files found on your pages. Users can preview media directly in the search results.

Images

A visual gallery of all images found on your crawled pages, displayed as a thumbnail grid.

Sorting Options

By default, results are sorted by relevance — the best matches appear first. Users can also sort by date to see the newest content first. For ecommerce indexes with a price field, price sorting is available too. For a deep dive into the underlying Solr parameters, see Search Parameters Explained.

Relevant (Default)

Results are ranked by how well they match the query. Factors include term frequency, field boosts, and freshness. The best answer appears first.

Recent

Results are sorted by date, newest first. Perfect for news sites, blogs, or any content where freshness matters most.

Price (Ecommerce)

Sort by price ascending or descending. Only available if your index has a price field. Great for product catalogs and online stores.

Embedding Search in Your Website

You can embed the full Opensolr search experience directly into any page on your website. It takes one line of code. The embedded search widget looks and behaves exactly like the hosted page, but lives inside your site.

The Embed Code

Copy and paste this single line into any HTML page where you want the search widget to appear:

All attributes are optional.

The only required part is the src URL with your index name. Every data- attribute has a sensible default. Add only the ones you want to customize. For a complete end-to-end example with HTML, CSS, and JavaScript, see the Complete Search Page Example.

Embed Code Attributes

Each attribute controls a different aspect of the embedded search widget. Here is a full reference:

Attribute	Values	Default	What It Does
`data-topbar`	`true` / `false`	`true`	Show or hide the Opensolr branded bar at the top of the widget. Set to `false` for a clean, white-label look.
`data-og`	`true` / `false`	`true`	Show Open Graph thumbnails (page images) next to each search result. Set to `false` for text-only results.
`data-fresh`	`true` / `false`	`true`	Boost fresh (recently updated) content higher in results. Set to `false` for pure relevance ranking.
`data-ui-theme`	`light` / `dark`	`light`	Light theme has a white background; dark theme uses navy/dark background. Choose whichever matches your site's design.
`data-layout`	`full` / `compact`	`full`	`full` shows the sidebar + results. `compact` hides the sidebar for a narrower layout (e.g., inside a modal).
`data-pagination-style`	`numbered` / `infinite`	`numbered`	`numbered` shows page 1, 2, 3 buttons. `infinite` loads more results as the user scrolls down (infinite scroll).
`data-lang`	ISO code, e.g. `en`, `de`, `fr`	`en`	The language for UI labels (Search, Filters, No results, etc.). Affects the interface language, not the content language.
`data-locale`	Locale code, e.g. `en_US`, `de_DE`	`en_US`	Controls number and date formatting. For example, `de_DE` uses comma as decimal separator and DD.MM.YYYY dates.
`data-source`	`web` / `media` / `images`	`web`	Which content tab to show first when the search page loads. Users can still switch between tabs.
`data-sidebar`	`true` / `false`	`true`	Show or hide the facet filter sidebar. Set to `false` if you want a clean, results-only layout.

Theme Options: Light vs Dark

The embed code supports two visual themes. Pick the one that best matches your website's look and feel.

Light Theme

data-ui-theme="light"

Dark Theme

data-ui-theme="dark"

Pagination Styles

Choose how users navigate through large result sets. Both styles work with all themes and layouts.

Numbered Pages

data-pagination-style="numbered"

Infinite Scroll

data-pagination-style="infinite"

Tips for Embedding

Place it in a wide container

The search widget works best in a container at least 700px wide. If your layout is narrower, set data-sidebar="false" and data-layout="compact" for the best experience.

Use a dedicated search page

Create a page on your website called “Search” and put the embed code there. Link to it from your navigation menu for the best user experience.

Match your site's theme

If your website has a dark background, use data-ui-theme="dark". This makes the search widget blend seamlessly into your design.

Works in any CMS

WordPress, Drupal, Joomla, Shopify, Squarespace, Wix — the embed code works anywhere you can add a <script> tag. Paste it in an HTML block and you are done.

Need more control?

For the Drupal CMS, we offer a dedicated Opensolr Search module with full admin integration, crawler management, and AI features built right into your Drupal dashboard.

Search Page & Embed Code