Using a Sandbox Account | Yext Hitchhikers Platform

Yext Sandbox accounts have a different domain for their Search API endpoints. Search React UI uses production account API endpoints by default.

If you’re using a Yext sandbox account, you will need to import Environment from @yext/search-headless-react and pass the sandbox environment to the environment prop in your <SearchHeadlessProvider />.

// main.tsx
// using React 17

import {
  provideHeadless,
  SearchHeadlessProvider,
  HeadlessConfig,
  Environment
} from "@yext/search-headless-react";
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const config: HeadlessConfig = {
  apiKey: "YOUR API KEY",
  experienceKey: "YOUR EXPERIENCE KEY",
  locale: "en",
  verticalKey: "YOUR VERTICAL KEY",
  environment: Environment.SANDBOX
};

const searcher = provideHeadless(config);

ReactDOM.render(
  <React.StrictMode>
    <SearchHeadlessProvider searcher={searcher}>
      <App />
    </SearchHeadlessProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

Back

< Search Result Typing

Setting Cloud Region >

<% elem.innerText %>