Intercom is a relatively recently created cross-platform messaging tool, in use at around 25,000 sites, whose “Inbox” app or sub-app can work as a slick customer support/interaction alternative to older systems like ZenDesk. It will work out of the virtual box in WordPress, and some aspects of its appearance and other features can be managed via the Intercom control panel. Substantially modifying the initial look of the Intercom “launcher,” however – for instance, to replace Intercom’s icon with one of your own – requires a bit of custom coding.
Intercom launcher at Pippa
You can see the Intercom launcher in use at WordPress-based sites like Tradeshift.com and Pippa.io, where it has been modified in color. Because the launcher operates via iframe, its other visible characteristics will not be accessible to regular site-level CSS. To reach further into it, you will have to create a “custom launcher,” requiring a process or series of steps whose requirements may not be initially clear from a perusal of Intercom’s help pages, which do not happen as of this writing to include any WordPress-specific implementation examples.
The techniques in this simple explainer/tutorial may also be helpful if you’re working on, say, a Stripe payment widget or a Vimeo player or other javascript-enabled, iframe-dependent add-on with an accessible API.
Customizing the Intercom Launcher
I’m going to look only at creating a custom launcher. I’ll assume that you…
- have already set up your Intercom account,
- are customizing Intercom for a WordPress site, and have installed and configured the Intercom WordPress plugin,
- may have already customized other aspects of the “standard launcher” via Intercom “App Settings” or specifically “Messenger Settings,” and
- already know about WordPress basics like child themes and using the Customizer, site management basics like FTP, and development basics like looking at a web page’s source code.
If all has gone well, and your WP Plugin is properly set up and authenticated (just follow the instructions and click the appropriate buttons), you have the standard launcher probably appearing in its default position, possibly on selected pages only. The plugin settings page will show you the App ID that you’ll be needing later right there front and center in gray inalterable letters.
The Default Launcher itself should look something like this, maybe at the default location down in the lower right corner of you screen:
Standard Launcher
Click on it to open the chat form whose characteristics – color scheme, avatar, language – you may have customized at the Intercom dashboard. We’re not concerned with them, however. We’re concerned with the initial appearance, before the launcher is opened: Its most obvious characteristics – the icon image formatting, as above – are buried in iframes, and not accessible via Messenger Settings or CSS.
Our goal will be a custom launcher built for TrekFederation, a Star Trek-themed site – and, when we’re done, it will look like this:
Custom Launcher
Installing a Custom Launcher
Making our Intercom Communicator is going to be simple, and, as for the stuff you might worry about – like whether you need to include or incorporate multiple variables and whether it really will work automatically to open the chat form – don’t.
You can take these steps in any order.
Disable the Standard Launcher: One last thing back at the Intercom App Settings: Since we’re going to be replacing the custom launcher, go to your Intercom “Messenger settings” page, and uncheck the show on the web checkboxes – so it will look like this:
Intercom Dashboard – Messenger Settings
Create and Upload a JS File: Back at your own site, doing things “the WordPress way,” you’ll need to enqueue the javascript provided by Intercom, and, if you’re happy with the other launcher defaults, you need only a couple of lines:
//replace [your app id] (removing the brackets, too) with...
//...your Intercome App ID
window.intercomSettings = {
app_id: "[your app id]",
custom_launcher_selector: "#intercom"
};
As mentioned above, the app_id will be visible on the settings page of your WordPress plugin and in a few places in your Intercom dashboard. The custom_launcher_selector will be the HTML/CSS id of your custom launcher’s container. If you want to bypass your App Settings, or have never customized them, you can add additional variables to the above. (There are a handful available, as detailed in the Intercom help pages.)
Using a code editor like Notepad++ or even a regular text editor, you can save those four lines as a javascript (.js extension) file. I called mine intercom_launch.js, and I saved it (FTP’d it into) a child theme subfolder for javascript files named js.
Enqueue the JS File via a Function set: Open up your (child) theme’s functions.php file and – typing carefully – either enqueue the script separately or add it to another enqueue function. In this example, I’m going to use the long form enqueue statement – with separate “register” and “enqueue” functions – because I frequently find later on that having them separate will be convenient (for instance, when enqueuing the script only on certain pages):
/**
* ENQUEUE INTERCOM JAVASCRIPT
*/
function add_intercom_js() {
wp_register_script( 'launch_intercom', get_stylesheet_directory_uri() . '/js/intercom_launch.js', array(), '1.0', true );
wp_enqueue_script( 'launch_intercom' );
}
add_action( 'wp_enqueue_scripts', 'add_intercom_js' );
Save your functions.php file, and, if you want to be sure that the script has been loaded, check your page source code and search for “intercom.”
Add HTML for the Custom Launcher: The third key element will be adding the launcher HTML in an appropriate place in your theme. You could do this in any number of different ways, but the most direct way to ensure that the HTML is available on every page in a typical WordPress installation will be to add the code directly to your site footer via functions.php in your child theme, like so:
/* ADD HTML FOR LAUNCHER TO SITE FOOTER
* Replace "[your app id]" with the code
* from Intercom dashboard or WordPress Plugin
*/
add_action( 'wp_footer', 'intercom_html') ;
function intercom_html() {
echo '
<!-- ADD INTERCOM LAUNCHER -->
<a id="intercom" href="mailto:[your app id]@intercom-mail.com">Support</a>
<!-- END INTERCOM LAUNCHER -->
';
}
As you can see, the mailto link must match the App ID. Note also that you could perhaps as easily attach the launcher to any HTML element with the designated selector (CSS Class instead of ID will also work).
Add CSS to style up the thing: Though TrekFed may soon develop their own nifty (prettier and lighter weight) icon, for now I’m satisfied with loading an available Star Trek TOS communicator image. I’ve added one to a child theme “images” subfolder, and we’re linking directly to it with a relative path (to the wp-content folder, which works for background images in the WordPress Customizer’s Additional CSS panel).
/*INTERCOM COMMUNICATOR*/
#intercom {
position: fixed;
bottom: 40px;
right: 40px;
width: 90px;
height: 115px;
text-align: center;
color: #0297ED;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px 1px #0297ED;
background-image: url(/wp-content/themes/Divi-child/images/tos_comm_300x525.png);
background-size: 60px, 105px;
background-color: #eff2f4;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #3a3a3a;
border-radius: 5px;
box-shadow: 1px 1px 1px 1px #3a3a3a;
opacity: .85;
z-index: 10; /*make sure it overlies certain z-indexed layers*/
transition: 1s all ease;
}
/* ENLARGES AND BRIGHTENS WHEN YOU HOVER OVER IT */
#intercom:hover {
transform: scale(1.1);
opacity: 1;
transition: 1s all ease;
}
/* MOVE IT ALL THE WAY TO EXTREME BOTTOM RIGHT
ON SMALL SCREENS */
@media (max-width: 768px) {
#intercom {
bottom: 0;
right: 0;
}
}
