Beginner
How to install Intercom messenger on your website
Quick Answer
Installing Intercom's messenger on your website requires copying the installation code from your Intercom dashboard and pasting it into your website's HTML before the closing body tag. The messenger will appear automatically once the code is properly installed and verified.
Prerequisites
- Active Intercom account
- Website admin access
- Basic HTML knowledge
- Ability to edit website code
1
Access your Intercom workspace
Log into your Intercom account and navigate to your workspace. Click on Settings in the left sidebar, then select Installation from the menu options.
Tip
Make sure you're logged into the correct workspace if you manage multiple Intercom accounts.
2
Generate installation code
In the Installation section, you'll see your unique installation code. Click Copy code to copy the JavaScript snippet. The code will look like:
<script>
window.intercomSettings = {
api_base: "https://widget.intercom.io",
app_id: "your_app_id"
};
</script>Tip
Your app_id is unique to your workspace and cannot be changed, so keep it secure.
3
Access your website's HTML
Open your website's HTML editor, content management system, or development environment. You'll need to edit the main template or layout file that appears on all pages where you want the messenger to show.
Tip
For WordPress sites, this is typically in the theme's footer.php file or through a plugin.
4
Paste the installation code
Locate the closing
</body> tag in your HTML and paste the Intercom installation code just before it. The placement should look like:<script>
window.intercomSettings = {
api_base: "https://widget.intercom.io",
app_id: "your_app_id"
};
</script>
</body>Tip
Placing the code before the closing body tag ensures optimal loading performance.
5
Save and publish changes
Save your HTML changes and publish or deploy your website. Clear your browser cache and refresh your website to see the changes take effect.
Tip
Use an incognito/private browsing window to test the installation without cached content interfering.
6
Verify installation
Return to your Intercom dashboard and go to Settings > Installation. Click Verify installation and enter your website URL. Intercom will check if the code is properly installed.
Tip
The verification process may take a few minutes to detect the newly installed code.
7
Test the messenger
Visit your website and look for the Intercom messenger widget, typically appearing as a chat bubble in the bottom-right corner. Click on it to test functionality and ensure it's working properly.
Tip
You can customize the messenger's appearance and behavior in the Messenger settings section of your Intercom dashboard.
8
Configure messenger settings
Go to Settings > Messenger in your Intercom dashboard to customize colors, position, greeting messages, and other display options. Click Save after making any changes.
Tip
Test different greeting messages to see what works best for engaging your website visitors.
Troubleshooting
Messenger not appearing on website
Check that the installation code is placed correctly before the
</body> tag and that there are no JavaScript errors in the browser console. Clear your cache and try again.Installation verification fails
Ensure your website is publicly accessible and not password-protected. The verification tool needs to access your site to detect the Intercom code. Wait a few minutes and try verification again.
Messenger appears but doesn't function
Check for JavaScript conflicts with other scripts on your website. Ensure your app_id in the installation code matches exactly with the one shown in your Intercom dashboard.
Multiple messenger widgets appearing
Remove any duplicate installation codes from your website. Search your HTML for multiple instances of 'intercom' and ensure the code only appears once before the closing
</body> tag.Ready to get started with Intercom?
Put this tutorial into practice. Visit Intercom and follow the steps above.
Visit Intercom →