Cómo instalar el widget

Elige la opción que mejor se adapte a tu stack. Las tres usan el mismo loader por detrás.

1. HTML (cualquier sitio)

Pega este fragmento justo antes de </body>. El loader lee los atributos data-* y arranca solo.

<script
  src="https://helpdesk.papaya.com.pe/widget-cdn/helpdesk.js"
  data-service="svc_xxxxxxxx"
  data-jwt="${tokenFirmadoEnTuBackend}"
  data-api-url="https://helpdesk.papaya.com.pe"
  async
></script>

Funciona en WordPress, Shopify, Tienda Nube, Wix, Webflow o cualquier sitio donde puedas pegar una etiqueta HTML.

2. React

Instala el paquete @helpdesk/sdk-react (requiere React 18 o superior) y usa el componente dentro de tu app.

import { HelpDesk } from '@helpdesk/sdk-react';

export function App({ token }: { token: string }) {
  return (
    <HelpDesk
      serviceId="svc_xxxxxxxx"
      jwt={token}
      apiUrl="https://helpdesk.papaya.com.pe"
    />
  );
}

3. Vue 3

Instala @helpdesk/sdk-vue (requiere Vue 3) y usa el componente en tu template.

<script setup lang="ts">
import { HelpDesk } from '@helpdesk/sdk-vue';
defineProps<{ token: string }>();
</script>

<template>
  <HelpDesk
    service-id="svc_xxxxxxxx"
    :jwt="token"
    api-url="https://helpdesk.papaya.com.pe"
  />
</template>

Firmar el JWT en tu backend

Nunca expongas tu api_secret en el navegador. Firma un token de vida corta desde tu backend y pásalo al widget.

// Backend: firma un JWT de vida corta con la API secret de tu servicio.
import { SignJWT } from 'jose';

export async function emitirTokenWidget(
  serviceSecret: string,
  clienteId: string,
) {
  const secret = new TextEncoder().encode(serviceSecret);
  return await new SignJWT({ sub: clienteId })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('15m')
    .sign(secret);
}

El ejemplo usa jose en Node, pero sirve cualquier librería HS256 (por ejemplo PyJWT en Python, jwt en Go o la API nativa de .NET).

Todo lo demás: desde el dashboard

Una vez instalado el widget, la configuración se hace con formularios en el dashboard:

• Fuentes de información: sube PDFs, pega FAQs o pega el link de tu sitio para que la IA lo indexe.
• Modelo de IA: elige Claude, ChatGPT, Gemini o un Ollama local. Pega tu API key y listo.
• Marca: color primario, logo, foto y nombre del asistente, forma y animación del botón flotante.
• Mensajes: saludo inicial, textos de derivación, idioma.
• Equipo: invita a tus agentes, asigna roles y define quién recibe las derivaciones.
• Métricas: consulta qué preguntan tus usuarios, confianza de la IA, tiempo de respuesta y conversaciones activas.