1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.