Talking is not enough, we must show!
The Problem
In the previous sessions, the Tutor shows a picture to students and asks them what's in the classroom. You must have known how to display an image in your application but how do you display it at the right time when the Tutor says "Classroom"?
The Solution
BrainShop is so flexible that you may have several ways to achieve that. This is what we recommend: use data element.
Example 1. Output with image
- appAction example1
- What's in the classroom?
<data>
<img>image_file_name.jpg</img>
</data>
As you might have known, BrainShop returns a JSON for each API request. The data adds additional JSON fields to the returned results. When the above cell is executed, it returns JSON below.
{
"cnt": "What's in the classroom?",
"img": "image_file_name.jpg"
}When receiving the JSON, the client end of your application needs to do a bit of work by checking if img field exists and if yes, displaying as background or before/after the text. For example, if you place your images files at http://mydomain.com/files/images/, you app may display http://mydomain.com/files/images/image_file_name.jpg for the message "What's in the classroom?"
Note:
- BrainShop doesn't manage the media files. You need to manage them with a file server and/or CMS.
- You may provided either full path or only part of path, depending on how you manage the files.
- We use "img" for the above example but you can use any field name for your media files.
- This is applicable to any media including image, video or audio.
Alternative Solution
If you want BrainShop to send contents with rich style including CSS and/or HTML tags, you may use html element.
Things to Keep in Mind
- Use
<data/>element to transfer media information to client during conversation.