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

Para integrar Super Chat con tu aplicación Vue.js, necesitas pegar el script del widget de Super Chat 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 -->

  <!-- Super Chat 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>
  <!-- Super Chat script goes here -->
</body>

Paso 4. Verifica

Ahora deberías poder ver el widget de Super Chat 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 Super Chat en tus proyectos Vue 3 y Nuxt 3. Puedes encontrar una demo aquí.

• Ver módulo Vue 3.

• Ver módulo Nuxt 3.