Getting Started

Installing the SDK

Begin by installing the SDK for your framework of choice through your favorite package manager.

JS

npm install @searchcraft/javascript-sdk

React

npm install @searchcraft/react-sdk

Vue

npm install @searchcraft/vue-sdk

Instantiating the Searchcraft Class

As early as possible in your app’s lifecycle, instantiate the Searchcraft class, passing in config values that correspond with your Searchcraft environment. You only need to initialize this class one time.

main.ts

import { Searchcraft, type SearchcraftConfig } from '@searchcraft/[your-chosen-framework]';

const config: SearchcraftConfig = {
  index: [process.env.SEARCH_INDEX_FROM_VEKTRON],
  readKey: process.env.READ_KEY_FROM_VEKTRON,
  endpointURL: process.env.ENPOINT_URL_FROM_VEKTRON,
};

const searchcraft = new Searchcraft(config);

The SearchcraftConfig Object

When instantiating the Searchcraft class, you pass in a configuration object. This object is crucial; without it, the SDK won’t know which search index you’d like to use.

Additionally, there are many other configuration options in SearchcraftConfig that you can specify that affect UI, functionality, and behavior of the component library.

See the SearchcraftConfig reference document for a full list of available options.

Using Components

The method for adding components to your application varies by framework. Regardless of framework, however, all components receive the same properties and render the same layouts.

For more framework-specific information see the following:

• Component Layouts

Applying CSS

IMPORTANT: To apply Searchcraft’s CSS to the components, please make sure that the <searchcraft-theme> component is placed somewhere in your app. This component adds a <style> tag to the document that applies Searchcraft’s CSS. Without this component, the searchcraft theme will not be applied, and the components will render without styles.

JS

index.html

<searchcraft-theme></searchcraft-theme>

React

Component.tsx

<SearchcraftTheme />

Vue

Component.vue

<SearchcraftTheme />

Hologram

Searchcraft ships with a built in theming system called hologram. Hologram allows you to define a concise set of CSS variables at your document root, which Searchcraft then uses to style all of its components to match your app’s theme.

See the Hologram Page for more detailed documentation on Hologram.

Listening for Events

You can subscribe to various events within Searchcraft and pass in a callback function to perform an arbitrary action when those events occur, for example:

main.ts

const unsubscribeCallback = searchcraft.subscribe('ad_container_rendered', (event) => {
  // Do something when a new ad container has been rendered
});

See Events Page for a more in-depth look at event handling.