Componentes

Un bot no manda HTML ni código: manda datos. Un mensaje con components lleva un objeto { "v": 1, "body": [...] } y Huwi lo dibuja. Así los mensajes se ven bien en el celular, en la web y en el modo oscuro, y nadie puede meter scripts en un chat.

{ "v": 1, "body": [ { "type": "text", "text": "Hola" } ] }

Se manda con message.send en el campo components. El mensaje queda de tipo interactive.

Las piezasCopiar el enlace

Estos son los tipos que acepta el servidor: stack, section, divider, text, image, card, keyValue, stats, progress, badge, countdown, list, table, chart, huwiEmbed, form, actions.

Cada pieza lleva type y solo los campos que usa. Las que contienen otras (stack, section, card, list) las llevan en items.

textCopiar el enlace

Un párrafo. Respeta los saltos de línea. Hasta 2000 caracteres.

cardCopiar el enlace

Un recuadro con title, subtitle y text. También puede llevar piezas dentro con items.

section, stack y listCopiar el enlace

Agrupan otras piezas en un recuadro. section y list suelen llevar title. Hasta 40 piezas dentro.

keyValueCopiar el enlace

Pares de etiqueta y valor, en dos columnas. Hasta 30 filas en rows.

statsCopiar el enlace

Cifras destacadas. Hasta 8 en stats, con label (40) y value (40).

progressCopiar el enlace

Una barra de 0 a 1 en progress, con un label opcional. tone puede ser neutral, good, warn o bad.

badgeCopiar el enlace

Una etiqueta corta, con label y tone.

countdownCopiar el enlace

Un texto con una cuenta regresiva (until, una fecha ISO). Hoy la app muestra el text.

tableCopiar el enlace

Una tabla con columns (hasta 6) y cells (hasta 50 filas).

chartCopiar el enlace

Un gráfico con labels y hasta 6 series de hasta 24 valores. El servidor acepta chart igual a bar, stacked, line o donut.

imageCopiar el enlace

Una imagen con url y alt. Para usar un archivo tuyo, súbelo con upload.create y usa la url que devuelve (ver Publicar una foto).

Vista previaJSON

Plato del día: lomo saltado.

Vista previa en vivo. Toca un botón para ver qué recibiría tu bot.

dividerCopiar el enlace

Una línea que separa.

actionsCopiar el enlace

Botones, hasta 8 por pieza y 20 en todo el mensaje. Cada uno lleva id (hasta 64), label (hasta 40), kind y, según el tipo, value. Tipos: callback, submit, reply, copy, link, checkout, open, pay.

Qué hace cada kind y cómo te llega el toque está en Conversaciones.

formCopiar el enlace

Campos y un botón de envío. Al enviar, tu bot recibe una novedad action con el id del submit y los valores en data: { "nombre": "Ana", "personas": "4" }.

El servidor acepta estos tipos de campo: text, number, stepper, slider, select, multi, toggle y mix (con min, max, step, scale, options y presets).

huwiEmbedCopiar el enlace

Una publicación, perfil, sonido o hashtag de Huwi (embed.type: post, profile, sound o hashtag, con su id). El servidor lo acepta; hoy la app no lo dibuja todavía, así que no cuentes con él para información importante.

Ejemplos completosCopiar el enlace

Estado de un pedidoCopiar el enlace

Un quizCopiar el enlace

Un reporteCopiar el enlace

Límites de un componenteCopiar el enlace

El contrato de Huwi es este:

• Tamaño del JSON: 16 KB.
• Piezas: 150 en total, con 6 niveles de profundidad como máximo.
• Acciones: 20 en todo el mensaje.
• Solo los tipos de pieza de arriba.

Al guardar una plantilla, el servidor los revisa y responde BAD_REQUEST con el motivo (components-size, components-nodes, components-depth, components-actions).

PlantillasCopiar el enlace

bot.setTemplate guarda un componente con huecos {{variable}} y message.send acepta template: { name, vars } para rellenarlo.