Como Adicionar o Chatbot de IA Asyntai ao MedusaCMS

Guia passo a passo para lojas virtuais com Medusa

Plataforma:

Importante: O Medusa é uma plataforma de e-commerce headless. O código do chatbot precisa ser adicionado ao seu aplicativo de loja virtual, não ao servidor/admin do Medusa.

Passo 1: Obtenha Seu Código de Incorporação

Primeiro, acesse seu Dashboard Asyntai e role para baixo até a seção "Embed Code". Copie seu código de incorporação exclusivo que se parecerá com isto:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: O código acima é apenas um exemplo. Você deve copiar seu próprio código de incorporação exclusivo do seu Dashboard, pois ele contém seu ID de widget pessoal.

Etapa 2: Adicionar à Loja Virtual Next.js (Mais Comum)

O starter padrão de loja virtual do Medusa usa Next.js. Adicione o chatbot ao layout raiz da sua loja virtual:

App Router (Next.js 13+)

Abra app/layout.tsx no seu projeto de loja virtual e adicione o componente Script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Se sua loja virtual usa o Pages Router, abra pages/_document.tsx ou pages/_app.tsx:

// pages/_app.tsx
import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Dica: A opção strategy="afterInteractive" garante que o chatbot carregue após a página ficar interativa, proporcionando a melhor experiência do usuário sem afetar o desempenho de carregamento da página.

Método Alternativo 1: Loja Virtual Gatsby

Se sua loja virtual Medusa usa Gatsby, adicione o script via gatsby-ssr.js usando onRenderBody e setPostBodyComponents:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Nota: Você também deve adicionar o mesmo código ao gatsby-browser.js se quiser que o widget persista durante a navegação do lado do cliente. Alternativamente, adicione-o ao seu componente de layout raiz.

Método Alternativo 2: Loja Virtual React Personalizada

Se sua loja virtual Medusa usa uma configuração React personalizada (Vite, Create React App, etc.):

Adicione o script ao public/index.html logo antes da tag de fechamento </body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Ou use um hook useEffect no seu componente raiz:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

Método Alternativo 3: Qualquer Frontend Personalizado

Se sua loja com Medusa usa qualquer outro frontend baseado em HTML, simplesmente adicione a tag de script padrão logo antes da tag de fechamento </body>:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Dica: Este método funciona com qualquer framework de frontend ou gerador de sites estáticos que produz HTML, incluindo Vue, Svelte, Angular, Astro e outros conectados ao backend do Medusa.

Etapa 3: Implantar e Verificar

Após adicionar o código ao seu aplicativo de loja virtual:

Implante sua loja virtual no seu provedor de hospedagem (Vercel, Netlify, Railway, etc.)
Abra sua loja virtual ao vivo em uma nova aba do navegador
Você deverá ver o botão do widget de chat no canto inferior direito
Clique nele para garantir que abre e funciona corretamente

Não está vendo o widget? Certifique-se de que substituiu YOUR_WIDGET_ID pelo seu ID de widget real do painel. Verifique se o script está carregando na aba Network do navegador (F12 > Network). Confirme que a loja virtual foi reimplantada após adicionar o código. Para Next.js, certifique-se de usar o componente Script de next/script, não uma tag <script> comum. Lembre-se, o código vai na loja virtual, não no servidor Medusa. Limpe o cache do navegador ou teste em modo anônimo.

Documentação