Step 12: Populate fields with the delivery details

Let’s display the captured address on the web page when the user provides the delivery details.

1. Update the voice command for capturing the address: send commands with the captured value to the app:

   Dialog script

   intent(`That's (all|it)`, '(Ready to)- checkout', p => {
       p.play('What is the delivery address?');
       // Activating the checkout context
       p.then(checkout);
   });
   
   let checkout = context(() => {
       intent('(My address is|It is)- $(ADDRESS: 456 Maple Avenue, 123 Oak Street, 789 Pine Road...)', p => {
           p.play(`Your order will be delivered to ${p.ADDRESS.value}`);
           p.play({command: 'setAddress', address: p.ADDRESS.value});
       });
   });
   

2. In the app, update the onCommand handler to display the received value in the corresponding field in the app:

   HTML file

   <script>
       var alanBtnInstance = alanBtn({
           key: "e2fecaef4cb07cbe7d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
           onCommand: function(commandData) {
               if (commandData.command == "updateOrder") {
                   changeOrder(commandData.item, commandData.quantity);
               } else if (commandData.command == "highlightItem") {
                   highlight(commandData.item);
               } else if (commandData.command == "setAddress") {
                   document.getElementById("address").innerHTML = "Address: " + commandData.address;
               }
           },
           rootEl: document.getElementById("alan-btn"),
       });
   </script>
   

Try the dialog in the app and make sure the delivery details are displayed on the page.