---
title: Datos del botón
slug: datos-del-boton
description: Learn how to customize button format with JavaScript in this step-by-step guide. Define the "window.AC_widget" variable with properties like text, colors, and visibility. Includes an example for implementing the variable in the button's script.
docTags: 
createdAt: 2023-08-14T10:26:45.449Z
---

Para modificar el formato del botón utilizando JavaScript, debes seguir los siguientes pasos:

1. Define la variable window\.AC\_widget antes de escribir el script del botón. Esta variable contendrá las propiedades del botón que deseas modificar.

```javascript
window.AC_widget = {
  text: "Estamos online!",
  text_color: "#ffffff",        // Texto blanco
  icon: "bubbles",              // Icono de burbujas
  icon_color: "#000000",        // Icono negro
  background_color: "#ff0000",  // Fondo rojo
  visible: true                 // Botón visible
}
```

1. La propiedad "text" define el texto que se mostrará en el botón. Puedes modificarlo según tus necesidades.
2. La propiedad "text\_color" define el color del texto. En este caso, el texto es blanco (#ffffff). Puedes cambiarlo por el color que desees.
3. La propiedad "icon" define el icono que se mostrará en el botón. Puedes elegir entre los siguientes valores: "bubbles", "circle", "dots" o "mail". En este caso, se ha elegido el icono de burbujas.
4. La propiedad "icon\_color" define el color del icono. En este caso, el icono es negro (#000000). Si deseas cambiarlo, puedes modificar este valor.
5. La propiedad "background\_color" define el color de fondo del botón. En este caso, el fondo es rojo (#ff0000). Puedes cambiarlo por el color de tu preferencia.
6. La propiedad "visible" define si el botón será visible o no. Si deseas ocultar el botón inicialmente, cambia el valor a "false". Para que el botón sea visible, déjalo como "true".

Una vez que hayas definido la variable window\.AC\_widget con las propiedades deseadas, podrás utilizarla en el script del botón para modificar su formato según tus especificaciones.

::Image[]{src="https://api.archbee.com/api/optimize/1084p5usHR6NhBhJbNXtr/c6uJy9KqV31WG9_iy4aEI_screenshot-2023-09-06-at-232156.png" size="44" width="973" height="290" position="center" darkWidth="973" darkHeight="290" showCaption="false"}

Recuerda que primero debes colocar la variable window\.AC\_widget y luego el script del botón. A continuación te mostramos un ejemplo completo:

```html
<script>

// Primero la variable con la personalización del botón
window.AC_widget = {
  text: "Estamos online!",
  text_color: "#ffffff",        // Texto blanco
  icon: "bubbles",              // Icono de burbujas
  icon_color: "#000000",        // Icono negro
  background_color: "#ff0000",  // Fondo rojo
  visible: true                 // Botón visible
}

// Luego el script del botón
function loadAsisteClick(callback) { var AsisteClick = document.createElement('script'); AsisteClick.onload = callback; AsisteClick.async = true; AsisteClick.src = 'https://app.asisteclick.com/v3/widget.php?id=asisteclick-11&async=1&floating=DL&deptid=0&layer=1'; var s0 = document.getElementsByTagName('script')[0]; s0.parentNode.insertBefore(AsisteClick, s0); } 
loadAsisteClick(function() {} ); 

</script>

```