Intercom (Live chat)
Intercom (Live chat) is used to allow users to quickly access help or to send targeted messages to users.
Also known as:
IntercomLive chat
Guidelines
Need to know
- It is a fixed element, and it it should appear in the same position across the product.
- It should not block anything on the page behind it.
Visuals
To keep in mind
The Intercom icon can be used in these situations:
- Allowing users to quickly access help (e.g. through contacting the support team or accessing the academy)
- Sending targeted messages to users (e.g. to start conversations with users or to provide product updates)
Position
- The Intercom icon should appear in the same position across the product (at the bottom right corner of the screen).
- As it is a fixed element, it should not block anything on the page behind it.
Styling
- The styling of the Intercom icon is done in the Intercom product
- Recommendations on how to style a custom Intercom icon:
- Your icon must be smaller than 50 kB.
- The optimum image size is 72px x 72px.
- A PNG or GIF with a transparent background works best, if using an image with a colored background, set the “Action color” in your Messenger settings to match.
When to use and when not to use
If in doubt, have a conversation with the Design Systems advocates or the design practice. If you feel strongly, talk about that.
When to use
- Use the Intercom icon when it clearly provides value to the user (e.g. allowing users to quickly access help or sending targeted messages to users).
When not to use
- Avoid using the Intercom icon when it will block content on the page. Consider providing a link to contact support.
External links
Here are some examples of how it can be used within the product: