The composer is the main input section that a user will use to:
- Type and submit text.
- Upload files.
- Upload photos/images.
- Take and upload a photo with their phone's camera (this is only applicable to Meya Orb Mobile SDK).
By default, the input composer will always be shown with the text input field visible. This allows a user to focus the text input field and start typing a message.
Some input components such as the image.ask component will change the composer to show the File and Photo buttons automatically.
The composer can be customized in BFML using the composer spec, which has a number of fields that allow you to control what the composer looks like. Here is the composer spec definition:
composer: focus: file|image|text|blur placeholder: STRING collapse_placeholder: STRING visibility: collapse|hide|show
In this example the text.say component will set the composer to display the text input with keyboard focus and display a custom placeholder text.
steps: - say: How are you doing? composer: focus: text placeholder: What's on your mind... visibility: show
Which produces the following:
In this example the text.say component will collapse the composer with custom placeholder text that allows a user to show the text input when they click the composer.
steps: - say: Which is your favourite color? quick_replies: - Red - Blue composer: focus: blur placeholder: Type in a color visibility: collapse collapse_placeholder: Click to type a color
In this example the text.say component will hide the composer altogether. Using this you can force a user to select a button/quick reply, or input using the form.
steps: - type: meya.text.component.input label: Favourite color required: true placeholder: Type your favourite color... quick_replies: - text: I don't like color - text: What's the meaning of color? composer: focus: blur visibility: hide
In this example the text.say component will show the composer and give focus to the Photo button. (The same can be done for the File button.)
You can also customize the composer config using the Orb integration settings, here is an example:
type: meya.orb.integration markdown: true theme: brand_color: '#4989ea' launcher: type: message text: Help collect: location: user composer: visibility: show placeholder_text: Type here... file_button_text: Upload File file_send_text: Upload image_button_text: Upload Photo camera_button_text: Capture gallery_button_text: Photo Gallery
Updated 12 months ago