Build ChatGPT chatbots, surprisingly fast 🚀 Use our Discord server https://discord.gg/botpress to interact!

Botpress

Hi,

I am facing one issue with the carousel not getting rendered on a simple webpage, the below code works fine in the emulator and I am able to see the carousel but the same is not working in a webpage.

await axios(...)
  .then((res) => {
    workflow.apiResponse = res

    if (workflow.apiResponse && workflow.apiResponse.data && workflow.apiResponse.data.length) {
      // Create the carousel items
      const carouselItems = workflow.apiResponse.data.map((product, index) => createCardForProduct(product, index))

      // Send the carousel
      bp.dm.replyToEvent(event, {
        type: 'carousel',
        items: carouselItems
      })
    }
  })
  .catch((err) => {
    workflow.errorResponse = err.message
    bp.dm.replyToEvent(event, {
      type: 'text',
      text: `Sorry, unable to fetch the results. Please try again!`
    })
  })

// Function to create a card for a product
function createCardForProduct(product, index) {
  return {
    type: 'card',
    title: {
      dynamicValue: `${product.name}`,
      valueType: 'dynamic'
    },
    imageUrl: {},
    subtitle: {
      dynamicValue: `${product.address}`,
      valueType: 'dynamic'
    },
    actions: []
  }
}