Customizing the Intercom Launcher for WordPress

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

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…

  1. have already set up your Intercom account,
  2. are customizing Intercom for a WordPress site, and have installed and configured the Intercom WordPress plugin,
  3. may have already customized other aspects of the “standard launcher” via Intercom “App Settings” or specifically “Messenger Settings,” and
  4. 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:

Intercom Standard Launcher

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:

TrekFed Custom Intercom Launcher

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:

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

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:

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).


WordPresser
Home Page  Public Email  Twitter  Facebook  YouTube  Github   

Writing since ancient times, blogging, e-commercing, and site installing-designing-maintaining since 2001; WordPress theme and plugin configuring and developing since 2004 or so; a lifelong freelancer, not associated nor to be associated with any company, publication, party, university, church, or other institution. 

Commenter Ignore Button by CK's Plug-Ins

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Extraordinary Comments

CK's WP Plugins

Categories

Related