Custom Button AI Action

The Custom Button AI Action allows your AI agent to send a clickable button to the user based on the conversation. Use this to link to external tools such as booking engines, order forms, or scheduling systems, with data collected from the user’s responses.

Use Case: Hotel Booking with a Custom Button

Suppose you operate a hotel website and want your chatbot to assist with room bookings. With a Custom Button AI Action, your chatbot can ask for guest details, build a dynamic booking URL, and present a clickable button that opens the booking page with the information already filled in.

Calendly Custom Action Setup

Step-by-Step Setup

Start by creating a new Custom Button action. This action will trigger when a visitor mentions booking a room. The AI will gather the necessary details and dynamically generate a booking button using those values.

To configure this, go to your App Settings, then the AI Chatbot tab, and open Custom Actions. Click "New Custom Action" and fill in the following fields:

AI Custom Button Setup

Action Field Definitions

  • Action Type: Select Show Button or iFrame Only
  • Action Name: A descriptive name like lookup_hotel_availability
  • When to use: Example: “Use when someone asks to book a hotel room or check room availability. Required inputs are arrival and departure dates, number of adults, and number of children.”
  • Triggered response: Example: “Great, let me look up the room availability”
  • Collect data inputs for action: arrivalDate, departureDate, numberOfAdults, numberOfChildren
  • Button label: View Availability
  • Button URL: https://example.com/book?checkin={{arrivalDate}}&checkout={{departureDate}}&adults={{numberOfAdults}}&children={{numberOfChildren}}

Custom Button AI Flow Example

How the Chatbot Flow Works

1. The chatbot gathers the required information

  • Asks for number of adults and children
  • Asks for check-in and check-out dates

2. The chatbot builds the deep link

Using the inputs, it generates a URL like:

https://example.com/book?adults=2&children=1&checkin=2025-08-01&checkout=2025-08-05

3. The chatbot sends a button

The AI agent replies with:

<a href="https://example.com/book?adults=2&children=1&checkin=2025-08-01&checkout=2025-08-05">
    Book Your Stay
</a>

When the visitor clicks the button, they are taken directly to the booking site with all details pre-filled. This saves time and increases conversion rates.