Setting up Sitecore Search on Customer Engagement Console (CEC)

Setting up an intelligent and responsive search experience is crucial for any modern digital portal—especially one built for customer engagement. In this blog, we’ll walk through the process of integrating Sitecore Search into a CEC (Customer Engagement Center) portal. Whether you're a developer, architect, or product owner, this guide will help you understand the key steps, configuration tips, and common pitfalls to avoid.

What is Sitecore Search?

Sitecore Search is an AI-powered, headless platform for discovering content and products. It is designed to provide predictive and personalized search experiences. Users can add their domain, manage content, optimize search results, get recommendations, and analyze generated reports. Sitecore Search tracks visitor behavior and delivers personalized results by applying specific rules in the portal.
To learn more about Sitecore Search, read the documentation on the Sitecore portal.

All of these are managed in the Customer Engagement Console (CEC).

Before starting up with the configuration, do ensure you have the access to the CEC with required access.

Let's first explore the interface!

• Site Performance: This section shows an overview of the site's performance.

• Administration: Provides access management and domain settings for the app. These domain settings are crucial as they include all the general settings, attribute definitions, feature configurations, and more.

• Developer Resources: Contains developer tools for learning and testing services, along with the API keys.

• Sources: This is the starting point for collecting data from different locations. You can configure extractors for metadata and create index documents.

• Content Collection: Here, you can view the data collected from sources.

• Global Resources: Includes rules and other assets used by all search experiences.

• Widgets: Dynamic components of pages that display our content items.

• Pages: Contains your pages with associated widgets that show search results.

• Analytics: Provides reports on our implementation.

  

Let's start setting up the configurations!

1. Create an Entity:

Navigate to Administration > Domain Settings > General Settings > Entities > Edit. You can use existing entities (Content, Product, Category, or Store entities) or create a new custom entity.

2. Add Attributes:

In the same Domain Settings tab, go to attributes and create a new attribute. Select your entity for the attribute and add all the required details with its data type.

Below are the attribute properties that need to be checked according to our requirements:

• Name: String, used for textual relevance and returned in API responses. This can be set as required.

• 

  

  Description: String, used for textual relevance.

• 

  Size, Color: Strings, used for facets and filters.

• Posted Date: Timestamp, used for sorting.

• 

  Price: Integer, used for sorting.

Ensure you configure the properties to match your requirements, such as enabling Return in API Response (this should be set for all) and selecting relevant features like Facets or Sorting Options.

3. Feature Configuration:

   In the next tab, verify the features we configured earlier. Edit in Facets and change the maximum for Color to 20, so we can get more than 10 results.

   

   For textual relevance, we can add different analyzers, and in the suggestions block, we can configure suggestions. In sorting options, we will create sorts for Price and Posted Date in descending order, calling it Attribute Sorting. We will also create a sort for Relevancy using Algorithmic Sorting in descending order- this will provide results based on the Sitecore algorithm.

4. Create a Source:

   After creating the attributes and entity, we will set up a source to gather content from our website. Go to the sources section and create a new source. Provide a name, description, and choose the connector.

   There are different connector options available that can crawl APIs, JSON/CSV files, or webpages. For our webpage, we have Web Crawler and Web Crawler (Advanced). We will choose the advanced option because it supports multiple languages and allows JavaScript to be added for crawling the attributes.

   After this, there are several options needed for the source to crawl the content:

   i) Web Crawler Settings: We can add allowed domains to limit the hostnames our source will index. By default, it includes all domains. We also have options for setting the maximum depth and the maximum number of URLs to crawl. We can set delays and timeouts for requests. Additionally, we can specify inclusion or exclusion patterns to control which content from our website is included or excluded.

   ii) Locales and authentications can be added if required.

   iii) Triggers: We can set up multiple triggers for our source, which will be the starting point for running it. Here, we can add a JS/API request with any POST or GET method, an RSS Feed URL, or a Sitemap URL. Currently, we are adding a sitemap URL (https://your-domain/sitemap.xml) because it contains all the URLs from our website with the content included in this sitemap URL.

   iv) Document Extractors: Here, we add our logic to get the content from a specific webpage. We have three options to fetch the content: CSS, XPath, or JS. We can use JS for now. Next, scroll down and add taggers, and write JS code like this inside it:

    // Sample extractor function. Change the function to suit your individual needs
    function extract(request, response) {
        $ = response.body;
        let url = request.url;
   
        return [{
            'description': $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content') || $('p').text(),
            'name': $('meta[name="name"]').attr('content') || $('title').text(),
            'size': $('meta[name="size"]').attr('content') || ' ',
            'color': $('meta[name="color"]').attr('content') || ' ',
            'price': $('meta[name="price"]').attr('content') || ' ',
            'posted_date': $('meta[name="posted-date"]').attr('content') || ' ',
            'url': url
        }];
    }
   

   There is a validate button at the top of the navigation. We can add our webpage URL, which includes the data we added in the metadata, and check if we retrieve all the data correctly in our attributes. This is a great way to verify our JS on our webpage.

   v) We can also schedule our crawler to run everyday.

   

5. Add meta tags to your webpage:

   Ensure your webpage includes meta tags for attributes like name, description, size, price, and color. For example:

        <meta name="name" content={Article?.name} />
        <meta name="description" content={Article?.description} />
        <meta name="size" content={Article?.size} />
        <meta name="price" content={Article?.price} />
        <meta name="color" content={Article?.color} />
        <meta name="posted-date" content={Article?.postedDate.jsonValue?.value} />

Make sure to convert the required content into string.

6. Create a widget:

   Navigate to the widget section and create a new widget. We have different options, and for this, we will use "Search Results" because we need filters, listing, sorting, and pagination.

   We will also create another widget for "Preview Search," which can be used for search suggestions. This will be covered in upcoming articles.

   Now, add the widget name, RFK ID, and variation name. Set "Will be used in" as "Common across all pages."

   After this, we will create a rule by selecting our custom entity and going to the last settings tab, then:

   i) Facets: First, enable the configuration, then enable all the facets you want on your component, such as Size and Color. You can also set the coverage for each facet.

   ii) Textual Relevance: First, enable the configuration, then include the attributes and assign them weights. You can see this weight setting if you select "Advanced Mode" at the top. This will show you each attribute for each analyzer, and you can set the weight, which determines the priority of the search result for that particular attribute.

   iii) Search Ranking & Personalization: These options are for personalization and are optional.

   iv) Sorting: First, enable the configuration, then enable the sorting we created in our feature configuration.

   Now save and publish the widget. Then, go to Sources, publish, recrawl, and reindex it.

   Once this is completed, you will be able to see the content in Content Collection under your custom entity. Open the items and verify that the data is correctly populated here.

Conclusion

Integrating Sitecore Search into your CEC portal enhances the search experience by providing personalized, predictive, and efficient results. By following the steps outlined above, you can configure a robust search solution tailored to your platform's needs.

With Sitecore Search, you can empower your digital platform to deliver exceptional user experiences, driving engagement and satisfaction.

In the next article, we'll dive into creating an exciting listing page using this widget.

Stay tuned for an adventure in crafting something amazing!