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
- Follow the instructions that Intercom provides, they are relatively simple
- 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
- Modify the #Intercom CSS entry to have the following (i.e. replace what Intercom gave you with the following):
-
position: fixed;
-
bottom: 0;
-
right: 20px;
-
z-index: 2147483647;
-
background: transparent url(https://dmhx3adjqsy1o.cloudfront.net/assets/default-widget-with-label-bf0f1680634c9b71c6442fd11ec5aba2.png) no-repeat 0 0;
-
color: white;
-
cursor: pointer;
-
height: 20px;
-
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-
font-weight: bold;
-
font-size: 14px;
-
line-height: 20px;
-
padding: 10px 19px 11px 46px;
-
border: 1px solid black;
-
border-bottom: 0;
-
-webkit-border-radius: 6px 6px 0 0;
-
-moz-border-radius: 6px 6px 0 0;
-
border-radius: 6px 6px 0 0;
-
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.
