Home / Tutorials / Zendesk chat bubble styling

Zendesk chat bubble styling

Atanas Antonov

In many cases you want to style or customize the chat bubble or chat widget embedded in your site. There are several ways to do that.

First option is to use the settings in your Zendesk account. Here is a help article how to do that.

Another option is to use the Web Widget (Classic) API. This way you have even more control of the widget appearance. Like colors and offset.

window.zESettings = {
        webWidget: {
            offset: {
                horizontal: '10px',
                vertical: '40px'
            }
        }
    };

But there are still limitations like transparent background or custom font family.

The most advanced way for customization is to inject custom CSS in the iframe after the widget is loaded. This way you have separate stylesheet witch contains all the rules you want to be applied. Here is an example:

zE( 'webWidget:on', 'chat:connected', function() {
    var iframe = document.getElementById('launcher');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

    var tag  = document.createElement("link");
    tag.href = your_handle.stylesheet_directory_uri +  '/path/to/zendesk-style.css';
    tag.rel  = 'stylesheet';
    tag.type = 'text/css';

    innerDoc.head.appendChild( tag );
} );

The complete example for WordPress will be:

functions.php

/**
 * Enqueue scripts
 */
function your_theme_styles() {

        ...
	wp_enqueue_script( 'your-handle', get_stylesheet_directory_uri() . '/path/to/scripts.js', null, null, true );
	wp_localize_script( 'your-handle', 'your_handle', array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() ) );
}
add_action( 'wp_enqueue_scripts', 'your_theme_styles', 15 );

/* Zendesk widget */
add_action( 'wp_footer', function(){
    ?>
	<!-- Start of Zendesk Widget script -->
	<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR-KEY"> </script>
	<!-- End of Zendesk Widget script -->
    <?php
} );

It is not necessary to use wp_footer hook. I’ve made it so, but you can include the widget script however you want.

scripts.js

/* Zendesk widget */
window.zESettings = {
    webWidget: {
        offset: {
            horizontal: '-20px',
            vertical: '40px'
        }
    }
};

zE( 'webWidget:on', 'chat:connected', function() {
    var iframe = document.getElementById('launcher');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

    var tag  = document.createElement("link");
    tag.href = astra_child.stylesheet_directory_uri +  '/path/to/zendesk-chat.css';
    tag.rel  = 'stylesheet';
    tag.type = 'text/css';

    innerDoc.head.appendChild( tag );
} );

Here are combined widget API settings with the callback after the widget is loaded.

zendesk-chat.css

/**
Zendesk chat styling
*/

/* Chat bubble */
span.Icon {
    padding-right: 0;
}

span.Icon svg {
    display: none;
}

In the stylesheet you can add as many rules as you want but keep in mind that all are from iframe’s POV.

Special credits to: