Apariencia del widget

Ícono, título, colores y placeholder del input — las piezas visibles del widget de chat.

El widget es la cara pública de tu chatbot en la web. Gastar 10 minutos acá paga en cada conversación.

Dónde encontrarlo

Abrí tu chatbot → Widget en la sub-nav. La página es de dos columnas: formulario a la izquierda, preview en vivo a la derecha.

┌─ Widget ──────────────────────────────┐ ┌─ Preview ─────┐
│                                       │ │               │
│  Icon                                  │ │    [icon] Chat│
│  [ Upload icon ]                       │ │    ─────────  │
│                                       │ │    Hello, how │
│  Content                               │ │    can I help │
│    Widget Title     [ Chat          ]  │ │    you?       │
│    Initial Message  [ Hello, how...]   │ │               │
│    Input Placeholder[ Ask anything…]   │ │    [ Ask me   │
│    Suggested Msgs   [ line 1\nline 2 ] │ │      anything ]│
│                                       │ │               │
│  Colors                                │ └───────────────┘
│    Primary    Secondary    Background │
│    [#4F46E5]  [#E2F7CB]    [#F9FAFB]  │
│                                       │
│  [✓] Show "Powered by ChatbotGen"     │
│                                       │
│  [ Save Widget Settings ]              │
└───────────────────────────────────────┘

Ícono

Subí una imagen cuadrada. El ícono aparece en:

  • El botón launcher en tu sitio (abajo a la derecha)
  • El header del widget al lado del título
  • Cada burbuja de mensaje del asistente

Tipos aceptados: PNG, JPEG, WebP. Tamaño máximo: 5 MB. Validaciones del lado del cliente:

  • Tipo equivocado → "Use a PNG, JPEG, or WEBP image."
  • Muy grande → "Image must be 5MB or smaller."

Los PNGs transparentes funcionan bien. Evitá line art fino — no se lee a 40 px.

Widget Title

El texto mostrado en el header del widget. Placeholder por defecto: Chat. Mantenelo corto.

Initial Message

El primer mensaje que envía el chatbot cuando un visitante abre el widget. Textarea de dos filas, helper text "Supports multiple lines". Default: "Hello, how can I help you?"

Input Placeholder

El hint gris en el cuadro de entrada de mensaje. Default: "Ask me anything...".

Suggested Messages

Un mensaje por línea en un textarea de 3 filas. Helper text: "One message per line — shown as quick-reply chips". Se muestran al lado del mensaje inicial como botones clickeables. Al elegir uno se envía ese mensaje como input del usuario.

Las buenas sugerencias coinciden con tus preguntas reales top. Rotalas según lo que vayas viendo en conversaciones.

Colors

Tres selectores de color con inputs hex:

  • Primary (default #4F46E5) — CTAs, acentos, botón de enviar
  • Secondary (default #E2F7CB) — acentos secundarios
  • Background (default #F9FAFB) — fondo del cuerpo del chat

El preview en vivo se actualiza al instante. Los defaults están elegidos para contraste legible — si los cambiás, mirá el preview para asegurarte que el texto siga siendo legible.

Toggle de branding

El checkbox Show "Powered by ChatbotGen" controla el footer del widget. En planes Free queda bloqueado en on — ver Branding.

Guardar

Fuera del wizard, un botón Save Widget Settings está al final del formulario. Dentro del wizard, el botón Next del banner superior guarda + avanza por vos. Los cambios se propagan a widgets en vivo en unos segundos.

Lo que está en otras páginas

  • Initial message, delay, suggested messages — también cubiertos en Mensajes y prompts
  • Toggle de Powered-by + gate de upgrade — Branding