Dynamic carousels and choices
# 🌎general
j
First Botpress question ever: So, is there a way to create a truly dynamic carousel / card / select (any of those)? I want to filter data from an API endpoint and then possibly display 1-50 items. I will never know the number of results that will be returned. Another example would be that I might like to create an array and populate a select depending on the user's question. I want the user to be able to select one of the dynamic answers and for those to be populated based on the array data. It obviously could be an array of objects. NOTE: I don't want to hardcode each element for any of these. Hopefully, that makes sense.
e
Hello @jolly-postman-63595 welcome to Botpress! You can create dynamic choices in a capture card, check out this tutorial:
And to create a dynamic carousel you could use this snippet below:
Copy code
js
// Function to create a card for a product
function createCardForProduct(product, index) {
  return {
    type: 'card',
    title: {
      dynamicValue: `${product.title}`,
      valueType: 'dynamic'
    },
    imageUrl: {
      dynamicValue: `${product.imagesSrc}`,
      valueType: 'dynamic'
    },
    actions: [
      {
        action: 'url',
        label: {
          dynamicValue: 'Open',
          valueType: 'dynamic'
        },
        value: {
          dynamicValue: `${product.url}`,
          valueType: 'dynamic'
        }
      }
    ]
    // Add other card properties like subtitle, actions
    // ...
  }
}

// Create the carousel items
const carouselItems = products.map((product, index) => createCardForProduct(product, index))

// Send the carousel
bp.dm.replyToEvent(event, {
  type: 'carousel',
  items: carouselItems
})
The example code above allows you to send a carousel from within a Code card You can adapt the arguments of
replyToEvent
to send other types of messages as well ⚠️ This is an undocumented function that is subject to breaking changes. Use it at your own risk
-------- But we shall be releasing dynamic carousels officially in the next months! Stay tuned to #1111016943370113174
@straight-wolf-37371 you might find this interesting
s
👀 Thanks!!!! I have to try this out
j
Thank you so much. I will definitely be playing with this over the weekend. I'm assuming that I can inspect the payload from the bot on any interaction to get the object for other "cards" or UI items that I want to make dynamic (choice / buttons). Secondary Question: I assume I can capture the clicked option using the event variable? I'm happy to try this out, but it might save me a bit of time if someone knows 🙂 @straight-wolf-37371
Well, that was easy!
e
Thanks for the feedback! Glad you found it easy
There is no way to inspect a specific Emulator message payload, but you have these tabs that show the inner workings and state of the bot
a
hello, this code is working fine in emulator, and I able to see the carousel but the carousel is not appearing when I checked in a webpage. Can you please let me know what could be the issue ?
Answering to my question, it worked I just need to add "actions": [] as it is required. I just wanted to know if it is documented anywhere. also it would be great if you could provide for other messages as well
e
Thanks for the feedback @adorable-gigabyte-54754! Since this is not an officially released function, it's not documented yet
But stay tuned to #1111016943370113174
q
We tried it here, and it works perfectly 🛠️ 🫡 https://discord.com/channels/1108396290624213082/1198245171788259409
j
hello, 1 question will this work for product reccommendation ?
me, im confused :/
this is hat ive got..
now where do i put your code exactly ?
umm and how do i change the text of the prodducts name, image ect..
e
In this example the code would be in the Execute Code card, and there would be no need for the Carousel @jolly-policeman-82775
j
i did it already
i masterd it.
hey there Guilhermy: awesome feature, is there any update on this ?
e
You might want to ask @crooked-van-25152 or @witty-football-93730
p
Thanks for all the help Guilhermy! How would you set up the variables before creating the cards? Do you have a bot I could check out that does this?
q
You can find two chatbots using Guilhermy's genius idea and solution here: https://discord.com/channels/1108396290624213082/1198245171788259409
p
Amazing, thanks!
47 Views