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:
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}
`
using jquery to add css to the chat bubble after manually applying the bottom:70px!important to Chrome
using jquery to add css to the chat bubble parent div
using jquery to add css to the chat bubble grandparent div
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);