Using adaptive buttons in Zoom Virtual Agent

Adaptive button in Zoom Virtual Agent allows admins to incorporate custom logic and display options tailored to each end consumer. By leveraging a combination of JavaScript and Collect Input buttons, admins can build more complex, adaptive workflows that respond intelligently to individual user contexts.

The benefits of this feature include:

Requirements for using adaptive button in Collect Input widget

Table of Contents

Use case examples:

How to configure adaptive buttons

Select the right use case

Determine the intended functionality:

Create JSON global variables

Define two JSON objects:

Learn more about creating and managing global variables for Zoom Virtual Agent.

Validate and construct button data

Use JavaScript to construct button data and map it to the global variable created in the previous step.

Example output:


{
    "data": [
        {
            "key1":"value1",
            "key2":"value2",
            "buttonText": "button1"
        },
        {
            "key1":"value1",
            "key2":"value2",
            "buttonText": "button2"
        }
    ]
}

Key considerations

How to use the adaptive button in Collect Input widget

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click AI Management then Virtual Agent.
  3. Click the display name of an existing chatbot.
  4. Click the Bot Flows tab.
  5. Click the display name of an existing bot flow.
  6. In the left-side widgets panel, click and drag Collect Input onto the preferred location in the flow.
  7. Configure the Collect Input widget setting as following:
    • Button Type: Adaptive Button
    • Add Script: Construct the button.
    • Map Output To: Select JSON object 1 mentioned in the Create JSON global variables section.
    • Track Button Selection: Map the selected button info to JSON object 2 mentioned in the Create JSON global variables section.
    • Define Exit Paths: Select next steps after button selection:
      • Play media
      • Collect input
      • Trigger another bot flow

Example:

Use case:

Provide a list of past orders to the consumer and ask the consumer to choose the order of interest to get additional support.

Global variables:

Global variable 1: {global_custom.Account.orderListJS} → list of past orders

Global variable 2: {global_custom.Account.orderJS} → the order data chosen by the consumer

Button data:

{"data":[{"buttonText":"6320221585694","status":true,"email":"adam.alpha@example.com","firstName":"Adam","lastName":"Alpha","total":"13.86","date":"2024-12-13T10:43:50-05:00","tracking":"https://zoomineer-hues.myshopify.com/71283671326/orders/8a3d45cf41dd3947ddfc6fef76583e38/authenticate?key=6bb2b5d8797bb3b0a6be340dd39f38bc"},{"buttonText":"6320220832030","status":true,"email":"adam.alpha@example.com","firstName":"Adam","lastName":"Alpha","total":"18.80","date":"2024-12-13T10:43:25-05:00","tracking":"https://zoomineer-hues.myshopify.com/71283671326/orders/9cd0a1bdadfb5fb35e707b8b1c6a6c62/authenticate?key=03d2b8ca765feb6969a3435e054bc364"},{"buttonText":"6320208642334","status":true,"email":"adam.alpha@example.com","firstName":"Adam","lastName":"Alpha","total":"6.93","date":"2024-12-13T10:37:49-05:00","tracking":"https://zoomineer-hues.myshopify.com/71283671326/orders/1fb7692090ef49340c125853bdc735d9/authenticate?key=203a4066c261d922b8c8d87f7246b6cd"},{"buttonText":"5815700029726","status":true,"email":"adam.alpha@example.com","firstName":"Adam","lastName":"Alpha","total":"19.78","date":"2024-04-29T13:13:03-04:00","tracking":"https://zoomineer-hues.myshopify.com/71283671326/orders/362b7a4e756c650a29d85415080d56b7/authenticate?key=9fa6527c77f53b6bd4f2726477c4bf87"},{"buttonText":"5243001897246","status":true,"email":"adam.alpha@example.com","firstName":"Adam","lastName":"Alpha","total":"9.89","date":"2023-01-23T12:25:17-05:00","tracking":"https://zoomineer-hues.myshopify.com/71283671326/orders/a4a92fa29b478353c5acf0b9a25e0e21/authenticate?key=ca64e6887c2e70daa7c167fbf33e6797"},{"buttonText":"5243000815902","status":true,"email":"adam.alpha@example.com","firstName":"Adam","lastName":"Alpha","total":"19.78","date":"2023-01-23T12:22:19-05:00","tracking":"https://zoomineer-hues.myshopify.com/71283671326/orders/ab349e4608cbf5d6d75bfa012b722f24/authenticate?key=c4b461e21febd466c4a9ece08826ba31"}]}

Collect Input widget:

Configure the fields as following:

 

 

Script source code

async function main() {
  //var input = var_get()["global_system.Consumer.email"];
  var input = "adam.alpha@example.com";
  log.info(input);
  var baseurl = 'https://zoomineer-hues.myshopify.com/admin/api/2023-01/customers/';
  var url = baseurl + "search.json?query=email:" + input
  var config = {
    url: url,
    headers: { 'X-Shopify-Access-Token': 'shpat_xxx594764b37e3d7e639fedf565e' }
  };
  const resp = await req.get(url, config);
  log.info(JSON.stringify(resp.data.customers[0]))
  const customer = resp.data.customers[0];
  var cust_info = {
    "id": customer.id,
    "first_name": customer.first_name,
    "last_name": customer.last_name,
    "email": customer.email,
    "last_order_id": customer.last_order_id
  }
  const order_id = cust_info.last_order_id;

  log.info(JSON.stringify(cust_info));
  // lookup orders by cust id
  const cust_id = cust_info.id;
  url = baseurl + cust_id + "/orders.json";

  const resp1 = await req.get(url, config);
  const orders = resp1.data.orders;
  const order_ids = orders.map(getOrders);
  function getOrders(order) {
    var order_info = {
      "buttonText": order.id.toString(),
      "status": order.confirmed,
      "email": order.contact_email,
      "firstName": order.customer.first_name,
      "lastName": order.customer.last_name,
      "total": order.current_subtotal_price,
      "date": order.processed_at,
      "tracking": order.order_status_url
    }
    return order_info;
  };

  var rsp = { "data": order_ids }
  
  return rsp;
}

Exit to another Collect Input widget :

After selection, prompt the user with additional details. Here is the order detail for global_custom.Account.orderJS.buttonText

  • Order Date: {global_custom.Account.orderJS.date}
  • Order Total: ${global_custom.Account.orderJS.total}
  • Email: global_custom.Account.orderJS.email
  • Name: {global_custom.Account.orderJS.firstName} {global_custom.Account.orderJS.lastName}
  • Tracking URL: {global_custom.Account.orderJS.tracking}