Customize your chat widget with CSS

You can customize your HappyFox Chat widget with the below CSS codes.

Changing Font Family

CSS Snippet 

body{
font-family: arial;}

Javascript snippet 

HappyFoxChat.addCustomStyles('body {font-family: arial;}', function(err) {
 if (err) {
 console.error('Failed to add custom styles. Error:', err);
 } else {
 console.log('Added custom styles');
 }
 });
 };

Changing font size

CSS Snippet 

html {
 font-size: 16px;
} 

Javascript Snippet 

HappyFoxChat.addCustomStyles('html {font-size: 16px;}', function(err) {
 if (err) {
 console.error('Failed to add custom styles. Error:', err);
 } else {
 console.log('Added custom styles');
 }
 });
 };

Changing badge image

CSS Snippet 

.badge-image-container {
 background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg); background-size: cover;
 background-repeat: no-repeat;
}
.badge-image {
 display: none;
}

Javascript snippet

HappyFoxChat.addCustomStyles('.badge-image-container {background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg); background-size: cover; background-repeat: no-repeat;} .badge-image { display: none;}', function(err) {
 if (err) {
 console.error('Failed to add custom styles. Error:', err);
 } else {
 console.log('Added custom styles');
 }
 });
 };

Not showing agent name

CSS Snippet

.titlebar-content.in-conversation::before {
 content: "24X7 Support"; 
 margin: 0 auto; 
 margin-bottom: 0px;
 display: block;
 text-align: center;
 margin-bottom: 5px;
}

.titlebar-content.in-conversation .titlebar-text {
 display: none;
}

Javascript Snippet

HappyFoxChat.addCustomStyles('.titlebar-content.in-conversation::before{content: "24X7 Support"; margin: 0 auto; margin-bottom: 0px;display: block;text-align: center;margin-bottom: 5px;} .titlebar-content.in-conversation .titlebar-text {display: none;}', function(err) {
 if (err) {
 console.error('Failed to add custom styles. Error:', err);
 } else {
 console.log('Added custom styles');
 }
 });
 };

Hiding the background pattern in the titlebar

CSS Snippet

.titlebar {
 background-image: none;
}

Javascript Snippet

HappyFoxChat.addCustomStyles('.titlebar {background-image: none;}', function(err) {
 if (err) {
 console.error('Failed to add custom styles. Error:', err);
 } else {
 console.log('Added custom styles');
 }
 });
};

Changing badge to look like the previous version of HappyFox Chat Widget

CSS Snippet

.badge-image {
 background-image: url(https://d1l7z5ofrj6ab8.cloudfront.net/visitor/6-6-2018-6-51-6/images/widget/default-bubble.svg);
 background-size: cover;
 background-repeat: no-repeat;
 border: none;
 background-color: transparent !important;
 box-shadow: 0 1px 3px 0 rgba(0,0,0,.5);
}

.badge-content {
 background-color: #4A4A4A;
 color: #FFF;
}

Javascript Snippet

HappyFoxChat.addCustomStyles('.badge-image { background-image: url(https://d1l7z5ofrj6ab8.cloudfront.net/visitor/6-6-2018-6-51-6/images/widget/default-bubble.svg);background-size: cover; background-repeat: no-repeat; border: none; background-color: transparent !important; box-shadow: 0 1px 3px 0 rgba(0,0,0,.5);} .badge-content { background-color: #4A4A4A; color: #FFF;}', function(err) {
 if (err) {
 console.error('Failed to add custom styles. Error:', err);
 } else {
 console.log('Added custom styles');
 }
 });
};

Hiding the chat widget on mobile devices

CSS Snippet

<style>
 #hfc-frame.hfc-mobile_badge {
 display: none;
 }
</style>