Suggestion Chips | SmartWeb

What Are Suggestion Chips?

Suggestion chips are selectable, visually distinct, pill-shaped elements that present users with fast, predefined reply options in chatbots and conversational UIs. These chips appear below or near a bot’s prompt and represent the most likely or contextually appropriate user responses. When tapped or clicked, the chip’s value is submitted as the user’s answer, and the chips disappear to keep the interface uncluttered.

Purpose:

Accelerate input by providing one-tap answers
Guide users toward valid inputs, reducing ambiguity and errors
Increase conversation completion rates by preventing dead-ends

Example:
Bot: “What size pizza would you like?”
Suggestion Chips: [Small] [Medium] [Large]

Key Characteristics of Suggestion Chips

Ephemeral: Chips are usually visible only for a single prompt and disappear after selection or user input, helping keep the conversation clean and focused.

Pre-Defined: The set of options is generated by the chatbot logic, tailored to the current conversation context.

Non-Persistent: Chips are not permanent navigation or action buttons—they exist only for the relevant dialog turn.

Visual Distinction: Pills or bubbles, often rendered according to Material Design guidelines, with clear padding and separation from the main chat stream.

One-Tap Selection: Users can respond instantly, reducing typing effort and mistakes.

Adaptive: Chips can be contextually generated, showing only relevant or valid options based on conversation state or user profile.

Suggestion Chips vs Other UI Elements

Suggestion Chips vs Buttons

Feature	Suggestion Chips	Buttons
Appearance	Pill/bubble, ephemeral	Rectangular, may be persistent
Disappear After Tap	Yes	Not always, often persistent
Use Case	Lightweight, context-sensitive choices	Navigation, actions, persistent
Placement	Below prompt/input area	Inline with cards, messages, footers
Platform Example	Dialogflow, Messenger Quick Replies	Messenger, Telegram, Web widgets

Suggestion chips are for quick, contextual, one-off decisions; buttons are for ongoing actions or navigation.

Suggestion Chips vs Quick Replies

Terminology: “Quick replies” is the term for this pattern on Facebook Messenger and Telegram. Google names them “suggestion chips” in Dialogflow and Assistant.

Behavior: Both chips and quick replies disappear after use, are limited in number, and are intended for rapid input.

Technical Note: Some platforms allow quick replies to return structured payloads or collect user data.

Suggestion Chips vs Persistent Menus

Menus: Always visible, providing global navigation/actions (e.g., “Help,” “Settings,” “Restart”).

Suggestion Chips: Ephemeral, tied to the latest prompt.

Suggestion Chips vs Smart Chips

Smart Chips: In Google Docs, these are document-embedded elements for links, people, or files—not related to conversational UI.

Technical Implementation

General Workflow

Bot Prompt: The chatbot sends a message requiring input
Display Chips: The client displays suggestion chips below the prompt
User Action: User taps a chip; the chip’s value is sent to the backend
Bot Response: The bot processes the input and responds; chips disappear

Platform-Specific Guidance

Dialogflow

Native Support: Suggestion chips are supported in Dialogflow CX and ES integrations for Google Assistant, web chat, and compatible channels.

Technical Limits:

Up to 8 suggestion chips per prompt
Only available on devices with actions.capability.SCREEN_OUTPUT
At least one simple response is required before chips
Chips not allowed in a FinalResponse

Dynamic Chips: Use webhooks to generate context-sensitive chips in response payloads.

Design: Pair chips with cards or responses; do not repeat the same info in both.

Facebook Messenger

Quick Replies:

Up to 13 quick replies per message
Each reply can have text, an optional image, and a payload
Disappear after selection or free-form input

Persistent Buttons: For navigation or static actions, not ephemeral input.

ReplyKeyboardMarkup:

Provides custom keyboards for one-tap replies
Keyboards can be set as “one-time”, causing them to disappear after a reply
Keyboard buttons can be arranged in rows, and the keyboard can be hidden after use

Inline Keyboard: Used for persistent, action-triggering buttons.

Sample Code: Dialogflow Webhook (Node.js)

// Sample fulfillment snippet for suggestion chips in Dialogflow webhook
const {WebhookClient, Suggestion} = require('dialogflow-fulfillment');

function sendSuggestionChips(agent) {
  agent.add("What size pizza would you like?");
  agent.add(new Suggestion('Small'));
  agent.add(new Suggestion('Medium'));
  agent.add(new Suggestion('Large'));
}

The Suggestion class is available in the dialogflow-fulfillment library. Chips can be generated dynamically based on user input or context.

Best Practices for Suggestion Chips

Limit the Number: Present three to five options at most. Too many choices overwhelm users and degrade UX.

Be Contextual: Show only relevant options based on user state or conversation context.

Keep Labels Short: Use concise chip text (under 20 characters) to prevent wrapping or layout issues.

Enable Disambiguation: Use chips to clarify ambiguous user input or to confirm detected entities.

Accessibility: Ensure chips have sufficient color contrast, are screen-reader friendly, and have clear labels.

Handle Free-Text Inputs: Validate and process user input even if they ignore chips and type a response.

Platform Compliance: Respect platform limits for chip count and label length.

Common Pitfalls and How to Avoid Them

Too Many Chips: Avoid presenting long lists. Stick to 3–5 options.

Disconnected Chips: Every chip must trigger a valid handler or intent; never leave a chip unlinked.

Persistent Chips: Ensure chips disappear after selection to prevent confusion.

Unvalidated Input: Always handle cases when users type their own response instead of selecting a chip.

Vague Labels: Use clear, context-specific text (“Yes”, “No”, “Medium”) rather than ambiguous phrases.

Ignoring Platform Limits: Each platform has chip/quick reply count and character limits (e.g., 8 for Dialogflow, 13 for Messenger).

Use Cases and Practical Scenarios

Slot Filling in Ordering Flows

Prompt: “Choose a drink size.”
Chips: [Small] [Medium] [Large]
Outcome: User taps a chip to fill the slot without typing.

Disambiguation After Invalid Input

Prompt: “Sorry, please select vehicle type:”
Chips: [Car] [Truck]

Quick Surveys or Feedback

Prompt: “Was this helpful?”
Chips: [Yes] [No]

Branching Conversation Paths

Prompt: “What would you like to do?”
Chips: [Browse] [Order Status] [Support]

Collecting Sensitive Data

Prompt: “Share your contact info.”
Chips: [Use my email] [Use my phone number]

Note: Chips can be pre-filled with user data where supported.

Implementation Tips

Design Considerations

Visual Hierarchy: Ensure chips are visually distinct but not overwhelming

Touch Targets: Make chips large enough for easy tapping on mobile devices

Spacing: Provide adequate spacing between chips to prevent accidental taps

Responsive Design: Ensure chips work well across different screen sizes

Performance Optimization

Lazy Loading: Load chip options only when needed

Caching: Cache frequently used chip configurations

Async Updates: Update chips asynchronously to avoid blocking UI

Analytics and Monitoring

Track Selection Rates: Monitor which chips are most/least selected

Identify Drop-offs: Detect when users ignore chips and type instead

A/B Testing: Test different chip configurations for optimal engagement

Advanced Features

Dynamic Chip Generation

Generate chips based on user context, conversation history, or external data sources.

Localization

Support multiple languages by dynamically loading localized chip labels.

Personalization

Customize chip options based on user preferences or past behavior.

Progressive Disclosure

Show basic options initially, with an option to reveal more advanced choices.

FAQ: Suggestion Chips

Q: What are the main benefits of using suggestion chips?
A: Faster, error-resistant, and structured input for users, leading to higher conversation success rates.

Q: How do suggestion chips differ from buttons?
A: Chips are ephemeral and prompt-bound; buttons are often persistent and used for navigation or static actions.

Q: Can users ignore chips and type their own response?
A: Yes. Always validate input for both chip selection and free-form text.

Q: What if my platform doesn’t support chips natively?
A: Use quick replies or similar elements, or design custom pill-shaped buttons that mimic chip behavior.

Q: What about accessibility?
A: Ensure good color contrast, readable fonts, and ARIA labels as per Material Design accessibility guidelines.

Summary Table

Feature	Suggestion Chips	Buttons	Quick Replies	Persistent Menu
Appearance	Pill, ephemeral	Rectangular, persistent	Pill/bubble, ephemeral	List, always visible
Disappear on selection	Yes	Often no	Yes	No
Use case	Fast, guided input	Navigation, actions	Fast input	Global actions
Max options (FB)	13 (recommended 3-5)	3 per card	13 (3-5 optimal)	-

Key Takeaway

Use suggestion chips (quick replies) for rapid, context-driven user input. Limit the number for clarity, keep labels concise, and always handle free-form input.