Documentación

Guías de integración, referencia de la API y resolución de problemas.

Integración del Widget (Inicio rápido)
Más popular

Para la mayoría de las integraciones, el widget es suficiente: gestiona automáticamente los tokens de usuario final, la interfaz de usuario y la persona.

1
Elige un método de integración
<RiserWidget
  projectKey="YOUR_PUBLISHABLE_KEY"
  apiBase="https://riserlabs.io"
  title="AI chat"
  position="right"
/>

Usa la Publishable Key del panel de tu proyecto.

2
Cargue widget.js una sola vez

Este fragmento carga /widget.js y configura window.RiserChatWidget.

"use client";
import { useEffect } from "react";

type Props = {
  projectKey: string;
  apiBase: string;
  title?: string;
  position?: "left" | "right";
};

export function RiserWidget({
  projectKey,
  apiBase,
  title = "AI chat",
  position = "right",
}: Props) {
  useEffect(() => {
    const base = apiBase.replace(/\/+$/, "");

    // 1) Config BEFORE loading widget.js
    (window as any).RiserChatWidget = {
      projectKey,
      apiBase: base,
      title,
      position,
      // optional:
      // locale: "en",
      // theme: "auto",
      // externalUserId: "user_123",
    };

    // 2) Load widget.js once
    const id = "riser-widget-loader";
    if (document.getElementById(id)) return;

    const s = document.createElement("script");
    s.id = id;
    s.async = true;
    s.src = `${base}/widget.js`;
    document.body.appendChild(s);
  }, [projectKey, apiBase, title, position]);

  return null;
}
3
Configure su proyecto en el panel de control

Antes de publicar, asegúrese de configurar lo siguiente:

Lista de verificación de seguridad

Configuraciones de seguridad recomendadas para producción:

  • Restringir Dominios Permitidos (filtro por dominio).
  • Evitar la ejecución de acciones directamente desde la salida del modelo (los CTA deben ser controlados por el servidor).
  • Utilizar límites de captcha cuando esté expuesto públicamente.

Si ya ha implementado el flujo de hostToken, menciónelo aquí como su refuerzo de seguridad predeterminado.

Personalización (apariencia y horarios)

Puede configurar el color de acento, el estilo del lanzador, los horarios comerciales y los enlaces legales.

Toda la interfaz admite temas claro/oscuro mediante las clases 'dark:' de Tailwind.

Fuentes y escaneo de catálogos

Las fuentes se utilizan para construir el contexto del asistente (políticas, datos de productos, documentos).

  • Las fuentes URL se sincronizan y extraen periódicamente.
  • Se pueden subir archivos (PDF/XLSX/CSV) para la ingesta de conocimientos.
  • Los feeds YML pueden tratarse como fuentes de catálogo si se antepone el prefijo [CATALOG] al título.

Gestione las fuentes aquí: Configuración → Fuentes

Personas y comportamiento del modelo

La Persona define las reglas del sistema: tono, comportamiento de conversión, política de rechazo y qué tan estrictamente debe seguirse el contexto.

Configure la persona aquí: Configuración → Persona

Botones CTA (acciones controladas)

Las acciones de CTA se configuran en el panel de control y se ejecutan del lado del servidor. Esto evita que la inyección de prompts genere acciones peligrosas.

Gestione los CTA aquí: Configuración → Acciones CTA

Leads e integraciones (Email / Telegram / Webhook / CRM)

La captura de leads recopila contactos de usuarios + resumen del chat + UTMs, y pueden enviarse a sistemas externos.

  • Tabla de leads: Configuración → Leads
  • Entrega: Habilite la entrega a Email / Telegram / Webhook en los Ajustes de Leads.
  • CRM: Utilice la integración por Webhook para enviar leads a su CRM.