Ir al contenido principal

Avanzado: coloca la caja de chat con la API de JavaScript

Controla exactamente dónde aparece la caja de chat desde el código, incluso con posiciones distintas para ordenador y móvil.

Escrito por Michal Jindra

Si eres desarrollador, puedes decidir con total precisión dónde quieres mostrar la caja de chat, añadiendo unas opciones de configuración al código de instalación de Smartsupp. Aquí te enseñamos cómo mover la caja de chat a la izquierda, separarla de su posición predeterminada, establecer una posición diferente solo en móvil u ocultarla en móvil.

Avanzado: posición en el código de instalación

🟡 Nota: Necesitas acceso de desarrollador al código de tu web. Para mover la caja de chat al lado izquierdo necesitas el plan Solo o superior.

Añade estas opciones en la configuración de tu código de instalación: después de la línea con _smartsupp.key y antes del cargador (la parte que empieza por window.smartsupp||). La caja lee estas opciones al cargarse, así que colócalas antes de ejecutar el cargador.

Mover la caja de chat a la izquierda:

<script>var _smartsupp = _smartsupp || {};_smartsupp.key = 'YOUR_SMARTSUPP_KEY';_smartsupp.orientation = "left";// ...resto de tu código de instalación (el cargador)</script>

Separar la caja de chat del borde predeterminado (valores en píxeles):

_smartsupp.offsetX = 20;  // la separa del borde lateral_smartsupp.offsetY = 100; // la sube desde el borde inferior

Usar una posición diferente solo en móvil:

<script>var _smartsupp = _smartsupp || {};_smartsupp.key = 'YOUR_SMARTSUPP_KEY';if (window.innerWidth < 768) {  _smartsupp.offsetY = 150;}// ...resto de tu código de instalación (el cargador)</script>

Ocultar la caja de chat solo en móvil (sigue mostrándose en ordenador, disponible en todos los planes):

_smartsupp.hideMobileWidget = true;

Para hacerlo:

  1. Abre el código de tu web y busca el script de instalación de Smartsupp.

  2. Añade las opciones que quieras justo después de la línea _smartsupp.key, antes del cargador.

  3. Ajusta los valores según tu diseño.

  4. Guarda los cambios y recarga tu web en una ventana de incógnito o privada para comprobar la nueva posición. Revisa también la versión móvil desde tu teléfono.

💡 Consejo: Los comandos como smartsupp('chat:position', ...) no están soportados. La caja los ignora y en la consola de tu navegador verás "Unknown API command". Para consultar todas las opciones disponibles, revisa la documentación para desarrolladores.


¿Qué sigue?

💡 ¿Necesitas más ayuda? Contacta con nuestro equipo de soporte — ¡estamos aquí para ayudarte!

¿Ha quedado contestada tu pregunta?