Explore the main UI integration methods for SearchStax Site Search. By the end, you’ll know the trade-offs for each option and be able to choose the one that best matches your site’s needs, accessibility requirements, and development resources.
Prerequisites
Before you start, you’ll need:
- A SearchStax Site Search account
- A Search App with indexed content
- Basic understanding of your site’s technology stack and customization requirements
Choosing a UI Integration Approach
SearchStax offers three main ways to implement the search UI. Each varies in setup effort, flexibility, and control.
| Method | Effort | Flexibility | Time-to-value | WCAG compliance | Best for |
| Hosted Search Experience | Low | Low | Fastest | Fully WCAG-compliant | Quick deployments, proof of concept, non-technical teams |
| UI Kits | Medium | High | Moderate | JavaScript UI Kit is fully WCAG-compliant. Other frameworks may require additional validation | Customizable experiences using prebuilt components |
| Search API | High | Highest | Slowest | Developer-controlled | Fully custom UIs or integration into complex apps |
Note: All UI Kits are designed with accessibility in mind. Your development team’s familiarity with JavaScript (vanilla), React, Vue, or Angular should guide your choice. However, if full WCAG compliance is a requirement, choose either the Hosted Search Experience or the JavaScript UI Kit.
Hosted Search Experience
- What it is: A prebuilt, hosted UI tied to a specific Search Profile. Each profile has its own Hosted Search Experience reflecting that profile's configuration (Sorting, Location, Facets, Results Fields, etc.). Shareable by URL.
- Pros: Fastest setup, minimal coding required, accessible defaults.
- Cons: Limited UI control vs UI Kits; customization via CSS and copied templates.
- When to use: For quick launches, MVPs, or when your team lacks frontend resources.
See Adding search with the Hosted Search Experience for more information.
Tip: You can view source on the hosted page and copy the HTML/CSS/JS to self-host for a quick start. Move to UI Kits or the API for deeper control.
UI Kits
- What they are: Framework-specific component libraries (JavaScript, React, Vue, and Angular) you install and customize.
- Pros: Flexible layouts and styling, faster than building from scratch.
- Cons: Requires development expertise and build tooling.
- When to use: When you need a custom look and feel without reinventing search functionality.
See Developing a search UI with UI kits for more information.
Note: Choose the UI Kit that aligns with your team’s framework expertise. The JavaScript UI Kit is fully WCAG-compliant. Other framework-specific kits (Angular, React, Vue) include accessibility features but may require extra validation.
Search API
- What it is: A set of API endpoints to query your index and return results as raw data.
- Pros: Complete control over the UI and interaction patterns.
- Cons: Requires building all search functionality from scratch.
- When to use: For highly customized experiences, mobile app integration, or search embedded deep within application workflows.
See Developing a custom search UI with the Search API for more information.
How to Decide
- Identify your time-to-launch requirement.
- Match your team’s technical skills to the method’s complexity.
- Factor in design and accessibility requirements.
- Consider long-term maintenance—a quick option today might limit flexibility later.
We recommend starting with Hosted Search unless you know you need UI Kits or the API.
Note: Switching methods later is possible but may require rework. If you expect major UI changes after launch, UI Kits or API-based integration may be more sustainable.
What’s Next
Now that you’ve selected your integration approach, start with the corresponding tutorial. If you choose Hosted Search, follow the Hosted Search quick start. If you choose a UI Kit, use the UI Kits documentation. If you choose the API, begin with the Search API guide.