buttonjquery-selectorschatshadow-dom3cx

3cx change bubble button style in Wordpress functions.php - move up an async button and styling it after waiting fetch for async dom created


I have been struggling with the moving up of the chat bubble overriding my theme bottom login/out web app bar for 2 days:

Tryed to:

  1. modify in Wordpress the child style.css and the functions.php

The style of the theme was not applying in style.css modified the <button id="wplc-chat-button"

`/* 
 Theme Name:   Alukas child
 Theme URI:    
 Description:  Tema child di Alukas
 Author:       admin
 Author URI:   https://monbi.it
 Template:     alukas
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/
#wplc-chat-button {bottom: 100px!important}
`
  1. using jquery to add css to the chat bubble after manually applying the bottom:70px!important to Chrome

  2. using jquery to add css to the chat bubble parent div

  3. using jquery to add css to the chat bubble grandparent div


Solution

  • 
        function add_custom_js() {
        ?>
        <script type="text/javascript">
    
            function querySelectorAllShadows(selector, el = document.body) {
              // recurse on childShadows
              
                 /**
                 * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots.
                 * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements.
                 * @see https://stackoverflow.com/a/71692555/2228771
                 */
              const childShadows = Array.from(el.querySelectorAll('*')).
                map(el => el.shadowRoot).filter(Boolean);
    
              // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);
    
              const childResults = childShadows.map(child => querySelectorAllShadows(selector, child));
              
              // fuse all results into singular, flat array
              const result = Array.from(el.querySelectorAll(selector));
              return result.concat(childResults).flat();
            }
    
            jQuery(document).ready(function(){
                setTimeout(function() {
                // sposta la bubble chat
                    
                // Sposta il div #callus-container
                    var allMatches = querySelectorAllShadows('#wp-live-chat-by-3CX');
                    if(allMatches && allMatches.length > 0){
                        var callusContainer = jQuery(allMatches[0]); // Prendi il primo match
                        if(window.innerWidth <= 430) {
                            callusContainer.css({'position':'fixed','bottom':'105px','right':'5px'});
                        }
                    }
                    
                }, 3000);  // 3 secondi di ritardo
            });
        </script>
        <?php
    }
        add_action('wp_head', 'add_custom_js', 100);