Cómo enviar mensajes personalizados a Slack desde tu aplicación

Slack es una aplicación de mensajería popular utilizada por muchos equipos. Viene con muchos servicios y una API para que los desarrolladores lo integren con sus aplicaciones. En el post de hoy veremos cómo utilizar uno de sus servicios llamado Incoming Webhooks , para enviar datos a slack desde una aplicación externa.

De esta forma podemos enviar mensajes fácilmente a Slack desde cualquier aplicación que ya tengamos ; podemos enviar informes, actualizaciones, noticias, notificaciones y más. Para esta publicación, he usado JavaScript en el ejemplo. Para comenzar, inicie sesión en la cuenta de Slack de su equipo.

10 útiles herramientas de Slack para una mejor productividad

.no-js #ref-block-post-24081 .ref-block__thumbnail { background-image: url(“https://assets.hongkiat.com/uploads/thumbs/250×160/slack-productivity-tools.jpg”); }

10 útiles herramientas de Slack para una mejor productividad


Desde su lanzamiento en 2013, Slack ha crecido hasta convertirse en una herramienta de comunicación de equipo superior para generar conversaciones, …
Lee mas

1. Configure la integración

Primero deberá configurar una integración de webhook entrante. Vaya a yourteam.slack.com/apps/build/custom-integration y haga clic en Incoming Webhooks , luego seleccione un canal o usuario en el que desee publicar sus mensajes (esta selección se puede anular más adelante en el código).

Una vez hecho esto, verá la página de configuración de la integración de webhook entrante.

Desplácese hacia abajo y habrá una URL de Webhook en el formato https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Guarde esa URL en algún lugar, la necesitaremos más tarde. Puede cambiar aún más el icono y el nombre de la integración en esta página, pero lo haremos en código.

2. Crea el mensaje

Imaginemos que ya ha creado una aplicación web que busca las ventas del Día de San Valentín en sitios populares, así como los códigos de oferta para usar durante la venta y, por alguna razón, desea compartir este resultado con los miembros de su equipo de Slack.

Todo lo que tenemos que hacer ahora es usar la URL del webhook creada en el paso anterior y enviarle una solicitud desde su aplicación con datos JSON, que elaborará el mensaje de oferta de venta.

Primero juntemos la cadena JSON que se convertirá en el mensaje de Slack. El parámetro que lleva los datos JSON se llama carga útil, por lo tanto, la cadena JSON debería verse así:

1
var myJSONStr = 'payload= {"username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "channel": "#general"}'

icon_urles la URL de la imagen que aparecerá como imagen de perfil, también puede usar icon_emojipara mostrar un emoji como imagen de perfil, por ejemplo "icon_emoji": ":gift:". "channel"especifica el canal o nombre de usuario que verá su mensaje. Para el nombre de usuario, use la sintaxis "@username", para el canal "#channelname".

Ahora para el mensaje real; puede agregar la "text"propiedad y escribir su mensaje como su valor y terminar con él, o usar la propiedad llamada "attachment"para agregar texto con formato enriquecido, que es lo que haremos ahora.

La "attachment"propiedad de payloades así:

1
2
3
4
5
6
7
8
9
10
11
12
"attachments": [{
    "fallback": "The attachement isn't supported.",
    "title": "VALENTINE'S DAY OFFER",
    "color": "#9C1A22",
    "pretext": "Today's list of awesome offers picked for you",
    "author_name": "Preethi",
    "author_link": "https://1000demonios.com/author/preethi/",
    "author_icon": "https://assets.hongkiat.com/uploads/author/preethi.jpg",
    "mrkdwn_in": ["text","fields"],
    "text": "Just click the site names and start buying. Get *extra reduction with the offer code*, if provided.",
    "thumb_url": "http://example.com/thumbnail.jpg"
}]

"fallback" es el texto alternativo que se muestra cuando el mensaje de Slack se visualiza en una aplicación que no admite archivos adjuntos de mensajes (como en las notificaciones móviles).

"color" es el color del borde izquierdo del mensaje.

"pretext" es el texto que se muestra antes del contenido principal.

"author_link" es la URL con hipervínculo en el nombre del autor (si se proporciona).

"mrkdwn_in"es una matriz de nombres de propiedades cuyos valores se muestran formateados en el mensaje, según la sintaxis de rebajas, como (*) para negrita y (_) para cursiva. Los tres valores posibles para "mrkdwn_in"son “texto”, “pretexto” y “campos”.

"thumb_url" es la URL de la imagen en miniatura.

Así es como se verá el mensaje hasta ahora.

Ahora agreguemos los campos a la matriz de adjuntos, que mostrará los sitios y los códigos de oferta en dos columnas.

1
2
3
4
5
6
7
8
9
"fields": [{
    "title": "Sites",
    "value": "_<http://www.amazon.com|Amazon>_n_<http://www.ebay.com|Ebay>_",
    "short": true
}, {
    "title": "Offer Code",
    "value": "UI90O22n-",
    "short": true
}],

Úselo npara agregar saltos de línea y la sintaxis <link|link name>para agregar hipervínculos.

El subrayado se utiliza para dar formato al texto en cursiva.

shortse establece en truesi los valores deben mostrarse uno al lado del otro (como si fuera corto). Juntos, JSONString se verá así (mantenga la cadena en una sola línea en el código de trabajo real)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
var myJSONStr = 'payload= {
    "username": "SALE BOT",
    "icon_url": "example.com/img/icon.jpg",
    "attachments": [{
        "fallback": "This attachement isn't supported.",
        "title": "VALENTINE'S DAY OFFER",
        "color": "#9C1A22",
        "pretext": "Today's list of awesome offers picked for you",
        "author_name": "Preethi",
        "author_link": "https://1000demonios.com/author/preethi/",
        "author_icon": "https://assets.hongkiat.com/uploads/author/preethi.jpg",
        "fields": [{
            "title": "Sites",
            "value": "_<http://www.amazon.com|Amazon>_n_<http://www.ebay.com|Ebay>_",
            "short": true
        }, {
            "title": "Offer Code",
            "value": "UI90O22n-",
            "short": true
        }],
        "mrkdwn_in": ["text", "fields"],
        "text": "Just click the site names and start buying. Get *extra reduction with the offer code*, if provided.",
        "thumb_url": "http://example.com/thumbnail.jpg"
    }]
}';

3. Publique la solicitud

Ahora, para realizar la solicitud de publicación en JavaScript, use la función a continuación:

1
2
3
4
5
6
7
8
function postMessageToSlack(){
    var xmlhttp = new XMLHttpRequest(),
        webhook_url = url-you-saved-from-before,
        myJSONStr= json-string-from-above;
    xmlhttp.open('POST', webhook_url, false);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(myJSONStr);
}

Agregue esta función a un clic de botón o carga de página para ver cómo funciona.

La salida final se verá así:

webhook entrante

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *