Chatwoot
es
Idioma
en English pt_BR Portuguese (Brazil) es Spanish

¿Cómo instalar un chat en vivo en una aplicación Vue.js?

Open in
View as Markdown Open in ChatGPT Open in Claude
Sojan

Sojan

Última actualización el Jul 17, 2026

Para integrar Chatwoot con tu aplicación Vue.js, necesitas pegar el script del widget de Chatwoot en el archivo index.html de tu aplicación Vue.js.

Aquí te mostramos cómo hacerlo:

Paso 1. Obtén tu script del widget​

Tu script del widget se puede encontrar en la configuración de tu Buzón de Sitio Web. Ve a Configuración -> Buzones -> Selecciona tu canal de Sitio Web > pestaña Configuración.

Si aún no has creado un buzón de sitio web, puedes encontrar las instrucciones paso a paso aquí.

Paso 2. Copia el script​

Copia el script que fue creado en el campo code del canal.

Paso 3. Pega el script aquí​

Abre tu proyecto Vue y pega el script en el archivo index.html, justo antes de la etiqueta de cierre </body>.

<body>
  <noscript>
    <strong
      >Lo sentimos, pero <%= htmlWebpackPlugin.options.title %> no funciona
      correctamente si JavaScript no está habilitado. Por favor, actívalo para continuar.</strong
    >
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- Chatwoot script goes here -->
  <script>
    (function (d, t) {
      var BASE_URL = "https://example.com";
      var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
      g.src = BASE_URL + "/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.chatwootSDK.run({
          websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  </script>
  <!-- Chatwoot script goes here -->
</body>

Paso 4. Verifica​

Ahora deberías poder ver el widget de Chatwoot en la página. Se verá algo así:

Módulo Vue.js, Nuxt.js​

Está disponible un módulo mantenido por la comunidad (Hecho por el increíble equipo de @huntersofbook) para integrar Chatwoot en tus proyectos Vue 3 y Nuxt 3. Puedes encontrar una demo aquí.