Custom Buttons

Custom Buttons

Custom Buttons allow you to add interactive elements to your Nexvio.ai chatbot conversations, providing users with clear options and streamlining their experience.

What Are Custom Buttons?

Custom Buttons are clickable elements that appear in your chatbot’s conversation interface. They allow users to:

• Select from predefined options
• Trigger specific actions
• Navigate to different parts of the conversation
• Submit information with a single click
• Access additional resources or links

Benefits of Custom Buttons

Adding Custom Buttons to your chatbot offers several advantages:

• Improved User Experience: Make it easier for users to interact with your chatbot
• Reduced Errors: Limit free-text input to prevent misunderstandings
• Conversation Flow Control: Guide users through predefined paths
• Faster Interactions: Allow users to quickly select common options
• Visual Enhancement: Create a more modern and intuitive interface

Creating Custom Buttons

To set up Custom Buttons for your chatbot:

1. Navigate to Chatbox > Actions > Custom Button
2. Click Create New Button Set
3. Enter a name for your button set
4. Add buttons with their labels and actions
5. Configure when the buttons should appear
6. Save your button configuration

Button Types

Nexvio.ai supports several types of Custom Buttons:

Quick Reply Buttons

Temporary buttons that appear in response to specific user queries:

• Disappear after the user makes a selection
• Ideal for conversation navigation
• Can contain simple text options

Persistent Buttons

Buttons that remain visible throughout the conversation:

• Stay in place at the bottom of the chat window
• Good for frequently used actions
• Limited in number (typically 3-5 buttons)

Card Buttons

Buttons attached to rich content cards:

• Accompany images, titles, and descriptions
• Can link to external resources
• Support multiple actions per card

Button Actions

Each button can trigger different types of actions:

• Text Response: Insert predefined text as if the user typed it
• URL Navigation: Open an external link in a new tab
• Function Call: Trigger a custom action or JavaScript function
• Payload Send: Send structured data to your backend systems
• Conversation Branch: Direct the conversation to a specific flow

Designing Effective Button Sets

For optimal user experience:

• Keep Labels Clear: Use concise, action-oriented text
• Limit Options: Provide 2-5 buttons at a time to avoid overwhelming users
• Use Logical Grouping: Organize buttons by function or category
• Consider Mobile Users: Ensure buttons are large enough for touch interfaces
• Maintain Consistency: Use similar styling and wording across button sets

Dynamic Button Generation

Create buttons dynamically based on conversation context:

• Generate buttons from database records
• Display different options based on user preferences
• Show buttons based on conversation history
• Add or remove buttons depending on user authentication status

Testing and Optimizing

Evaluate and improve your Custom Buttons:

1. Use the Preview feature to test button appearance and functionality
2. Analyze which buttons users click most frequently
3. Identify where users might be confused by button options
4. A/B test different button labels and arrangements
5. Monitor for any technical issues with button functionality

Implementation Examples

Product Selection Buttons

// Example of product category selection buttons
{
  "type": "button_set",
  "message": "What type of product are you looking for?",
  "buttons": [
    {
      "label": "Electronics",
      "action": "category_select",
      "value": "electronics"
    },
    {
      "label": "Clothing",
      "action": "category_select",
      "value": "clothing"
    },
    {
      "label": "Home & Garden",
      "action": "category_select",
      "value": "home_garden"
    }
  ]
}

By strategically implementing Custom Buttons in your Nexvio.ai chatbot, you can create a more intuitive, efficient, and engaging user experience.