Intercom Fashion
Please note: Intercom does not officially support skinning their messenger.
Demo
Check out our custom skin using Intercom Fashion here (coming soon).
Features
- Embed custom CSS files/text into the messenger & activator button
- Support for loading custom webfonts
- Simple & easy presets like; user chat bubble color, new convo button color, etc...
- Works with the new Intercom messenger (yes, the one using iframes!)
Install
npm i --save intercom-fashion
Usage
import IntercomFashion from 'intercom-fashion';
const IntercomFashion = require('intercom-fashion');
<script src="//unpkg.com/intercom-fashion@1.0/dist/intercom-fashion.js"></script>
then...
IntercomFashion.init();
Loading a custom CSS file
IntercomFashion.load('/path/to/your/custom.css');
Loading custom webfonts (from a CSS file)
The second argument of IntercomFashion.load
changes whether the CSS file should be added to the start/end of the embedded CSS (required for webfonts).
IntercomFashion.load('/path/to/your/webfonts.css', true);
Adding inline CSS
IntercomFashion.style(`
#intercom-container * {
outline: 2px solid rgba(255, 0, 0, .25) !important;
}
`);
Using presets
IntercomFashion.config({
userBubble: {
color: '#455A64',
background: '#ECEFF1',
rounded: true
},
adminBubble: {
color: 'white',
background: '#4CAF50',
rounded: true
},
newConversation: {
color: '#fff',
background: '#F44336'
},
launcherButton: {
icon: 'logo.png',
background: '#F44336'
},
header: {
color: '#fff',
background: '#2196F3'
},
modal: {
background: '#424242'
},
conversation: {
background: '#fff'
},
tooltip: {
color: '#f8f8f8',
background: '#000',
rounded: true
}
});
Screenshot

License
MIT ❤️