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 {
background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg); background-size: cover;
background-repeat: no-repeat;
}
.badge-image img { 
display: none;
}

Javascript snippet

HappyFoxChat.addCustomStyles('.badge-image {background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg); background-size: cover; background-repeat: no-repeat;} .badge-image img { 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>