Customizing the Messenger

Once you have installed Intercom on your site, you should see the Messenger in the bottom right of your screen. You may now want to tailor how the Messenger appears on your site.

Messenger alignment

By default the Messenger will appear on the bottom right corner of your site, but you can change its position if you like. To do this, add the extra lines below to your installation script:

window.intercomSettings = {
    app_id: ‘abc123’,
    alignment: 'left',			# Customize left or right position of messenger
    horizontal_padding: 20,		# Customize horizontal padding
    vertical_padding: 20		# Customize vertical padding

Interactive Configuration Example

The above link is to a Codepen where you can test the different configuration options outlined here. Codepen allows you to copy and paste code into an JS (or HTML and CSS) editor where you see the results immediately. You can use your own App ID if you have one or your can user our test example App ID, whatever you find easier.