Tidio Chat on Mobile WooCommerce Theme

I recently installed Tidio chat on a WordPress/WooCommerce site, but the built-in controls do not allow you to modify the css or the way it appears. This means on many themes it may cover important links or items. Specifically, on the Storefront theme, the chat box covers the menu bar at the bottom (with the My Account, Cart, and Search Links). The css that is provided by Tidio does not work if put in the style.css of your child theme, because of the way it is loaded. You need to create a css file that is loaded with the footer.

1. create a footer.css file and put it in your assets/css/footer.css file.

#tidio-chat iframe { bottom: 0em !important; }
@media only screen and (max-width: 980px) {
	#tidio-chat iframe { bottom: -1em !important;
}}

2. In your child theme’s function.php add the following lines.

function childtheme_add_footer_styles() {
	wp_enqueue_style( 'your-style-id', get_stylesheet_directory_uri() . '/assets/css/footer.css' );
};
add_action( 'get_footer', 'childtheme_add_footer_styles' );

This will add the css to the footer, allowing it to apply to the iframe.