View Categories

Guía Completa: Cómo Instalar Chat en Vivo de WhatChat en tu Aplicación Vue.js

Tabla de contenidos
Para integrar WhatChat con tu aplicación Vue.js, necesitas copiar el script del widget de WhatChat y pegarlo en el archivo index.html de tu aplicación Vue.js.

A continuación, te mostramos cómo hacerlo:

Paso 1. Obtén tu script del widget #

Tu script del widget se encuentra en los ajustes de la bandeja de entrada de tu sitio web. Ve a Configuración -> Bandejas de entrada -> Selecciona tu canal del sitio web -> pestaña Configuración.

Si aún no has creado una bandeja de entrada para el sitio web, puedes encontrar las instrucciones paso a paso aquí.

Paso 2. Copia el script #

Copia el script que se generó en el campo código del canal.

Script del widget de WhatChat

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 sin JavaScript habilitado. Por favor, habilítalo para continuar.</strong>
  </noscript>
  <div id="app"></div>
  <!-- Los archivos generados se inyectarán automáticamente -->

  <!-- Script de WhatChat aquí -->
  <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>
  <!-- Script de WhatChat aquí -->
</body>

Paso 4. VerificaVerificación #

Ahora deberías poder ver el widget de WhatChat en la página. Debe lucir similar a esto:

Widget de WhatChat en Vue.js

Módulo de Vue.js y Nuxt.js #

Está disponible un módulo mantenido por la comunidad para integrar WhatChat en tus proyectos de Vue 3 y Nuxt 3 (creado por los increíbles chicos de @huntersofbook). Puedes ver una demo aquí.

  • Ver módulo de Vue 3.
  • Ver módulo de Nuxt 3.
What are your Feelings