Make your “advanced” contact tab just like the simple one on Intercom

Intercom has some cool features and helps you track your users, as well as letting them hit you up through your site.  I really liked their “simple” button style, but when I added the “advanced” button I just had an inline link. I wanted coolness, so I figured it out. Here’s what I did

  1. Follow the instructions that Intercom provides, they are relatively simple
  2. If you’re throwing JS errors, make sure you put a comma after your time stamp – I didn’t have one when I added the extra code to the site
  3. Modify the #Intercom  CSS entry to have the following (i.e. replace what Intercom gave you with the following):
visibility: hidden;
  1. position: fixed;
  2. bottom: 0;
  3. right: 20px;
  4. z-index: 2147483647;
  5. background: transparent url(https://dmhx3adjqsy1o.cloudfront.net/assets/default-widget-with-label-bf0f1680634c9b71c6442fd11ec5aba2.png) no-repeat 0 0;
  6. color: white;
  7. cursor: pointer;
  8. height: 20px;
  9. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  10. font-weight: bold;
  11. font-size: 14px;
  12. line-height: 20px;
  13. padding: 10px 19px 11px 46px;
  14. border: 1px solid black;
  15. border-bottom: 0;
  16. -webkit-border-radius: 6px 6px 0 0;
  17. -moz-border-radius: 6px 6px 0 0;
  18. border-radius: 6px 6px 0 0;
  19. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

Now, you should of course save and upload your CSS file.

The last thing you can do is modify the text in your HTML element to say what you want. For example, on the site I was working on, I changed it to “Got Questions?”.

Note from Intercom: (from comments below)

You should probably host the image yourself just in case. That way, if Intercom changes the file path or the file itself, you don’t have to scramble and fix anything!

You can get the file here (hosted by me) Just right click the link and save file as. You should probably also change the path in the CSS provided above.

 




Please consider donating Dogecoin if you like my content.

D5igT1DmhYGVMLcXhzkNdf64uEuWWhHTb3



Related Posts Plugin for WordPress, Blogger...

This entry was posted in Coding. Bookmark the permalink.
  • http://twitter.com/davebarrett David Barrett

    Thanks for the write-up, Matt!

    I do suggest that you host the image yourself though. We don’t mind it being used by customers, but it might get replaced or removed in a later release and then the link might break.

    • http://mkbernier.com Matt Bernier

      Great suggestion! I will make a comment in the post about this!