Dynamic Dialog Generator

Using this function, you can use a list of items to be displayed dynamically on action blocks like Buttons, Carousel etc.

With the help of dialogGenerator function, we can generate static dialog or dynamic dialog

(Using Service Call Dialog API response variable) in the form of Buttons, Carousal, List, Options and Reply Buttons.

Code-block function name: dialogGenerator

{
  "type": "type_of_dialog",
  "data_variable": "API_response_variable_name",
  "properties": {
    "goal": "optional static",
    "title": "static/path",
    "button_properties": [
      {
        "title": "static/path",
        "type": "static",
        "web_url": "static/path (Optional)",
        "browser_window": "static/path (Optional)"
      }
    ]
  },
  "variable": {
    "name": "variable_name",
    "type": "contact/non_contact"
  }
}

Property of requested arguments

Argument	Description
type	this property refers to the type of dialog you need to generate like a button, carousel, etc.
data_variable	If you want to generate dialogs from JSON data(LikeService Call Dialog API response) this is a mapping of the variable that internally generates dialogs from that variable values(If any).
properties	This refers to particular dialog properties that every dialog uniquely contains.
goal	This property is used for goal tracking in the system. This is an optional property.
title	It refers to the title of the dialog. This is a required property.
button_properties	This property is used to configure the buttons generated by each dialog.
variable	This property is used to store selected response in a variable and it also defines the type of variable(Like contact or non_contact)(Note: This will only work if the variable is already defined in bot-flow)

Buttons

Buttons (with Branch)

{
  "type": "button",
  "data_variable": "API_response_variable_name",
  "properties": {
    "goal": "Button dialog 1",
    "title": "This is button dialog",
    "button_properties": [
      {
        "title": "Button 1",
        "type": "branch"
      },
      {
        "title": "Button 2",
        "type": "branch"
      }
    ]
  },
  "variable": {
    "name": "variable_name",
    "type": "non_contact"
  }
}

Note - you need to insert inline JSON in the code-block argument.

Buttons (with URL)

Example arguments

{
  "type": "button",
  "data_variable": "API_response_variable_name",
  "properties": {
    "goal": "Button dialog 1",
    "title": "This is button dialog",
    "button_properties": [
      {
        "title": "Button 1",
        "type": "web_url",
        "web_url": "https://www.google.com",
        "browser_window": "same"
      },
      {
        "title": "Button 2",
        "type": "web_url",
        "web_url": "https://mail.google.com",
        "browser_window": "same"
      }
    ]
  },
  "variable": {
    "name": "variable_name",
    "type": "non_contact"
  }
}

• Here to create dynamic URL buttons we need to set the type of button as “web_url“

• Also, there will be two more properties for the web_url button named “web_url“ and “browser_window“

• The “web_url“ property will set the redirection URL on the button on which the user will click and it will redirect to that URL

• “browser_window“ is used to set the new redirected URL will open in the “same” window or in the “new” window. The value of this property will be from “same“ or “new“

Example argument

{
  "type": "button",
  "data_variable": "data",
  "properties": {
    "goal": "Button dialog 1",
    "title": "This is button dialog",
    "button_properties": [
      {
        "title": "result[*].title",
        "type": "web_url",
        "web_url": "result[*].avatar",
        "browser_window": "same"
      }
    ]
  },
  "variable": {
    "name": "variable_name",
    "type": "non_contact"
  }
}

URL buttons generated from API example

{
  "type": "button",
  "data_variable": "data",
  "properties": {
    "goal": "Button dialog 1",
    "title": "This is button dialog",
    "button_properties": [
      {
        "title": "result[*].title",
        "type": "web_url",
        "web_url": "result[*].avatar",
        "browser_window": "same"
      }
    ]
  },
  "variable": {
    "name": "variable_name",
    "type": "non_contact"
  }
}

• To generate dialogs dynamically we need to give a path to a particular level and also need to provide variables to generate dynamic dialogs

• I have used service call dialog to get data variable which is used to generate dynamic buttons

Carousel

Static Carousel

{
  "type": "carousel",
  "data_variable": "data",
  "properties": {
    "goal": "this is goal",
    "title": "this is Carousel",
    "card_properties": [
      {
        "image": "",
        "description": "This is carousel card",
        "title": "Card 1",
        "button_properties": [
          {
            "button_type": "branch",
            "title": "Button 1"
          }
        ]
      },
      {
        "image": "",
        "description": "This is carousel card 2",
        "title": "Card 1",
        "button_properties": [
          {
            "button_type": "branch",
            "title": "Button 2"
          }
        ]
      }
    ]
  },
  "variable": {
    "name": "carousel",
    "type": "non_contact"
  }
}

• This is a simple carousel dialog generated by static data

• There will be two things that can be dynamically generated, those are cards and buttons in cards

Static Carousel example

{
  "type": "carousel",
  "data_variable": "data",
  "properties": {
    "goal": "this is goal",
    "title": "this is Carousel",
    "card_properties": [
      {
        "image": "https://reqres.in/img/faces/1-image.jpg",
        "description": "This is carousel card",
        "title": "Card 1",
        "button_properties": [
          {
            "button_type": "branch",
            "title": "Button 1"
          }
        ]
      },
      {
        "image": "https://cataleya-conversation-attachment-staging.storage.googleapis.com/1399_9970_pLVhnmQyTDVr1044216969216TMjJYfU_attachment.png",
        "description": "This is carousel card 2",
        "title": "Card 1",
        "button_properties": [
          {
            "button_type": "branch",
            "title": "Button 2"
          }
        ]
      }
    ]
  },
  "variable": {
    "name": "carousel",
    "type": "non_contact"
  }
}

• The image carousel will be the same as a simple carousel but the difference will be of image URL

• If you specify the image URL then it will generate a carousel with the image otherwise not

Dynamic Carousels

Dynamic carousels example

{
  "type": "carousel",
  "data_variable": "data",
  "properties": {
    "goal": "this is goal",
    "title": "this is Carousel",
    "card_properties": [
      {
        "image": "",
        "description": "result[*].description",
        "title": "result[*].title",
        "button_properties": [
          {
            "button_type": "branch",
            "title": "result[*].first_name"
          }
        ]
      }
    ]
  },
  "variable": {
    "name": "carousel",
    "type": "non_contact"
  }
}

• To generate dynamic cards from variables you need to provide the path as we have done in buttons in form of a look-up path for JSON

• You can also provide a path to description and image to generate dynamic Cards and buttons as we do it for the title of cards and buttons in the carousel

List (for WhatsApp)

• We also can generate a list dialog using this code block for WhatsApp only

• We need to give the type as a list and provide other properties of the list

• Here section_title refers to the section in the list, it is handled on the WhatsApp side to categorise buttons in one section

• Buttons having the same section name will fall under one section

Dynamically Generated list Example

{
  "type": "list",
  "data_variable": "data",
  "properties": {
    "goal": "This is Goal",
    "body": "This is List body",
    "list_title": "This is list",
    "button_properties": [
      {
        "section_title": "Buttons",
        "title": "result[*].title",
        "description": "result[*].description"
      }
    ],
    "footer": "This is footer",
    "header": "This is header",
    "error_message": "Please select valid button"
  },
  "variable": {
    "name": "list",
    "type": "non_contact"
  }
}

To generate dynamic buttons using variables we need to specify the lookup path for the JSON to the title and description

Options (for WhatsApp)

Static Options example

{
  "type": "button",
  "data_variable": "API_response_variable_name",
  "properties": {
    "goal": "Button dialog 1",
    "title": "This is button dialog",
    "button_properties": [
      {
        "title": "Button 1",
        "type": "branch"
      },
      {
        "title": "Button 2",
        "type": "branch"
      }
    ]
  },
  "variable": {
    "name": "variable_name",
    "type": "non_contact"
  }
}

• The options dialog is similar to the button dialog on the web, but it is available to generate buttons for WhatsApp only

• Here button type is also the same as buttons for web channels just difference is that it can not generate web buttons as compared to web channels as WhatsApp does not provide support for web buttons

Dynamically generated Option example

{
  "type": "button",
  "data_variable": "data",
  "properties": {
    "goal": "Button dialog 1",
    "title": "This is button dialog",
    "button_properties": [
      {
        "title": "result[*].title",
        "type": "branch"
      }
    ]
  },
  "variable": {
    "name": "options",
    "type": "non_contact"
  }
}

To generate options dialog from variable we need to give a lookup path for JSON to the title property

Reply Buttons (for WhatsApp)

Static Reply Buttons example

{
  "type": "reply_button",
  "variable_name": "any",
  "properties": {
    "goal": "optional static",
    "title": "This is the Reply Button section",
    "button_properties": [
      {
        "button_type": "branch",
        "title": "Reply button 1"
      },
      {
        "button_type": "branch",
        "title": "Reply button 2"
      }
    ],
    "header": {
      "type": "text",
      "text": "This is a reply button header"
    },
    "footer": "This is reply button footer",
    "error_message": "Please select from the above buttons only"
  },
  "variable": {
    "name": "reply_button",
    "type": "non_contact"
  }
}

• Reply buttons are only available on the WhatsApp channels

• It provides the same functionality as the reply button in WhatsApp, you can provide the functionality to attach different headers available on the WhatsApp side

• We can also insert a footer and error message in the reply button dialog

Dynamically Generated Reply Buttons Example

{
  "type": "reply_button",
  "data_variable": "data",
  "properties": {
    "goal": "optional static",
    "title": "This is the Reply Button section",
    "button_properties": [
      {
        "button_type": "branch",
        "title": "result[*].title"
      }
    ],
    "header": {
      "type": "text",
      "text": "This is a reply button header"
    },
    "footer": "This is reply button footer",
    "error_message": "Please select from the above buttons only"
  },
  "variable": {
    "name": "reply_button",
    "type": "non_contact"
  }
}

• To generate reply button from variable response one need to provide look up path for JSON to the title property. Other properties are static so we can not set path to other property