Quick Reply Buttons - Multi Select

Deployment Teneo Web Chat
1

Currently Looking for a way to allow a user to click on one OR multiple buttons to select inputs and have the inputs be placed into a string delimited by commas:

Button1: Orange
Button2: Red
Button3: Yellow

user selects Button1 and Button2

Variable = “Orange,Red”

is this something that can be done in studio using quick reply buttons and after match scripting or does this need to be handled through TWC on the web page itself in JS?

2 Likes
2

Hi @Kendall_Grape,

since you are using Teneo Web Chat, the Form as message type could be helpful for you, please take a look at Teneo Web Chat | Teneo Developers and let us know if that works for you :slight_smile:

Best,
Benjamin

3

I think will work for what I need in the end.

I attempted to implement the code from:
Teneo WebChat Forms

following the example form here for how to populate the output node:
populate output params

But i cannot seem to get the code to work, I keep getting errors
“…Bad script expression [JSON]: groovy.lang.MissingPropertyException: No such property: JSON for class: Script270”

Here is the script i have in the Script node prior to the output node:

import groovy.json.*

def form = [
  "type": "form",
  "elements": [
    [
      "type": "title",
      "text": "Form Title"
    ],
    [
      "type": "subtitle",
      "text": "Form Subtitle"
    ],
    [
      "type": "label",
      "text": "This is an additional label to let people know * means required"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "",
        "required": true
      ],
      "label": "Text Input Required Example"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "text",
        "pattern": "[A-Za-z]{3}",
        "required": true,
        "title": "Three Letters Only"
      ],
      "label": "Text Input Validation Pattern Example - 3 letters"
    ],
    [
      "type": "label",
      "text": "These inputs are extra buttons that do nothing!"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "button",
        "value": "Boink"
      ]
    ],
    [
      "type": "input",
      "attributes": [
        "type": "button",
        "value": "Doink"
      ]
    ],
    [
      "type": "label",
      "text": "These inputs are radio buttons"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "radio",
        "value": "1",
        "name": "radios"
      ],
      "label": "one"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "radio",
        "value": "2",
        "name": "radios"
      ],
      "label": "two"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "radio",
        "value": "3",
        "name": "radios"
      ],
      "label": "three"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "radio",
        "value": "4",
        "name": "radios"
      ],
      "label": "four"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "radio",
        "value": "5",
        "name": "radios"
      ],
      "label": "five"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "radio",
        "value": "6",
        "name": "radios"
      ],
      "label": "six"
    ],
    [
      "type": "label",
      "text": "These inputs are checkboxes"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "checkbox",
        "value": "dog"
      ],
      "label": "dog"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "checkbox",
        "value": "cat"
      ],
      "label": "cat"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "checkbox",
        "value": "hamster"
      ],
      "label": "hamster"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "date"
      ],
      "label": "This input is a datepicker!"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "time"
      ],
      "label": "This input is a timepicker!"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "datetime-local"
      ],
      "label": "This input is a datetimepicker!"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "color"
      ],
      "label": "This input is a colorpicker!"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "range"
      ],
      "label": "This input is a range!"
    ],
    [
      "type": "input",
      "attributes": [
        "type": "reset",
        "text": "reset"
      ],
      "label": "This input is a reset!"
    ],
    [
      "type": "textarea",
      "attributes":["name":"textarea"],
      "text": "Prepopulated text in textarea.",
      "label": "Text Area Example"
    ],
    [
      "type": "select",
      "attributes":["name":"select"],
      "label": "Example Select",
      "options": [
        [
          "text": "select one below",
          "attributes": [
            "disabled": true
          ]
        ],
        [
          "text": "1"
        ],
        [
          "text": "2"
        ],
        [
          "text": "3"
        ]
      ]
    ],
    [
      "type": "control",
      "text": "Cancel",
      "action": "cancel"
    ],
    [
      "type": "control",
      "text": "OK",
      "action": "submit"
    ],
    [
      "type": "caption",
      "text": "form caption"
    ]
  ]
]

JSON = new JsonOutput().toJson(form)

image
image960×582 31.6 KB

can you point me in the right direction - i think im on the right path but I am missing something Key

4

Hi @Kendall_Grape ,

Have you defined “JSON” as a flow variable?

Chunlin

5

That was the issue - thank you