Cards in custom components

Cards used inside custom components make for very powerful and amazing bot experiences. We've made it very easy to output cards to your custom components. You can use any card defined in your flow or a custom component. To see the list of properties for each card see Card components or Messenger components.

Example how to create a card in your custom component.

from meya.cards import Image

image_card = Image(image_url="http://i.imgur.com/0F374vh.jpg")

# image_buttons
from meya.cards import ImageWithButtons, Button

buttons = [
  Button(text="Yes", action="yes"),
  Button(text="No", action="no")
]
card = ImageWithButtons(
  image_url="http://i.imgur.com/0F374vh.jpg",
  buttons=buttons
)

📘

Tip

Cards can either be instantiated with keywords or payloads.

An example of an Image card created programmatically in a custom component.

# card used in context of a custom component
from meya import Component
from meya.cards import Image

class CardComponent(Component):
    def start(self):
      	# instantiate the card
        card = Image(image_url="http://i.imgur.com/0F374vh.jpg")

        # create the message (note the `card` rather than `text`)
        message = self.create_message(card=card)

        # respond as you normally would
        return self.respond(message=message, action="next")

# card used in context of a custom component
from meya import Component
from meya.cards import Image

class MultipleMessages(Component):
    def start(self):
      	messages = []
        card = Image(image_url="http://i.imgur.com/0F374vh.jpg")
        messages.append(self.create_message(card=card))
        text = 'All done!'
        messages.append(self.create_message(text=text))
        return self.respond(messages=messages, action='next')

📘

Returning multiple cards

You can always return more than one message by passing list of messages to the respond() method. return self.respond(messages=[…], action="next"). Note the use of messages vs. message.

You may return up to 5 messages. Additional messages will be discarded. If you find messages are not being delivered to the user, verify that you are not running into this limit.

Adding delays in custom components

There may be times when you want one custom component to return multiple messages to the user. Often, you'll want to have delays between these messages so they don't display to the user too quickly.

Delays can only be set from within flows, not from within custom components.

Instead, you can create a loop in your flow.

1. Create a Bot CMS entry containing the text to display.
2. Create a custom component that checks whether there is any text left to display and, if so, populate a flow scope variable with the text to display.
3. Back in the flow, the next state should display the text and add a relative delay before looping back to the custom component.