Quick Start

Get SearchX up and running in your e-commerce store in under 5 minutes.

Prerequisites

Before you begin, make sure you have:

• A SearchX account — Sign up here if you don't have one.
• An XML product feed URL (Google Merchant, Facebook Catalog, or Skroutz format).
• Access to your website's HTML or template files.

Step 1: Create an Application

1. Log in to the SearchX Dashboard.
2. Navigate to Applications and click Create Application.
3. Enter a name for your application (e.g., "My Store Search").
4. Paste your XML feed URL and select the feed type (Google Merchant, Facebook, or Skroutz).
5. Click Create to save your application.

Step 2: Import Products

Once your application is created:

1. Go to the Products tab in your application.
2. Click Import Products to start indexing your catalog.
3. Wait for the import to complete — you'll see a progress indicator.

Step 3: Get Your API Credentials

1. Go to the API Keys section in the dashboard.
2. Copy your Application ID and API Key.
3. Keep these credentials safe — you'll need them for the SDK integration.

Step 4: Add the SDK to Your Website

The fastest way to integrate SearchX is with the HTML snippet. Add these scripts to your page:

<!-- React & ReactDOM (required) -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- SearchX SDK -->
<script src="https://helloworld-pc.github.io/searchx-components/searchx-sdk.umd.js"></script>

Add the container elements where you want the search UI to appear:

<!-- Search Bar -->
<div id="search-bar"></div>

<!-- Search Results -->
<div id="search-page"></div>

Initialize the SDK:

<script>
  window.addEventListener('load', function () {
    if (window.SearchXSDK) {
      SearchXSDK.init({
        app_id: 'YOUR_APP_ID',
        api_key: 'YOUR_API_KEY',
        components: {
          SearchBar: { root: 'search-bar' },
          SearchPage: { root: 'search-page' },
        },
      });
    }
  });
</script>

Replace YOUR_APP_ID and YOUR_API_KEY with the credentials from Step 3.

Step 5: Test Your Integration

Open your website in a browser and try the following:

1. You should see a search bar with the SearchX styling.
2. Type a product name and press Enter or click the search button to see results.
3. Browse instant search suggestions as you type.
4. Use the filters (brand, category, price range, etc.) to narrow down results and see how facets update in real-time.
5. Click on a product to navigate to its detail page on your store.

What's Next?

• Platform-specific guides — For more detailed integration instructions, see the guides for Next.js, React, HTML, or OpenCart.
• Customize styling — Learn how to style the widget to match your brand.
• Configure search — Set up ranking rules and search settings.