Example with multiple nodes and conditions

This is an example of a widget with multiple nodes and that uses all components. The Rich Media object with multiple pages prompts users for their name and account number, and then it sends the data to the agent.

{
    "widgetType": "standard",
    "widgetView": "inline",
    "widgetAction": "optional",
    "showMessageText": true,
    "displayInRestore": true,
    "initialView": "view1",
    "pagination": {
        "background": "#007bff",
        "style": "extend"
    },
    "nodes": [{
            "id": "view1",
            "controls": {
                "0": {
                    "type": "Input",
                    "id": "input1",
                    "label": "Enter your full name",
                    "placeholder": "Firstname Lastname",
                    "validation": {
                        "required": {
                            "value": true,
                            "error": "Please enter a name."
                        }
                    },
                    "event": {
                        "name": "eventinputchange"
                    }
                },
                "1": {
                    "type": "Button",
                    "id": "button1",
                    "text": "Next",
                    "event": {
                        "name": "onsubmit1"
                    },
                    "enabled": {
                        "trigger": "eventinputchange",
                        "guard": "(!(isEmpty(#view1.input1.text)))"
                    }
                }
            },
            "context": {
                "widgetContainerBackgroundColor": "#e0e0e0"
            }
        }, {
            "id": "view2",
            "controls": {
                "0": {
                    "type": "Input",
                    "id": "input1",
                    "label": "Enter your account number",
                    "placeholder": "XX-XXXXXX",
                    "event": {
                        "name": "eventinputchange
                           }
                            },
                          " 1 ": [{
                          " type ": " Button ",
                          " id ": " button2 ",
                          " text ": " Back ",
                          " event ": {
                          " name ": " onback1 "
                            }
                           },{
                         " type ": " Button ",
                         " id ": " button3 ",
                         " text ": " Submit ",
                         " event ": {
                         " name ": " onsubmit2 "
                            },
                          " enabled ": {
                          " trigger ": " eventinputchange ",
                          " guard ": "(!(isEmpty( # view2.input1.text)))"
                          }
                          }
                         ]
                         },
                        " context ": {
                        " widgetContainerBackgroundColor ": " # e0e0e0 "
                         }
                          }
                         ],
                        " transitions ": [{
                         " name ": " Transition1 ",
                         " from ": " view1 ",
                         " trigger ": " onsubmit1 ",
                         " to ": " view2 "
                          },{
                         " name ": " Transition2 ",
                         " from ": " view2 ",
                         " trigger ": " onback1 ",
                         " to ": " view1 "
                          },{
                         " name ": " Transition3 ",
                         " from ": " view2 ",
                         " trigger ": " onsubmit2 ",
                         " to ": {
                         " sendMessage ": {
                         " displayText ": " Information Submitted ",
                         " name ": " # view1.input1.text ",
                         " account ": " # view2.input1.text "
                          }
                          }
                        }
                        ] }

This rich-media object is displayed as follows: