19c1ef9192
* feat(v4): add new UI (#2555) * feat: add new footer ui * feat: add new search box ui * feat: add searchbox actions * feat: add start screen * feat: add no results screen * feat: add new card ui * feat: add new icons * feat: add new key press class * fix: cypress tests * fix: circleci * fix: circleci * fix: close aria label * fix: circleci * fix: remove unused classes * fix: circleci * feat: update version * feat: add new dark mode ui * fix: colors * fix: design review * fix: hit title length * fix: improve accessibility * fix: ci * chore: increase bundle size threshold * fix: css * feat(v4): ask-ai foundations ✨ (#2574) * feat(v4): docsearch askAI context (#2587) * fix(v4): ask ai updates (#2654) * feat(v4): update beta documentation (#2659) * chore: release v4.0.0-beta.0 (#2660) * fix: make release run on branches like v4 * chore: release v4.0.0-beta.0 * hotfix: closing on askai error * chore: release v4.0.0-beta.1 (#2661) * fix: add a section on models * fix: update to `<package>@beta` * feat(docsearch-website): Updated docs (#2662) * feat(v4): update the landing page (#2665) * fix: beta in readme * feat: added glow around the search bar and a little copy above the keyboard * feat: add glow around the search bar and copy above the keyboard * fix: Add more styling * fix: polishing v4 (#2667) * chore: release v4.0.0-beta.2 (#2668) * fix: update docusaurus tarballs * fix(website): update docusaurus tarballs * fix: mobile search bar --------- Co-authored-by: Vasco Bettencourt <32492444+vascobettencourt@users.noreply.github.com> Co-authored-by: Natan Yagudayev <natanyagudayev@gmail.com>
96 lines
No EOL
3 KiB
Text
96 lines
No EOL
3 KiB
Text
---
|
|
title: New Crawler UI/UX
|
|
---
|
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
|
|
The Algolia Crawler Visual UI provides an updated, user-friendly way to manage your crawl settings and monitor your indexing process. This guide covers the main features of the new interface.
|
|
|
|
## DocSearch Tab
|
|
|
|
The Crawler UI now includes a dedicated **DocSearch** tab. This tab provides everything you need to implement DocSearch on your site, including:
|
|
|
|
- **Implementation code**: Copy-paste ready code snippets for integrating DocSearch into your frontend.
|
|
- **API keys**: Your unique Application ID and Search API Key for connecting to your Algolia index.
|
|
- **Quick links**: Access to review your records, explore documentation, and join the support Discord.
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-docsearch.png')}
|
|
alt="Algolia Crawler DocSearch Tab"
|
|
/>
|
|
</div>
|
|
|
|
## Trigger a new crawl
|
|
|
|
Head over to the `Overview` section to `start`, `restart` or `pause` your crawls and view a real-time summary.
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-overview.png')}
|
|
alt="Algolia Crawler Visual UI Overview"
|
|
/>
|
|
</div>
|
|
|
|
## Monitor your crawls
|
|
|
|
The `Monitoring` section helps you find crawl errors or improve your search results.
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-monitor.png')}
|
|
alt="Algolia Crawler Visual UI Monitoring"
|
|
/>
|
|
</div>
|
|
|
|
## Update your config
|
|
|
|
You can update your crawler configuration in two ways:
|
|
|
|
**Visual Configuration UI:**
|
|
Quickly edit common options without writing code using the new Visual Configuration interface.
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-configuration.png')}
|
|
alt="Algolia Crawler Visual Configuration UI"
|
|
/>
|
|
</div>
|
|
|
|
**Code Editor:**
|
|
For advanced configuration, use the live code editor to directly modify your config file and test your URLs (`URL tester`).
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-editor.png')}
|
|
alt="Algolia Crawler Visual UI Editor"
|
|
/>
|
|
</div>
|
|
|
|
## URL tester
|
|
|
|
From the [`editor`](#update-your-config), you can use the URL tester to debug selectors or see how the crawler interprets your site.
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-url-tester.png')}
|
|
alt="Algolia Crawler Visual UI URL Tester"
|
|
/>
|
|
</div>
|
|
|
|
## Suggestions
|
|
|
|
The **Suggestions** section in the Crawler UI provides actionable feedback to help you improve your crawl and data extraction. After each crawl, you'll see recommendations for:
|
|
|
|
- Fixing redirect or domain issues
|
|
- Addressing ignored or failed URLs
|
|
- Adding missing sitemaps
|
|
|
|
Each suggestion includes a description, a solution, and quick links to relevant documentation or monitoring tools, so you can resolve issues efficiently and optimize your search experience.
|
|
|
|
<div className="uil-ta-center">
|
|
<img
|
|
src={useBaseUrl('img/assets/crawler-visual-suggestions.png')}
|
|
alt="Algolia Crawler Suggestions Tab"
|
|
/>
|
|
</div> |