My custom json templates with images and buttons are not being showed on but simply the json function i wrote is being shown as it is

Rasa Open Source
1

Hello everyone, i am currently on learning phase and i was trying to implement custom json templates for buttons and payloads with images and i am not getting answer as expected.

For the function i have written:

class action_book_room(Action):

def name(self) -> Text:
    return "action_book_rooms"
def run(self,dispatcher:CollectingDispatcher,tracker:Tracker,domain:Dict[Text,Any]) -> List[Dict[Text,Any]]:
    print("hi")
    gt = {
        "attachment": {
            "type": "template",
            "payload": {
                "template_type": "generic",
                "elements": [
                                            {
                        "title": "Deluxe Room",
                        "subtitle": "These Deluxe Rooms let you relax as you admire a beautiful view of the pool. Stay connected as you enjoy our free WiFi and watch movies with our 32-inch LCD TV and DVD player.",
                        "buttons": [
                            {
                                "type": "postback",
                                "payload": "/deluxe_room_details",
                                "title": "Read More"
                            },
                          {
                                "type": "postback",
                                "payload": "/book_room_now",
                                "title": "Book Now"
                            },  
                        ]
                    },

                    {
                        "title": "Junior Suite",
                        "subtitle": "Large bedroom with exquisitely embroidered queen or king size bed. Elegant, luxury decor with rich fabrics. Separate sitting room with sofa and armchairs.",
                        "buttons": [
                            {
                                "type": "postback",
                                "payload": "/junior_suite_details",
                                "title": "Read More"
                            },
                            {
                                "type": "postback",
                                "payload": "/book_room_now",
                                "title": "Book Now"
                            },
                        ]
                    },
                    {
                        "title": "Club Suite",
                        "image_url":"https://media-cdn.tripadvisor.com/media/photo-s/12/77/d8/18/club-suite-living-room.jpg",
                        "subtitle": "The Club Suite is the ideal choice for a comfortable and lavish stay for both small families and business travelers alike. The gently soothing views and the calming ambiance of the suite add to an enriching experience for our guests.",
                        "buttons": [
                            {
                                "type": "postback",
                                "payload": "/club_suite_details",
                                "title": "Read More"
                            },
                            {
                                "type": "postback",
                                "payload": "/book_room_now",
                                "title": "Book Now"
                            }, 
                        ]
                    },
                    
                ]
            }
        }
    }
    dispatcher.utter_message(json_message=gt)
    return []

`

Screenshot from 2020-09-24 22-01-17
Screenshot from 2020-09-24 22-01-171366×768 138 KB

I am getting output as above.

But what i was looking is .

Screenshot from 2020-09-24 22-03-29
Screenshot from 2020-09-24 22-03-291366×768 219 KB

Please help me what i am missing as i am not finding the proper documentation for this as well.

Here are my complete files: stories.md (374 Bytes) nlu.md (3.6 KB) domain.yml (4.1 KB) config.yml (671 Bytes) actions.py (6.8 KB)

2

Hey @iamsid

Do you still experience the problem?

3

Yes @degiz i searched for the possible solution but didn’t find one. Also no proper documentation was found. Please can you help me with this.
While searching for solution i saw somewhere like this custom json template doesnot work for rasa x but i am not sure please clarify.

4

Hi @iamsid, this is the exepcted output of the custom response variation. This is because it was created in order to be able to send arbitrary data to a front-end, for the frontend to interpret it as it sees fit.

You custom payload would not work in a different frontend such as slack or facebook, since they all have different APIs. Rasa X cannot account for all of these differences, therefore it displays the JSON payload itself.

You can still interact with any interactive components in your custom output by sending the payloads associated with those directly.

5

Thanks @erohmensing for the clarification. i think documentation on this would be helpful for someone like me who is learning rasa :blush:

6

Noted, I’ll add something to the docs section on custom output payloads :slight_smile: