You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Personalization > Customize your chat widget with CSS
Customize your chat widget with CSS
print icon

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>
Feedback
5 out of 7 found this helpful

scroll to top icon