Si tienes una aplicación de Shopify incrustada construida con React y Shopify Polaris, puedes integrar el Asistente de ThriveDesk directamente en el administrador de Shopify. Esto permite a los comerciantes acceder al soporte al cliente sin salir del panel de administración, creando una experiencia de soporte fluida y continua dentro de tu aplicación.

Crea el Componente Asistente

Crea un nuevo archivo Assistant.tsx (o Assistant.jsx si no estás usando JavaScript) en tu proyecto React.

Copia el siguiente código en el componente:

import { useEffect } from 'react';

interface AssistantInterface {
  (method: 'init', options?: any, defaultOpen?: boolean): void;

  readyQueue?: Array<{
    method: string;
    options?: any;
    data?: any;
  }>;
}
declare global {
  interface Window {
    Assistant?: AssistantInterface;
  }
}


const Assistant = () => {

  const ASSISTANT_ID = "YOUR_ASSISTANT_ID_HERE";

  useEffect(() => {
    // Evitar múltiples inyecciones de script
    if (window.Assistant) return;

    if (!window.Assistant) {
      window.Assistant = function (method: string, options?: any, data?: any) {
        (window?.Assistant?.readyQueue || []).push({ method, options, data });
      };
      window.Assistant.readyQueue = [];
    }

    // Cargar el script del cargador
    const script = document.createElement('script');
    script.src = "https://assistant.thrivedesk.com/bootloader.js?" + Date.now();
    script.async = true;
    script.onload = () => {
      // Inicializar el Asistente después de que se cargue el script
      if (window.Assistant) {
        window.Assistant("init", ASSISTANT_ID);
      }
    };

    document.body.appendChild(script);
  }, []);

  return null;
};

export default Assistant;

Agrega tu ID de Asistente

Abre tu aplicación ThriveDesk, navega a la página de instalación del Asistente y copia el ID de Asistente.

image.png

Reemplaza "YOUR_ASSISTANT_ID_HERE" con tu ID de Asistente de ThriveDesk real en el componente Assistant.tsx.

const ASSISTANT_ID = "a0542be2-5a5c-4afd-a5a7-687ae356aa36";

Agrega el Componente a tu Aplicación

Abre tu archivo app/root.tsx e importa el componente Asistente, y agrega el componente dentro del elemento body

<body>
  {/* resto de tu contenido */}
  <Assistant />
</body>

Bueno, ahí lo tienes. Tu asistente está dentro de tu administrador de Shopify. 🎉

image.png

¿Tienes problemas?

Si encuentras algún problema durante el proceso de instalación o configuración, estamos aquí para ayudar. No dudes en contactarnos por correo electrónico o mensaje, y nuestro equipo de soporte resolverá rápidamente cualquier problema que estés enfrentando. Tu éxito es nuestra prioridad, y estamos comprometidos a garantizar una experiencia de integración fluida.

Si no estás usando TypeScript, elimina las anotaciones de tipo: