Zoom Phone Smart Embed App Widget Collapse

Phone
1

Dear Zoom Support Team,

I am writing to seek assistance regarding the implementation of the Zoom Phone Smart Embed app from the marketplace. Our company is in the process of integrating this app to enable autodialing and retrieve the call ID once the operator dials a number. While we have made progress in this integration, we have encountered an issue related to the initial state of the widget.

Currently, when we implement the code, the widget starts maximized, occupying a significant amount of space on the page. However, we would like to explore the possibility of having the widget start in a collapsed state when users land on the page. This would greatly optimize the page layout and provide a more seamless user experience.

Below is our current implementation:

<script type="text/javascript">
    document.querySelector('iframe#zoom-embeddable-phone-iframe').contentWindow.postMessage({
        type: 'zp-init-config',
        data: {
            enableSavingLog: false,
            enableAutoLog: false,
            enableContactSearching: false,
            enableContactMatching: false,
            //notePageConfiguration: <configurationJSON>
            // Optional. Build your note page with the fields listed in "Add notes" section
        }
    }, 'https://applications.zoom.us');
    window.addEventListener('message', (e) => {
        const data = e.data;
        if (data) {
            switch (data.type) {
                case 'zp-call-ringing-event': // listen to all the event types that you need
                    console.log(data.data);
                    break;
                case 'zp-call-ended-event': // listen to all the event types that you need
                    console.log(data.data);
                    break;
            }
        }
    });
</script>

As a temporary workaround, I have implemented the following solution:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var divToShow = document.querySelector('div#zoom-embeddable-phone-root > div:nth-child(1) > div > header > div.jss9 > span > svg');
        var divColapsed = document.querySelector('div#zoom-embeddable-phone-root > div:nth-child(2) > div > header > div.jss9 > span > svg');

        divToShow.addEventListener('click', function (event) {
            toggleDivDisplay();
        });
        divColapsed.addEventListener('click', function (event) {
            toggleDivDisplay();
        });
        toggleDivDisplay();
    });

    function toggleDivDisplay() {
        var div1 = document.querySelector('div#zoom-embeddable-phone-root > div:nth-child(1)');
        var div2 = document.querySelector('div#zoom-embeddable-phone-root > div:nth-child(2)');

        if (div1.style.display === 'none') {
            div1.style.display = 'block';
            div2.style.display = 'none';
        } else {
            div1.style.display = 'none';
            div2.style.display = 'block';
        }
    }
</script>

We would greatly appreciate your support in finding a more optimal and permanent solution to have the Zoom Phone Smart Embed app widget start collapsed upon page load. Any guidance, instructions, or code modifications you can provide would be highly valuable.

Thank you for your attention to this matter. We look forward to your prompt response and assistance.

Best regards,

1 Like