Slack API - how to send multiple images so they are shown in a gallery - slack-api

When I send multiple images via api using blocks like this:
{
"blocks": [
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
}
]
}
Slack shows them like a separate blocks and doesn't combine them into a gallery:
slack screenshot - API
When I upload them using Slack app in one message - it combines them into a gallery:
slack screenshot - with gallery
I've tried blocks, attachments, third-party urls, permalinks after file.upload - the result is the same, Slack doesn't combine them into gallery.
So, the question is - how do I make it that Slack shows several images in a gallery?

UPD:
Just got an answer from Slack developers support:
slack dev support answer screenshot
Unfortunately, horizontal/gallery formatting of images is not possible
using the block kit builder. However, I'm going to go ahead and pass
your email on to our product team so that they can take this into
consideration for future updates.

Based on your comment,
[...] permalinks after file.upload [...]
this related answer might help (I also added this clarification there).
When uploading files and collecting their permalinks, you must link them in the text param in the message payload (putting them in a mrkdwn block in the blocks param will not work).
In javascript, this looks like:
const result1 = await web.files.upload({...})
const result2 = await web.files.upload({...})
await web.chat.postMessage({
text: `Here are files in a gallery view <${result1.file.permalink| ><${result2.file.permalink| >`,
...
})

Related

Logic apps- Post a choice of options as the flow bot to group chat

I can see that logic app has Microsoft teams "Post a choice options as the Flow bot to a user" action. However, I would like something where I can present options to a group chat or channel. The reason for not sending multiple individual messages are because I would like only 1 person to response in first come first serve kind of way.
Is there any way I can achieve this?
I can see that logic app has Microsoft teams "Post a choice option as the Flow bot to a user
Yes, you can use Post a choice of options as the flow bot to a user connector in logic Apps to present options to a user as shown in below images.
I would like something where I can present options to a group chat or channel.
But if you want to present options to a group chat or channel AFAIK there is no such built-in connector available in logic Apps. You can achieve this using Adaptive cards.
Adaptive cards for Microsoft teams
By following this document, you can add radio buttons or by changing test as an option you can create buttons labeled option1 and option2 as per your requirement.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Text Block",
"text": "Please select an option:"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Option 1",
"data": {
"id": "option1"
}
},
{
"type": "Action.Submit",
"title": "Option 2",
"data": {
"id": "option2"
}
},
]
}
Reference link

Twilio Autopilot SMS not accepting media image type

I wrote a task a while back that would run a collect flow and collect an image using the model on the docs for doing so (https://www.twilio.com/docs/autopilot/actions/collect#questions). It ran flawlessly, and I tested it to make sure it ran as expected.
I made a new account using the company email to migrate my work over, and continue implementing the code, and eventually reached the portion where I needed to integrate that media collection. I used the same code, but it didn't work. The collect flow keeps on triggering the validate portion and telling me that it isn't an accepted type. I have tried it using the exact code from before as well as the exact image, but it still isn't working. The only thing I can think of is if the phone number was set up differently somehow. The message logs show the image as sent and looks fine and I can't find any differences other than that.
Is there anything that might be causing this? Here is the code for reference
{
"actions": [
{
"collect": {
"name": "image_collect",
"questions": [
{
"question": "Please upload an image",
"name": "image",
"type": "Twilio.MEDIA",
"validate": {
"on_failure": {
"messages": [
{
"say": "We do not accept this format. Please send another image."
}
]
},
"allowed_types": {
"list": [
"image/jpeg",
"image/gif",
"image/png",
"image/bmp",
"application/pdf"
]
}
}
}
],
"on_complete": {
"redirect": "https://4894-100-33-3-193.ngrok.io/image_processing"
}
}
}
]
}
Generally, media size causes this issue, just make sure the file size is within the limits.
For more info - https://www.twilio.com/docs/sms/accepted-mime-types

Unfurl links blocks template

I'm using the link_shared events to unfurl links in my workspace, trying to generate a template that is as close to Slack's unfurling template as possible, but I have several issues -
Blocks have very large spacing between them, causing my 3 blocks to take a lot of space
I'm unable to have an image inlined with the text for the title, unless I'm using context, but this is causing the text to be very small.
Taking Slack's example of how link unfurling should look like and trying to mimic it with blocks should explain the differences. This is the blocks message, and here you can see the result as an image
So my main question is - does Slack use some internal blocks formatting not available in the API, or is it possible to achieve the same result?
Thanks a lot!
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":pager: *Slack*"
}
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*<https://slack.com/features|Features>*"
}
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Slack is where work flows. It's where the people you need, the information you share, and the tool you use come together to get things done.",
"emoji": true
},
"image_url": "https://a.slack-edge.com/13f94ee/marketing/img/homepage/self-serve-campaign/unfurl/img-unfurl-ss-campaign.jpg",
"alt_text": "Slack"
}
]
}
That example is not using the Slack block unfurl - it's an example of how a generic link would be displayed using the page's meta tags to display some additional information, using the favicon image.
If you wanted to create something similar you could use use a markdown block and an image block (like this) - but the file size would be displayed on a new line rather than after the text.
It took a bit of playing around, but I realized Slack is actually using message attachments (the legacy version of message formatting) in order to generate their link unfurls.
For example, if you want to unfurl a GitHub repository link, this is the payload you should send, and it'll generate an almost identical unfurling to what Slack is generating (a small Added by {app-name} will be added to the footer) -
unfurls["https://github.com/slackapi/bolt-js/"] = {
author_name: "GitHub",
author_icon: "https://a.slack-edge.com/80588/img/unfurl_icons/github.png",
title: "GitHub - slackapi/bolt-js: A framework to build Slack apps using JavaScript",
title_link: "https://github.com/slackapi/bolt-js/",
text: "A framework to build Slack apps using JavaScript. Contribute to slackapi/bolt-js development by creating an account on GitHub.",
image_url: "https://opengraph.githubassets.com/3e06f7eee96f05a53cd4905af3b296dfe333be7a902bb3e6a095770e87fd17fe/slackapi/bolt-js"
}

Slack API chat.postMessage URL Unfurling

I have a bot app that sends a message to the slack channel. I am using https://api.slack.com/methods/chat.postMessage/ to send messages to the slack channel.
My message sometimes has few links (GIF) which are being rendered in the channel as a plain link.
I want them to be unfurled so that it can display animated GIF on the channel itself.
I tried passing unfurl_links: true to the API parameter however it doesn't work.
Here is my JSON payload
{
"text": "Anniversary Alert :confetti_ball:",
"channel": "C01AGGP63ST",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Anniversary Alert :confetti_ball:\n\nLet's all take a moment to congratulate <#U024FCGPW> on their 10 year anniversary!\n\nWe wish you a very happy anniversary and many more great years ahead with us.\n\nhttps://media0.giphy.com/media/1yjpDZgvGkb6nTynq3/giphy.gif?cid=cbd9d2f95475c686b1a293a6cf43de5f3f640e4eb012f714&rid=giphy.gif"
}
}
],
unfurl_links: true
}
Can someone please help?
Used "attachments" property of the API payload and it unfurls the link
{
"text": "Anniversary Alert :confetti_ball:",
"channel": "C01AGGP63ST",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Anniversary Alert :confetti_ball:\n\nLet's all take a moment to congratulate <#U024FCGPW> on their 10 year anniversary!\n\nWe wish you a very happy anniversary and many more great years ahead with us.\n\nhttps://media0.giphy.com/media/1yjpDZgvGkb6nTynq3/giphy.gif?cid=cbd9d2f95475c686b1a293a6cf43de5f3f640e4eb012f714&rid=giphy.gif"
}
}
],
"attachments": [
{
"text": "",
"image_url": "https://media0.giphy.com/media/1yjpDZgvGkb6nTynq3/giphy.gif?cid=cbd9d2f95475c686b1a293a6cf43de5f3f640e4eb012f714&rid=giphy.gif"
}
]
}
The big gotcha here is that slack unfurl is only triggered when it's a user (bots do not trigger unfurls). Too bad - I'm running into the same issue - unfurl was going to be the way to go but I missed the fine print. I think I'm going to just go with a chat threaded reply (which is way less pretty).

Open URL in browser from Message Button using Slack API

I am sending the users a slack message with a button through a Slack App. On every click of the button, I generate a new URL.
At the moment, I am able to return the URL back as a message. The user clicks on the message to open the URL in the browser.
Instead of the sending a message back, I want to open the URL directly in the browser using slack API.
How can I accomplish it? I can't seem to find anything in the documentation that does that.
Thanks
PS: Google Drive integration does that already.
It appears Slack introduced this feature recently.
As documented in https://api.slack.com/docs/message-attachments#link_buttons
"actions": [
{
"type": "button",
"text": "Book flights 🛫",
"url": "https://flights.example.com/book/r123456"
}
It's possible to preview in Slack's interactive message builder
Unfortunately slack does not support opening urls from message buttons.
You can monitor what slack is planning on releasing here though: https://trello.com/b/ZnTQyumQ/slack-platform-roadmap-for-developers :)
According to Slack, message attachments is the "old way" of composing messages, which will be deprecated in favour of the new Block Kit API.
I found this example on how to do button links on their docs, using the actions object in the message payload.
I haven't implemented it yet, but you can send the message to a channel in your workspace straight from the docs and try it, and it does open the link in the browser as expected.
Update 04/2022
{
"blocks": [
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "View",
"emoji": true
},
"style": "primary",
"url": "https://flights.example.com/book/r123456"
}
]
}
]
}
Test on Slack Blockit Builder: Link

Resources