How to Add Buttons in Dialogflow

Your chatbot is live. Users are typing — but they’re typing the wrong things. Spelling mistakes. Out-of-scope queries. Long, rambling sentences your NLP model just cannot parse. The result? A broken conversation, a frustrated user, and a missed opportunity.

Buttons fix this.

When you add interactive buttons to Dialogflow — whether as suggestion chips, quick replies, or custom payloads — you give users a structured, frictionless way to respond. The bot stays in control. The conversation flows. And the user gets where they need to go, fast.

The global chatbot market was valued at $7.76 billion in 2024 and is projected to reach $27.29 billion by 2030 at a 23.3% CAGR (Grand View Research). Businesses that build tighter, more guided conversational flows are the ones that win as that market grows.

This guide covers everything you need to know about adding buttons in Dialogflow — from the console UI to fulfillment code to custom payloads across platforms.

What Are Buttons in Dialogflow?

Buttons in Dialogflow are interactive elements displayed to the user during a conversation. Instead of free-text input, users tap or click a pre-defined option. That option either sends a preconfigured message back to the agent or redirects the user to a URL.

Different platforms call them different things:

• Google Assistant calls them Suggestion Chips
• Facebook Messenger calls them Quick Replies
• Dialogflow Messenger (web widget) supports both suggestion chips and button response types

Regardless of the label, the function is the same: guide the user, reduce ambiguity, and improve intent matching.

Here is why this matters at scale. 77% of bot users successfully resolve issues without human intervention at least sometimes (Zoom + Morning Consult). Structured navigation — buttons included — is a major driver of that resolution rate. When users can click rather than type, the bot understands them. When the bot understands them, they get help. It really is that direct.

Dialogflow supports buttons across both its versions:

• Dialogflow ES (Essentials) — the classic version, still widely used
• Dialogflow CX (Customer Experience) — the advanced, flow-based version for complex agents

Both are covered below.

Types of Button Responses in Dialogflow

Before diving into setup, understand the three main ways buttons are delivered in Dialogflow.

Suggestion Chips (Quick Replies) are the most common. They appear as tappable options below a bot message. When a user taps one, the chip text is sent back to Dialogflow as a user utterance — triggering a matching intent. These are ideal for simple branching: “Yes / No”, “Learn More / Skip”, “Billing / Support / Other.”

Card Buttons appear inside a rich card (with a title, image, and description). They typically link to a URL or trigger an intent. Cards are useful when you want to present information alongside an action — a product, an article, a service.

Custom Payload Buttons are fully flexible. You define the JSON structure, parse it in your frontend or integration layer, and render whatever interactive element you want. This approach works for any platform or custom deployment where the built-in rich message types do not quite fit.

60% of consumers engage with support chatbots when prompted (Tidio). Buttons are one of the most effective prompts you can give — they reduce typing friction and make the next step obvious.

How to Add Buttons in Dialogflow ES (Using the Console)

This is the fastest path. No code required. Here is the step-by-step process.

Step 1: Open Your Agent

Log in to the Dialogflow ES Console. Select the agent you want to work with from the dropdown at the top of the left sidebar.

Step 2: Navigate to the Right Intent

Click Intents in the left sidebar. Select the intent where you want the button response to appear — this is typically an intent that asks a question or presents options to the user.

Step 3: Scroll to the Responses Section

Inside the intent, scroll down to the Responses section. By default, you will see a Default tab for text responses.

Step 4: Add the Google Assistant Platform

To use Suggestion Chips (the most common button type), click the + button to add a new platform tab. Select Google Assistant. A new Google Assistant tab appears.

Step 5: Add a Suggestion Chip Response

Click Add Responses inside the Google Assistant tab. From the dropdown, select Suggestion Chips. Click Add Item for each button option you want to display. Enter the text for each chip — keep it under 20 characters for best display results. You can add up to 10 items per quick reply response.

Step 6: Save the Intent

Click Save at the top right. Test in the built-in simulator by typing a phrase that triggers the intent. You should see the suggestion chips rendered below the bot’s text response.

Important constraint to know: Dialogflow ES limits you to one quick reply response per platform, per language, per intent. Plan your button options accordingly.

How to Add Buttons via Fulfillment (Dialogflow ES)

If your bot uses webhook fulfillment — which most production bots do — you can add buttons programmatically. This is the right approach when button options are dynamic (pulled from a database, dependent on user input, or personalized).

Here is how to set up buttons using the dialogflow-fulfillment Node.js library.

Step 1: Enable Fulfillment

Inside your intent, scroll to the bottom and toggle on Enable webhook call for this intent. Then go to the Fulfillment section in the left sidebar and enable the Inline Editor (or connect your own webhook URL).

Step 2: Write the Fulfillment Code

Use the Suggestion class from the dialogflow-fulfillment library:

‘use strict’;

const functions = require(‘firebase-functions’);

const { WebhookClient } = require(‘dialogflow-fulfillment’);

const { Suggestion } = require(‘dialogflow-fulfillment’);

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {

  const agent = new WebhookClient({ request, response });

  function handleButtonIntent(agent) {

    agent.add(‘How can we help you today?’);

    agent.add(new Suggestion(‘Pricing’));

    agent.add(new Suggestion(‘Support’));

    agent.add(new Suggestion(‘Book a Demo’));

  }

  let intentMap = new Map();

  intentMap.set(‘YourIntentName’, handleButtonIntent);

  agent.handleRequest(intentMap);

});

Step 3: Deploy

Click Deploy inside the inline editor. Return to your intent and test using the Dialogflow simulator. The suggestion chips should appear alongside your text response.

This method gives you full programmatic control. You can pull options from an API, personalize chips based on session parameters, or switch between button sets depending on conversation context.

How to Add Buttons in Dialogflow CX

Dialogflow CX uses a page and flow architecture rather than individual intents. Button responses are added at the fulfillment level within pages, routes, or event handlers.

Method 1: Custom Payload in the Console

Inside a CX page or route, navigate to the Fulfillment section. Under Agent responses, click Add a response and select Custom payload. Enter the JSON for your rich content response.

For Dialogflow Messenger (the CX web widget), the button format uses the richContent structure:

{

  “richContent”: [

    [

      {

        “type”: “button”,

        “icon”: {

          “type”: “chevron_right”,

          “color”: “#2A5AF8”

        },

        “text”: “View Pricing”,

        “anchor”: {

          “href”: “https://yoursite.com/pricing”

        }

      }

    ]

  ]

}

For suggestion chips in CX Messenger, use:

{

  “richContent”: [

    [

      {

        “type”: “chips”,

        “options”: [

          { “text”: “Get Started” },

          { “text”: “Talk to Sales” },

          { “text”: “See Demo” }

        ]

      }

    ]

  ]

}

Method 2: Using Playbook Tools in CX (Generative AI Agents)

If you are using Dialogflow CX with generative AI playbooks, you can instruct your agent to call a function tool that sends rich content. Define a tool called addRichContent and reference it in your agent instructions:

– Ask the user what they need help with today

– At the same time run ${TOOL: addRichContent} to display buttons for Billing, Technical Support, and Account Settings

This is the most flexible approach for AI-native CX agents — it combines natural language generation with structured button output.

Adding Buttons via Custom Payload (For Any Platform)

The most platform-agnostic approach is building custom payload buttons entirely in JSON and parsing the response in your own frontend code.

Here is why this matters: Dialogflow supports over a dozen platform integrations, and each handles rich messages differently. Facebook Messenger, Slack, Kik, and custom web apps all have their own button structures. Custom payloads let you define exactly what gets sent.

Step 1: In your intent (ES) or fulfillment (CX), add a Custom Payload response.

Step 2: Enter your JSON. For example, a simple custom button payload might look like:

{

  “buttons”: [

    {

      “label”: “Yes, I want to continue”,

      “value”: “yes_continue”

    },

    {

      “label”: “No, take me back”,

      “value”: “no_back”

    }

  ]

}

Step 3: In your web or mobile app frontend, detect the custom payload in the Dialogflow response and render the buttons using your own UI components. The Dialogflow API passes the payload through untouched — your app handles the display logic.

This approach works for teams who need design consistency across their product, or who are integrating Dialogflow into a custom interface rather than using the out-of-box Dialogflow Messenger widget.

Button Best Practices for Better Conversational Flow

Getting the buttons added is step one. Getting them right is what separates a good bot from a great one.

Keep chip text short. Dialogflow ES suggestion chips have a 20-character limit per item. Even where limits are loose, shorter labels are easier to tap and faster to scan. Aim for 2–4 words per option.

Limit choices to three or four. The paradox of choice is real in chatbot UI just as it is everywhere else. More than four buttons creates decision friction. If you have more options, consider a list or carousel instead.

Match chips to expected intents. The text a user clicks should closely match a training phrase in the corresponding intent. If a user taps “Talk to Sales” and Dialogflow cannot confidently match an intent, the flow breaks. Align your chips to your training data.

Pair buttons with a question. A list of chips with no preceding question feels abrupt. Always include a text response above the buttons: “What would you like help with?” followed by Support / Billing / General Enquiry. Context makes the options feel natural.

Use URL buttons for external actions. When a button should take the user off-platform (to a booking page, a knowledge base article, a product page), use a card button with a URL rather than a suggestion chip. Suggestion chips are for continuing the conversation; URL buttons are for leaving it.

27% of online shoppers interact with chatbots daily (Tidio). Consistent, clean button UX is what keeps those interactions positive — and keeps users coming back.

Troubleshooting Common Button Issues in Dialogflow

Even with the right setup, buttons can fail to display or behave unexpectedly. Here are the most common issues and how to fix them.

Buttons not showing in the simulator. The Dialogflow built-in simulator has limited rich message support. Suggestion chips may not render visually. This is expected — test in the actual platform integration (Google Assistant, Messenger widget, or your custom frontend) to see real rendering.

Quick replies not triggering the correct intent. Check that the chip text exactly matches (or closely resembles) a training phrase in the target intent. If there is no clear match, Dialogflow may fall back to the Default Fallback Intent. Add the chip text as a training phrase to the relevant intent.

Custom payload not appearing in the response. Custom payloads are passed through by Dialogflow but must be parsed by your frontend. If your web app is not reading and rendering the payload field in the Dialogflow response JSON, the buttons will be invisible to users. Check your frontend integration code.

CX Messenger buttons not rendering. Confirm that your richContent JSON is valid — malformed JSON silently fails. Use a JSON validator before pasting into the console. Also verify that the type field matches a supported Dialogflow Messenger response type: button, chips, info, description, image, list, or divider.

Buttons appear but clicking does nothing. For suggestion chips that trigger intents, the chip text is sent back as a user expression. If the target intent does not exist or has no matching training phrases, the fallback fires. For URL buttons, ensure the href value is a valid, reachable URL with the correct protocol (https://).

Dialogflow ES vs. CX: Button Support at a Glance

Dialogflow CX gives you significantly more flexibility through the richContent JSON format and playbook tool integration. If you are building a new agent today — especially one with complex flows or generative AI components — CX is the recommended path.

Conclusion

Adding buttons in Dialogflow is one of the highest-leverage UX improvements you can make to any conversational agent. The setup is straightforward — whether you use the console UI, fulfillment webhooks, or custom JSON payloads. The impact is immediate: cleaner intent matching, higher resolution rates, and a better experience for every user who interacts with your bot.

The global chatbot market is on a steep growth curve, and 62% of consumers already prefer interacting with a bot over waiting for a human agent (SQ Magazine). The businesses that build well-structured, button-guided bot flows now will be in a materially better position as that adoption continues to climb.

Start with suggestion chips in a single high-traffic intent. Test. Iterate. Then expand across your agent as you see the resolution rates improve.

And if you are thinking beyond the bot — about how to actually fill your pipeline with qualified prospects — that is a different problem, and one worth solving with a dedicated outbound strategy. Book a strategy meeting with SalesSo to see how cold email, cold LinkedIn, and cold calling can work together to put consistent, scalable meetings on your calendar.