How do I open Fin with a pre-filled question?

Use Intercom's JavaScript API: Intercom('showNewMessage', 'Your question here'). This opens the Messenger with the question pre-populated, so the user just hits send and gets an instant answer from Fin.

Can I use pre-filled questions with Fin AI on any website?

Yes, as long as you have the Intercom Messenger installed on your site and Fin AI enabled. The JavaScript API works on any page where the Intercom snippet is loaded.

Do pre-filled questions count as Fin resolutions?

Yes. If Fin resolves the pre-filled question without human handoff, it counts as a standard Fin resolution. This makes pre-filled buttons an effective way to boost your resolution rate by guiding users toward questions Fin handles well.

Can I track which pre-filled buttons users click most?

Yes. You can add event tracking to each button using Intercom's custom events or your analytics platform. This data helps you understand which questions are most common and optimise your knowledge base accordingly.

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

Want to make it easier for your visitors to get help? By adding buttons that open Intercom's Fin AI assistant with pre-filled questions, you can guide users to instant answers and reduce support friction.

What You'll Learn

The core JavaScript command to open Fin with a message
Multiple implementation approaches (HTML, JavaScript, React)
Styling and best practices
Troubleshooting common issues

Prerequisites

Before implementing this feature, ensure you have:

An active Intercom account with Fin enabled (need help? Check out our Intercom Implementation services)
The Intercom Messenger installed on your website
Basic knowledge of HTML and JavaScript

The Core Command

The magic happens with a single JavaScript command:

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

This command does two things:

Opens the Intercom Messenger
Pre-fills the message input with your specified text

The user can then simply hit send (or modify the message first) to start a conversation with Fin.

Implementation Methods

Method 1: Simple HTML Button

The quickest way to add this functionality is with an inline onclick handler:

<button onclick="window.Intercom('showNewMessage', 'How do I reset my password?')">
  Get Help with Password Reset
</button>

Method 2: JavaScript Function with Safety Check

For better reliability, create a reusable function that checks if Intercom is loaded:

function askFin(question) {
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  } else {
    console.warn('Intercom is not loaded yet');
    // Fallback: open your contact page or show an alert
    window.location.href = '/contact';
  }
}

Then use it in your HTML:

<button onclick="askFin('How do I upgrade my plan?')">
  Ask About Upgrades
</button>

Method 3: Multiple Quick Question Buttons

Create a helpful FAQ-style section with multiple pre-configured buttons:

<div class="quick-questions">
  <h3>Quick Questions</h3>
  <button onclick="askFin('How do I get started?')">
    🚀 Getting Started
  </button>
  <button onclick="askFin('What are your pricing plans?')">
    💰 Pricing
  </button>
  <button onclick="askFin('How do I contact support?')">
    📞 Contact Support
  </button>
  <button onclick="askFin('Where can I find documentation?')">
    📚 Documentation
  </button>
</div>

Method 4: React Implementation

If you're using React, here's a clean component approach:

import React from 'react';

interface AskFinButtonProps {
  question: string;
  children: React.ReactNode;
  className?: string;
}

const AskFinButton: React.FC<AskFinButtonProps> = ({ 
  question, 
  children, 
  className 
}) => {
  const handleClick = () => {
    if (window.Intercom) {
      window.Intercom('showNewMessage', question);
    } else {
      console.warn('Intercom not loaded');
    }
  };

  return (
    <button onClick={handleClick} className={className}>
      {children}
    </button>
  );
};

// Usage
<AskFinButton question="How do I integrate with Slack?">
  Ask about Slack Integration
</AskFinButton>

💡 TypeScript Tip

Add this type declaration to avoid TypeScript errors:

// In a .d.ts file or at the top of your component
declare global {
  interface Window {
    Intercom: any;
  }
}

Opening Fin Without a Pre-filled Message

If you just want to open the messenger without pre-filling text:

// Open messenger (shows recent conversations)
window.Intercom('show');

// Open messenger with new message composer (empty)
window.Intercom('showNewMessage');

Styling Your Buttons

Here's some CSS to make your buttons look professional:

.ask-fin-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #1f8ded 0%, #1a6fc4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(31, 141, 237, 0.3);
}

.ask-fin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(31, 141, 237, 0.4);
}

.ask-fin-button:active {
  transform: translateY(0);
}

/* Quick questions grid */
.quick-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

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

Adding Analytics Tracking

Track which questions users click to gain insights:

function askFinWithTracking(question, category) {
  // Track the event (example with Google Analytics 4)
  if (window.gtag) {
    gtag('event', 'ask_fin_clicked', {
      question: question,
      category: category,
      page: window.location.pathname
    });
  }
  
  // Open Fin with the question
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  }
}

Popular Use Cases

Pricing Pages — "Which plan is right for my team size?" or "Do you offer enterprise pricing?"
Feature Pages — "How does [feature] work?" or "Can I see a demo of [feature]?"
Documentation — "I need help with [topic]" at the bottom of help articles
Onboarding Flows — "I'm stuck on this step" or "What should I do next?"
Error Pages — "I'm seeing an error and need help" on 404 or error pages

Troubleshooting

⚠️ Common Issues

Button doesn't do anything:

Check if Intercom is loaded: Open browser console and type window.Intercom. If it returns undefined, Intercom isn't loaded.
Ensure your Intercom installation code is on the page
Check for JavaScript errors in the console

Intercom opens but message isn't pre-filled:

Make sure you're using showNewMessage (not just show)
Check that your question string doesn't have syntax errors

Works on desktop but not mobile:

Ensure your button has proper touch event handling
Check if Intercom's mobile messenger is enabled in your settings

Complete Working Example

Here's a complete, copy-paste ready example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .help-section {
      max-width: 600px;
      margin: 40px auto;
      padding: 24px;
      font-family: system-ui, sans-serif;
    }
    .help-section h2 {
      margin-bottom: 16px;
    }
    .quick-questions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .ask-btn {
      padding: 10px 20px;
      background: #1f8ded;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    .ask-btn:hover {
      background: #1a6fc4;
    }
  </style>
</head>
<body>
  <div class="help-section">
    <h2>Need Help?</h2>
    <p>Click a question below to chat with our AI assistant:</p>
    <div class="quick-questions">
      <button class="ask-btn" onclick="askFin('How do I get started?')">
        🚀 Getting Started
      </button>
      <button class="ask-btn" onclick="askFin('What are your pricing options?')">
        💰 Pricing
      </button>
      <button class="ask-btn" onclick="askFin('How do I contact support?')">
        📞 Support
      </button>
    </div>
  </div>

  <!-- Your Intercom installation code goes here -->
  
  <script>
    function askFin(question) {
      if (window.Intercom) {
        window.Intercom('showNewMessage', question);
      } else {
        alert('Chat is loading, please try again in a moment.');
      }
    }
  </script>
</body>
</html>

Next Steps

Now that you know how to add quick question buttons, consider:

Analyzing your support tickets to identify common questions
A/B testing different question phrasings
Adding buttons to high-traffic pages first
Training Fin with custom answers for your most common questions
Implementing proactive support strategies to reach customers before they ask

To learn more about Fin 3's capabilities and how it's transforming customer experience, read our in-depth guide: The Future of Customer Experience: How AI Agents Like Intercom's Fin 3 Will Transform Support.

Need Help Implementing This?

We specialize in Intercom implementations and can help you create a seamless support experience with Fin AI.

Explore our Intercom Implementation Services →