How to Add Buttons That Open Fin with Pre-filled Questions?

Prerequisites

Before implementing this feature, ensure you have:

✅ Intercom installed on your website
✅ Fin AI agent enabled in your Intercom workspace
✅ Basic knowledge of HTML/JavaScript (or access to someone who does)

The Magic Line of Code

The entire functionality relies on one simple JavaScript command:

window.Intercom('showNewMessage', 'Your question here');

This command:

Opens the Intercom Messenger
Pre-fills the message input with your specified text
Lets the user send it with one click (or edit if needed)

Implementation Options

Option 1: Simple HTML Button (No Framework)

Add this anywhere in your HTML:

<button onclick="window.Intercom('showNewMessage', 'Tell me about your pricing')">   Ask about pricing </button>

Option 2: Multiple Quick Question Buttons

<div class="quick-questions">   <button onclick="window.Intercom('showNewMessage', 'What services do you offer?')">     Our Services   </button>   <button onclick="window.Intercom('showNewMessage', 'How long does setup take?')">     Setup Timeline   </button>   <button onclick="window.Intercom('showNewMessage', 'Do you offer ongoing support?')">     Support Options   </button> </div>

Option 3: JavaScript Function (Recommended)

For cleaner code and better maintainability:

<script> function askFin(question) {   if (window.Intercom) {     window.Intercom('showNewMessage', question);   } else {     console.warn('Intercom is not loaded yet');   } } </script>  <button onclick="askFin('Tell me about your pricing')">   💬 Ask about pricing </button>

Option 4: Open Messenger Without Pre-filled Text

To simply open the messenger (let users type their own question):

window.Intercom('showNewMessage'); // or window.Intercom('showNewMessage', '');

Styling Your Buttons (Optional CSS)

Make your quick question buttons look professional:

.fin-question-btn {   padding: 12px 24px;   border-radius: 50px;   border: 1px solid #e5e5e5;   background: white;   font-size: 14px;   font-weight: 500;   cursor: pointer;   transition: all 0.3s ease; }  .fin-question-btn:hover {   border-color: #6366f1;   background: #f5f3ff;   color: #6366f1; }

Best Practices

Do ✅	Don't ❌
Keep questions concise and clear	Use overly long or complex questions
Match questions to your FAQ topics	Pre-fill with irrelevant questions
Place buttons where users naturally have questions	Hide buttons in hard-to-find locations
Test that Fin can answer the pre-filled questions	Assume all questions will work well
Add a safety check for window.Intercom	Call directly without checking if loaded

Popular Use Cases

Pricing Pages - "What's included in the Pro plan?"
Feature Pages - "How does [Feature X] work?"
Documentation - "I need help with [Topic]"
Contact Pages - "I'd like to speak to sales"
Error Pages - "I'm having trouble with..."

Troubleshooting

Button doesn't work?

Check Intercom is loaded: Open browser console and type window.Intercom - if it returns undefined, Intercom isn't loaded
Wait for page load: Intercom may not be ready immediately. Wrap in a check:
```
if (window.Intercom) {   window.Intercom('showNewMessage', 'Question'); }
```
Check for conflicts: Other scripts might interfere with Intercom

Messenger opens but question isn't pre-filled?

Ensure you're passing a string as the second parameter
Check for typos in 'showNewMessage'

Advanced: Track Button Clicks

Send an event to Intercom when a quick question is clicked:

function askFinWithTracking(question, buttonLabel) {   if (window.Intercom) {     // Track the click     window.Intercom('trackEvent', 'quick-question-clicked', {       question: question,       button_label: buttonLabel     });     // Open with pre-filled message     window.Intercom('showNewMessage', question);   } }

Need Help?

If you'd like us to implement this for you as part of your Intercom setup, book a consultation or contact us.