Skip to content

Suggested Answers

Overview

Suggested Answers are pre-filled response options displayed when the bot asks the visitor a question. Instead of typing, visitors can click a suggestion to respond quickly.

User Experience

When the bot asks a question:

Bot: "How many people are on your team?"

[1-5 people]  [6-20 people]  [21-100 people]  [100+ people]

Clicking a button sends that answer as the visitor's message.

When Displayed

Suggested answers appear when:

  1. The bot's response contains the 👉 emoji marker
  2. The backend generates suggested_answers in the response metadata

Common scenarios: - Qualification questions ("What's your company size?") - Multiple choice questions ("Which feature interests you most?") - Yes/no confirmations ("Would you like to book a demo?")

Architecture

sequenceDiagram participant User participant Frontend participant LangGraph participant Answer as answer_writer participant Suggester as suggested_answers_node User->>Frontend: Sends message Frontend->>LangGraph: Query LangGraph->>Answer: Generate response with 👉 Answer->>Suggester: Route to suggester Suggester->>Suggester: Generate answers based on:<br/>- Bot's question<br/>- Visitor profile<br/>- Common responses Suggester-->>LangGraph: suggested_answers[] LangGraph-->>Frontend: Response + answers Frontend->>Frontend: Render SuggestedAnswers

Key Files

Backend

File Purpose
ixchat/nodes/suggested_answers_node.py Generates answer options
ixchat/nodes/suggestion_router.py Routes based on 👉 marker
prompts/website-agent/suggested-answers.md Langfuse prompt template

Frontend

File Purpose
shared/src/components/SuggestedAnswers.tsx Renders clickable answer buttons

Frontend Component

<SuggestedAnswers
    answers={['Yes, let\'s do it', 'Not right now', 'Tell me more first']}
    onAnswerClick={(answer) => sendMessage(answer)}
    primaryColor={themeColor}
/>

Features: - "Surfacing suggestions" animation (slide up + fade in) - Staggered timing for each option - Themed border and background colors - Analytics tracking on display and click

Analytics Events

Event Trigger
rw_suggested_answers_displayed When answers are shown
rw_suggested_answer_clicked When visitor clicks an answer

Difference from Follow-Up Questions

Feature Suggested Answers Follow-Up Questions
Purpose Answer bot's question Ask bot a new question
Direction Visitor → Bot response Visitor → Bot new query
Trigger Bot asks a question (👉) Bot answers a question (👉)
Content Pre-defined response options AI-generated questions

Debugging

Frontend console logs:

logger.debug('Suggested answers displayed:', { answers, count: answers.length });
logger.debug('Suggested answer clicked:', { answer, domain });

Styling

The component uses theme colors: - Border: 10% opacity of primary color - Background: 3% opacity of primary color - Text: Inherits from theme

Testing

# Frontend tests
cd frontend/shared
pnpm test SuggestedAnswers