Skip to main content

Guía de instalación del widget

Añade TapToChat a tu sitio web en minutos. No necesitas saber programar.

Inicio rápido

3 pasos sencillos:

  1. 1

    Regístrate y crea un widget

    Consigue tu ID de widget único en el panel

  2. 2

    Copia tu código de instalación

    Elige entre HTML, React, Next.js o WordPress

  3. 3

    Pégalo antes de </body>

    ¡Añade el código a tu sitio web y listo!

Métodos de instalación

HTML / Sitios estáticos

Para sitios estáticos, HTML puro o cualquier web donde puedas añadir scripts.

<!-- TapToChat Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'taptochat', 'https://taptochat.io/widget/embed.js'));
  taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
</script>
<!-- End TapToChat Widget -->

React

Para aplicaciones React (Create React App, Vite, etc.).

// Add to your App.js or main component
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://taptochat.io/widget/embed.js';
    script.async = true;
    script.id = 'taptochat';
    document.body.appendChild(script);

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        });
      }
    };

    return () => {
      const scriptEl = document.getElementById('taptochat');
      if (scriptEl) scriptEl.remove();
      const widgetEl = document.getElementById('taptochat-widget');
      if (widgetEl) widgetEl.remove();
    };
  }, []);

  return <div className="App">{/* Your app */}</div>;
}

Next.js

Para Next.js 13+ con App Router.

// Create app/components/TapToChatWidget.tsx
'use client'

import { useEffect } from 'react'

export function TapToChatWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://taptochat.io/widget/embed.js'
    script.async = true
    script.id = 'taptochat'
    document.body.appendChild(script)

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        })
      }
    }

    return () => {
      const scriptEl = document.getElementById('taptochat')
      if (scriptEl) scriptEl.remove()
      const widgetEl = document.getElementById('taptochat-widget')
      if (widgetEl) widgetEl.remove()
    }
  }, [])

  return null
}

// Then in your app/layout.tsx:
import { TapToChatWidget } from './components/TapToChatWidget'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <TapToChatWidget />
      </body>
    </html>
  )
}

WordPress

Para sitios WordPress. Añádelo a functions.php o usa un plugin como “Insert Headers and Footers”.

// Add to functions.php
function taptochat_widget() {
  ?>
  <!-- TapToChat Widget -->
  <script>
    (function(w,d,s,o,f,js,fjs){
      w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'taptochat', 'https://taptochat.io/widget/embed.js'));
    taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
  </script>
  <?php
}
add_action('wp_footer', 'taptochat_widget');

Opciones de configuración

Personaliza tu widget pasando opciones adicionales a la función init:

TapToChat('init', {
  widgetId: 'YOUR_WIDGET_ID',  // Required
  position: 'bottom-right',     // Optional: 'bottom-right' or 'bottom-left'
  color: '#3B82F6'              // Optional: Any hex color code
});
OpciónTipoDescripción
widgetIdstringTu ID de widget único (obligatorio)
positionstringPosición del widget: 'bottom-right' o 'bottom-left'
colorstringColor principal en formato hexadecimal (p. ej., '#3B82F6')

Buenas prácticas

Colócalo antes de </body>

Añade el script justo antes de la etiqueta body de cierre para lograr el mejor rendimiento y asegurarte de que el DOM ya está cargado.

Carga asíncrona

El widget se carga de forma asíncrona, así que no bloquea el renderizado de tu página ni ralentiza tu sitio.

Pruébalo antes en staging

Prueba el widget en un entorno de desarrollo o staging antes de desplegarlo en producción.

Mantén el widget activo

Asegúrate de que tu widget esté marcado como “Activo” en los ajustes del panel para que aparezca en tu sitio.

Solución de problemas

¿El widget no aparece?

  • •Comprueba que tu widget esté marcado como “Activo” en el panel
  • •Verifica que el ID de widget de tu código coincida con el del panel
  • •Vacía la caché del navegador y recarga forzando (Ctrl+Shift+R o Cmd+Shift+R)
  • •Revisa la consola del navegador en busca de errores de JavaScript

¿Sigues teniendo problemas?

Escribe a nuestro equipo de soporte a support@taptochat.io o usa el widget de chat de esta página.

¿Todo listo para empezar?

Crea tu cuenta gratuita y añade chat en vivo a tu sitio web en minutos.

Empieza la prueba gratisVer demo