I have integrated google's dialogflow in my store. Dialogflow provides iframe. I created a dropdowndialog magento ui widget. My footer phtml contains the following code. Now the issue is with the position of the dialog which open at the center. I would like to position it in the right bottom corner where my chat with us button is present. Options like draggable, resizable is also not working. Please suggest what I should do to overcome the issue
<button id="myBtn" title="Chat">Chat with us</button> <div id="dialog" style="display:none;"> <iframe allow="microphone;" width="350" height="430" src="https://console.dialogflow.com/api-client/demo/embedded/13234e50-f3b0-497c-9887-d406d652a754"> </iframe> </div> <script> require( [ 'jquery', 'dropdownDialog' ], function( $, dropdownDialog ) { var options = { triggerEvent : "click", defaultDialogClass:"chatdialog", triggerClass: null, parentClass: "chatwindow", triggerTarget: null, dialogContentClass: null, shadowHinter: null, closeOnMouseLeave: true, closeOnClickOutside: true, minHeight: null, minWidth: null, width: null, modal: false, timeout: null, autoOpen: false, createTitleBar: false, autoPosition: true, autoSize: false, draggable: true, resizable: true, position: { my: "bottom right", at: "right", of: "#dialog" }, bodyClass: '', }; $("#myBtn").on('click',function(){ $( "#dialog" ).dialog(); }); } ); </script> 