Crear y configurar un widget#

Crear un widget#

1. Abre el proyecto y elige «Widgets» en el menú.
2. Haz clic en «Crear».

El widget se crea al instante, sin formulario, y se abre en el constructor. Ya tiene el encabezado «¡Hola!» y la descripción «Contáctanos por cualquiera de estos canales:». Todavía no tiene enlaces: añade al menos uno, de lo contrario el widget no se guardará.

La lista de widgets#

La sección «Widgets» del proyecto reúne todos sus widgets. El encabezado de un widget sirve como su nombre en la lista.

• Vista. El selector de la derecha muestra los widgets como «Lista» o como «Tarjetas». Una tarjeta muestra una miniatura del widget y los iconos de sus enlaces; si no hay enlaces, la etiqueta «No hay canales conectados».
• Orden. Los widgets se arrastran por el icono de la izquierda. El orden es el mismo para todos los miembros del proyecto.

En el menú «⋯» de la derecha:

• «Icono»: subir la imagen del widget para tu cuenta y para el encabezado del chat en el sitio web.
• «Duplicar»: crear un widget con los mismos textos, enlaces, banner, colores y dominios. El encabezado de la copia recibe la marca «(copia)».
• «Mover a...»: mover el widget a otro proyecto tuyo. Solo el propietario del proyecto ve esta opción.
• «Eliminar»: eliminar el widget. Deja de mostrarse en los sitios web donde está su código.

Nota

Cuando el widget se mueve a otro proyecto, el chat con el bot que tiene se desactiva: el bot se queda en el proyecto original.

Constructor#

El constructor muestra el widget tal como lo verá un visitante: la ventana está abierta y debajo está el botón redondo. Al lado hay un botón con un engranaje que abre el panel «Configuración del widget».

Los cambios en el panel se ven en el widget al instante, pero solo llegan al sitio web después de que hagas clic en «Guardar». «Cancelar» recupera el último estado guardado. Si sales de la página con cambios sin guardar, tu cuenta pregunta: «Los cambios no se han guardado. ¿Salir de la página?».

Configuración del widget#

Enlaces#

Haz clic en «Añadir enlace» y elige el tipo:

Para la app de mensajería en la que funciona tu bot, pega el enlace general o adicional del bot de la sección «Enlaces al chatbot»: así las visitas desde el widget entran en las estadísticas del bot. Dónde obtenerlo se explica en la sección Enlaces al chatbot. También puedes pegar un enlace normal a un perfil o un grupo.

El icono de engranaje de un enlace abre la ventana «Configuración del enlace …» y la cruz elimina el enlace. El orden se cambia arrastrando el icono de la izquierda.

Cómo se comportan los enlaces en el sitio web:

• En el teléfono, al pulsar se abre el enlace al instante.
• En una pantalla grande, un enlace a una app de mensajería o a una red social abre dentro del widget un código QR con la indicación «Para escribir a …, escanea el código QR o abre el enlace de abajo» y un botón para ir. Un «Enlace» normal se abre al instante en una pestaña nueva.
• Si no se ha rellenado la dirección de un enlace a una app de mensajería, el visitante ve: «El enlace no está configurado. Este canal de contacto no está disponible temporalmente».

Banner#

Haz clic en «Elegir foto» y sube una imagen: JPG, PNG o GIF. Una imagen grande se reduce a 600 píxeles por el lado largo. El icono de la papelera sobre la imagen quita el banner.

En «Enlace del banner» solo sirve una dirección web, que empiece por http:// o https://.

Cuando el visitante abre el chat, el banner se oculta para que la conversación tenga espacio suficiente.

Tema y colores#

En «Tema», elige cómo se ve el widget en el sitio web:

• «Claro»: siempre claro;
• «Oscuro»: siempre oscuro;
• «Según el visitante»: claro u oscuro, como el tema del dispositivo del visitante. Si el visitante cambia el tema, el widget cambia sus colores al instante, sin recargar la página.

Los colores se definen para cada tema por separado. Con «Según el visitante», encima de los colores hay un selector «Claro | Oscuro»: elige un tema y define sus colores. El widget junto al panel muestra el tema que estás configurando en ese momento.

El widget elige por sí mismo los demás tonos (el encabezado, los bordes, el texto secundario) a partir del fondo y el texto. El color del texto sobre el acento también se elige automáticamente: oscuro sobre un acento claro y blanco sobre uno oscuro. Los botones de las apps de mensajería debajo del código QR conservan los colores de su marca y, en el tema oscuro, el código QR queda sobre un fondo blanco para que una cámara pueda leerlo.

«Restaurar colores predeterminados» restablece los colores del tema seleccionado.

Nota

Los widgets creados antes de que existieran los temas tienen el tema «Claro» con sus colores de botón anteriores. El tema oscuro toma de ellos el color del botón y el acento; después del primer guardado, los colores de los temas se guardan por separado.

Dominios del sitio web#

Mientras el campo está vacío, el widget funciona en cualquier sitio web en el que se inserte su código. Para que un sitio ajeno no muestre tu widget, indica tus dominios:

• example.com: solo este dominio (con y sin www.);
• *.example.com: el propio dominio y todos sus subdominios.

Puedes pegar la dirección completa de una página: solo quedará el dominio. También sirven los dominios en cirílico. La lista admite hasta 20 dominios.

Icono del widget#

El icono se muestra en tu cuenta (en la lista de widgets y en el selector) y en el sitio web: en el encabezado del chat con el bot, a la izquierda del título. El propio botón del widget se dibuja en el sitio web con los colores de la configuración.

Abre «Icono» en el menú «⋯» del widget o «Cambiar icono» en el selector de widgets y sube una imagen: JPG, PNG, GIF, WebP o AVIF de hasta 5 MB, preferiblemente cuadrada. El icono se guarda al instante.

Si algo no funciona#

• El widget no se guarda y hay un error en el campo «Enlaces». Se necesita al menos un enlace. La excepción es un widget con el chat activado: para él los enlaces no son obligatorios.
• Un error en un enlace del tipo «Enlace». Su dirección es obligatoria.
• «Este enlace no se puede abrir: no se permiten direcciones javascript:, data: ni similares.» Pega una dirección normal.
• «No se pudo guardar el banner: el archivo no está disponible.» Una imagen subida pero no guardada se conserva solo poco tiempo. Sube el banner de nuevo y haz clic en «Guardar» enseguida.
• «El banner debe ser una imagen JPEG, PNG, GIF o WebP.» El archivo tiene otro formato. Vuelve a guardar la imagen en uno de estos formatos.
• Un error en el campo «Dominios del sitio web». En un dominio se permiten letras, dígitos, puntos y guiones; el asterisco solo al principio, como *..
• «Un proyecto puede tener como máximo 100 widgets»: es la indicación del botón «Crear» desactivado.
• «Puedes crear como máximo 100 widgets al día.» Espera al día siguiente.
• «La creación y edición de widgets está restringida por infringir las reglas de la plataforma.» Consulta Revisiones de widgets por la plataforma.