Sitecore Search with XM Cloud step-by-step
In This Article
Here’s a step-by-step to integrate Sitecore Search with XM Cloud for AI-powered search and content discovery on a headless site:
Step 1: Prerequisites
- XM Cloud project set up (usually with Next.js or React).
- Access to Sitecore Search account.
- API keys for Sitecore Search.
- Node.js installed locally.
Step 2: Configure Sitecore Search
- Create a Sitecore Search instance in your Sitecore account.
- Set up Sources:
- Web Crawler: Crawl XM Cloud-rendered pages.- API Crawler: Pull content via XM Cloud Delivery API. - Ingestion API: Push structured content directly.
- Map XM Cloud fields to Sitecore Search attributes using Extractors.
- Publish the configuration.
Power Smarter Content Discovery
Transform XM Cloud experiences with AI-powered search, personalized results, intelligent recommendations, and faster content discovery across your headless website.
Step 3: Index XM Cloud Content
- If using API Crawler:
- Get XM Cloud Delivery API endpoint (GraphQL or REST). - Configure connector in Sitecore Search to fetch content.
- If using Ingestion API:
- Push content from XM Cloud to Sitecore Search via POST requests.
Step 4: Install Sitecore Search SDK
Boost Engagement & Conversions with AI-Driven Sitecore Search
For a Next.js headless site:
npm install @sitecore-search/react
Step 5: Initialize SDK
Create a searchClient.js file:
import { createClient } from '@sitecore-search/react'; export const searchClient = createClient({
apiKey: process.env.SITECORESEARCHAPI_KEY,
endpoint: 'https://api.sitecoresearch.com',
});
Add your API key in .env.local: SITECORE_SEARCH_API_KEY=your-api-key
Step 6: Implement Search UI
Example in SearchPage.js:
import { createClient } from '@sitecore-search/react'; export const searchClient = createClient({
apiKey: process.env.SITECORESEARCHAPI_KEY,
endpoint: 'https://api.sitecoresearch.com',
});
Step 7: Add AI-Powered Features
- Enable Recommendations in Sitecore Search dashboard.
- Use Personalization API to fetch user-specific results.
- Example:
const recommendations = await searchClient.getRecommendations({
userId: 'anonymous',
limit: 5,
});Step 8: Deploy
- Host on Vercel or Netlify.
- Secure API keys in environment variables.
- Set up webhooks for automatic redeployment when content changes.
Happy Coding!
Frequently Asked Questions
What is Sitecore Search with XM Cloud?
Sitecore Search with XM Cloud combines Sitecore's headless content platform with a configurable search service that indexes content and delivers search results, recommendations, and personalized discovery experiences to websites and applications.
How does Sitecore Search work with XM Cloud?
Sitecore Search can index content from XM Cloud-rendered websites or connected content sources, then expose search experiences through APIs and SDKs. Developers can use the indexed content to build search results, facets, recommendations, and personalized experiences.
How do I integrate Sitecore Search with XM Cloud?
The general process includes configuring a Sitecore Search domain, creating a content source, indexing XM Cloud content, defining attributes and search configuration, creating widgets, and integrating search into the front-end application using the appropriate Sitecore SDK.
Can Sitecore Search be used with Next.js?
Yes. Sitecore Search can be integrated into Next.js applications. Current Sitecore documentation provides guidance for building search experiences in both the Next.js Pages Router and App Router.
What content sources can Sitecore Search index?
Depending on the implementation, Sitecore Search can work with crawled web content, structured data sources, and content ingestion methods. The source should provide searchable content that can be mapped to entities and attributes.
What is a Sitecore Search widget?
A Sitecore Search widget is a configurable component that delivers search-related content or experiences to an application. Widgets can support search results, recommendations, previews, banners, questions and answers, and other configured experiences.
Does Sitecore Search support personalized search results?
Yes. Sitecore Search can support personalized and contextual search experiences when configured with the appropriate data, rules, context, and search features.
Can Sitecore Search provide recommendations?
Yes. Sitecore Search supports recommendation experiences that can help surface relevant content based on configured entities, widgets, visitor context, and search behavior.
What is the best SDK for Sitecore Search with XM Cloud?
The best SDK depends on the application architecture. Current Sitecore guidance recommends the Cloud SDK for Sitecore Search functionality in JSS Next.js and JSS Angular applications connected to XM Cloud, while the Search JS SDK for React supports React-based search integrations.
Why should enterprises use Sitecore Search with XM Cloud?
Sitecore Search can help enterprises improve content discovery by combining indexed content with configurable search experiences, filters, recommendations, personalization, and scalable front-end integrations.
