No framework lock-in
The components are native JavaScript custom elements. They run in React, Angular, Vue, Next.js, or on a page without any framework at all.
Image
Web Components: iFinder Search in Your Own Interface
With iFinder Web Components, you integrate enterprise search directly into portals, intranets, and specialized applications. The native JavaScript custom elements provide a search bar, filters, result lists, and AI assistance as individually usable components that can be adapted to your own corporate design.
Flexibly integrate enterprise search with iFinder Web Components
Best Results and Optimal User Experience Through the Synergy of Search and AI Assistant
iFinder Web Components allow the search interface to be flexibly integrated into existing applications. iFinder 6 provides a search bar, filters, result lists, and other functions as individually usable web components for this purpose. The desired building blocks are embedded via JavaScript and HTML and can be adapted to your corporate design via CSS.
These same components also form the reference interface shipped with iFinder. So you're not working with a separate integration solution, but with the same building blocks that the iFinder interface itself is built on.
Modular web components for flexible enterprise search integration
Styling without detours
No shadow DOM, no hard encapsulation. About 130 CSS custom properties and a documented plugin mechanism are enough to adapt them to your design.
Accessible and responsive
The components inherit your application's responsive behavior. You don't need to maintain media queries on your end.
109 components in the catalog
From a single search bar to a complete application structure including app bar and navigation. You take what you need.
Complete app or individual building blocks
Es gibt zwei Integrationswege. Welcher besser passt, hängt vor allem davon ab, wie viel eigene Oberfläche bereits vorhanden ist.
- App Main stellt die vollständige Suchoberfläche bereit – mit App Bar, Navigation, Suchbereich, Trefferliste und Filtern. Mit einer zentralen Komponente lässt sich so eine vollständige Suchanwendung einbinden. Das eignet sich besonders, wenn die Suche als eigener Bereich in einem Portal oder Intranet vorgesehen ist.
- Einzelkomponenten sind für Anwendungen gedacht, deren bestehendes Layout erhalten bleiben soll. So lässt sich beispielsweise die Searchbar in den Header, die ResultList in den Inhaltsbereich und die Filterbar in eine Sidebar integrieren. Die Komponenten arbeiten dabei miteinander, ohne dass Sie den gemeinsamen Zustand selbst verwalten müssen.
The most important building blocks
Search and results
Searchbar — input field with autocomplete and voice input
ResultList — result list with a fully overridable result-card template
Filterbar — facets and filters
Filter chips — active filters shown as removable chips
AppBar — header bar with navigation, user menu, and language selection
ResultList — result list with a fully overridable result-card template
Filterbar — facets and filters
Filter chips — active filters shown as removable chips
AppBar — header bar with navigation, user menu, and language selection
AI assistance
iAssistant Basic — chat answers directly within the search context
iAssistant Workspace — the full workspace for longer dialogues
WorkspaceChatView — the pure chat view for embedding anywhere
WorkspaceHomeView — the workspace's entry view
iAssistant Workspace — the full workspace for longer dialogues
WorkspaceChatView — the pure chat view for embedding anywhere
WorkspaceHomeView — the workspace's entry view
Knowledge Spaces
Knowledge Space — access to curated knowledge spaces
Knowledge Space List — overview of available spaces
Knowledge Space Collection — collections within a space
Knowledge Space Modal — selection in an overlay, for narrow layouts
Knowledge Space List — overview of available spaces
Knowledge Space Collection — collections within a space
Knowledge Space Modal — selection in an overlay, for narrow layouts
Adaptation to your corporate design
Adapt Web Components to Your Corporate Design and Application Logic
CSS and theming — Colors, fonts, and spacing can be adapted to your corporate design via CSS custom properties. Since the web components don't use shadow DOM, existing styles can be selectively extended and overridden.
Custom templates — For further customization, you can, for example, replace the result-card template and individually design the structure, metadata, thumbnails, and text excerpts.
Configuration via properties — Components can be adapted to different use cases via properties — for example, to search profiles, user roles, or application contexts.
Callbacks and plugins — Via callbacks and JavaScript extensions, you can integrate your own behavior and business logic without having to modify the iFinder code itself.
Built for modern web applications
Integration with React, Angular, Vue, and other frameworks
iFinder Web Components are based on native custom elements and can be integrated into modern frontend frameworks such as React, Angular, Vue, Next.js, or Svelte.
Example projects are available for React and Angular. In other frameworks, integration happens via standard support for custom elements.
Responsive and designed for accessible applications
iFinder Web Components can be integrated into responsive interfaces and adapt to different screen sizes and existing layouts.
They are designed for use in accessible applications. The specific conformance level, such as BITV 2.0 or EN 301 549, should only be stated on the page if it is backed by a current audit or evidence.
⭐ FAQ - iFinder Web Components
No. They are native JavaScript custom elements. They work in any modern framework as well as in an HTML page without a framework. Ready-made example projects for React and Angular are available on GitHub.
Yes, on four levels: CSS custom properties for colors and fonts, direct overriding of internal selectors, complete replacement of the result-card template, and properties set at runtime. The components don't use shadow DOM, so your styles apply without detours.
No. You can use individual components — just the search bar in your header, just the result list on a results page. Alternatively, you can adopt the complete structure, including navigation, with App Main
Yes. The chat view and workspace are separate components. You can integrate the AI assistant into an existing application without adopting the search interface.
Yes. Every component provides callbacks that let you override default behavior, for example when submitting a search query. In addition, external JavaScript plugins can be loaded to bring in your own business logic — for example, to switch the search profile depending on role or location.
Yes. The components adopt the responsive behavior of the surrounding application.
Yes. Users can chat directly with the documents they find. Several relevant documents can also be selected from the hit list and bundled in so-called “smart collections.” There, a targeted chat based on precisely this set of documents is possible—even jointly within a team.
Planning an integration and unsure which path fits?
Whether App Main, individual components, or a custom template: our solution architects will show you which integration path fits your existing interface.
