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

AnchorNeed 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: