Comenzar con Sidepanel

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

información

Sidepanel está disponible desde la versión >= 4.4

Introducción

DocSearch Sidepanel es una nueva experiencia independiente de DocSearch Modal. Sidepanel está diseñado exclusivamente para uso con Ask AI y puede implementarse completamente de forma independiente o en modo Híbrido con Modal.

Instalación

Para comenzar con Sidepanel, primero necesitarás instalar los paquetes requeridos:

npm

npm install @docsearch/react @docsearch/css

# Or if using JS based package

npm install @docsearch/sidepanel-js @docsearch/css

yarn

yarn add @docsearch/react @docsearch/css

# Or if using JS based package

yarn add @docsearch/sidepanel-js @docsearch/css

pnpm

pnpm add @docsearch/react @docsearch/css

# Or if using JS based package

pnpm add @docsearch/sidepanel-js @docsearch/css

bun

bun add @docsearch/react @docsearch/css

# Or if using JS based package

bun add @docsearch/sidepanel-js @docsearch/css

O utilizando tu gestor de paquetes preferido

Sin gestor de paquetes

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/sidepanel.css" />

<script src="https://cdn.jsdelivr.net/npm/@docsearch/sidepanel-js"></script>

Implementación

La implementación más simple de Sidepanel sería la siguiente:

React

import { DocSearchSidepanel } from '@docsearch/react/sidepanel';

import '@docsearch/css/dist/style.css';
import '@docsearch/css/dist/sidepanel.css';

function App() {
  return (
    <DocSearchSidepanel
      appId='YOUR_APP_ID'
      apiKey='YOUR_SEARCH_API_KEY'
      assistantId='YOUR_ASSISTANT_ID'
      indexName='YOUR_INDEX_NAME'
    />
  );
}

JavaScript

You will need a container DOM node to render the Sidepanel into:

<div id="docsearch-sidepanel"></div>

import sidepanel from '@docsearch/sidepanel-js';

import '@docsearch/css/dist/style.css';
import '@docsearch/css/dist/sidepanel.css';

sidepanel({
  container: '#docsearch-sidepanel',
  indexName: 'YOUR_INDEX_NAME',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  assistantId: 'YOUR_ASSISTANT_ID',
});

Esta es solo la forma más básica de implementación. Para conocer otros métodos de implementación, puedes leer nuestros casos de uso avanzados.

Para obtener más información sobre las diferentes opciones de configuración de Sidepanel, puedes consultar nuestras Referencias de la API de Sidepanel