Skip to main content

CTA (Call to Action) Buttons in the AI Assistant

Product Documentation: Implementing CTA (Call to Action) Buttons in the AI Assistant

Introduction​

CTA (Call to Action) Buttons significantly enhance user engagement by providing immediate, actionable options within the AI assistant's responses. For the Kalauni Resort AI assistant, these buttons allow guests to effortlessly explore activities, obtain detailed information, and sign up for experiences directly from their conversation.

This document provides detailed guidance on how to implement CTA buttons in the system prompt, including specific code examples to illustrate their usage. By following these instructions, you can create a more interactive and user-friendly AI assistant experience.

Setting Up CTA Buttons in the System Prompt​

To effectively incorporate CTA buttons, it's essential to define their behavior within the system prompt. This enables the reasoning engine to understand when and how to present buttons to users.

Steps:​

  1. Identify Appropriate Scenarios: Determine where CTA buttons will provide the most value, such as when listing activities or offering sign-up options.

  2. Define Button Text and Actions: Specify the display text on the button and the action it should trigger when clicked.

  3. Include Code Examples: Provide HTML code snippets in the system prompt to guide the reasoning engine on how to render the buttons.

Examples of CTA Buttons with Code Snippets​

1. Listing Activities at the Hotel​

Scenario: When a guest inquires about available activities, present a list of activities, each accompanied by a CTA button that allows the guest to learn more about a specific activity.

System Prompt Example:

### Insert Button

Example: What are your activities? For each activity, add a button and a short description.

<button class="ai12zBtn" onClick="sendQuery('Learn about Yoga')">Learn about Yoga</button>

<button class="ai12zBtn" onClick="sendQuery('Learn about Golf')">Learn about Golf</button>

Explanation:

  • Button HTML: 
    <button class="ai12zBtn" onClick="sendQuery('Learn about Yoga')">
      Learn about Yoga
    </button>
  • Button Functionality:
    • Class: ai12zBtn (for consistent styling across buttons).
    • onClick Event: sendQuery('Learn about Yoga') simulates the user typing "Learn about Yoga" when the button is clicked.
  • Usage: Include these buttons in the AI assistant's response when listing activities to provide users with quick access to more information.

2. Showing a Single Activity with Sign-Up Option​

Scenario: When providing details about a specific activity, include a CTA button that allows the guest to sign up for that activity directly.

System Prompt Example:

When showing a single activity like Yoga, show content about Yoga and include the button:

<button class="ai12zBtn" onClick="sendQuery('Sign up for Yoga')">Sign up for Yoga</button>

Explanation:

  • Button HTML: 
    <button class="ai12zBtn" onClick="sendQuery('Sign up for Yoga')">
      Sign up for Yoga
    </button>
  • Button Functionality:
    • onClick Event: sendQuery('Sign up for Yoga') triggers the sign-up process for Yoga.
  • Agent Interaction: Clicking this button calls the ResortActivities agent with activity=yoga, which generates a dynamic form for the user to complete the sign-up.

3. Signing Up for Spa Services​

Scenario: When a guest inquires about spa services, provide detailed information along with a CTA button to sign up.

System Prompt Example:

When asking about the Spa:

<button class="ai12zBtn" onClick="sendQuery('Sign up for Spa')">Sign up for Spa</button>

Explanation:

  • Button HTML: 
    <button class="ai12zBtn" onClick="sendQuery('Sign up for Spa')">
      Sign up for Spa
    </button>
  • Functionality: Similar to the previous example, this button initiates the sign-up process for spa services.

4. Providing Detailed Information with Sign-Up Option​

Scenario: Anytime a single activity like Golf is discussed, include detailed information about the activity and a CTA button to sign up.

System Prompt Example:

Anytime showing a single activity like Golf, show content about Golf and include the button:

<button class="ai12zBtn" onClick="sendQuery('Sign up for Golf')">Sign up for Golf</button>

Explanation:

  • Button HTML: 
    <button class="ai12zBtn" onClick="sendQuery('Sign up for Golf')">
      Sign up for Golf
    </button>
  • Additional Content: Provide comprehensive details about the Golf activity to inform the guest before they decide to sign up.

How to Insert Buttons into the Page​

To ensure the buttons function correctly within the AI assistant's interface, follow these guidelines:

  1. Consistent Styling: Use the ai12zBtn class for all buttons to maintain a uniform look and feel.

  2. Implement the sendQuery Function:

    • Purpose: The sendQuery function simulates user input by sending a predefined query to the AI assistant when a button is clicked.
    • Implementation: 
      function sendQuery(query) {
        // Code to send the query to the AI assistant
        // This function should interface with your chat system to input the query as if the user typed it
      }
    • Integration: Ensure this function is accessible within the scope where the buttons are rendered.

  3. HTML Structure: Include the buttons within the AI assistant's response output, ensuring they are properly parsed and rendered as interactive elements.

  4. Security Considerations:

    • Sanitize Inputs: Ensure that any dynamic content included in the sendQuery function is sanitized to prevent injection attacks.
    • Event Handling: Confirm that the onClick events are securely handled within your application's context.

How the Reasoning Engine Interprets CTA Buttons​

  • Understanding Context: The reasoning engine recognizes when to include buttons based on the conversation context and the examples provided in the system prompt.

  • Dynamic Response Generation: By providing examples with code snippets, the reasoning engine can generate responses that include functional buttons tailored to the user's inquiries.

  • Simulating User Interaction: Buttons use the sendQuery function to simulate user input, allowing the AI assistant to handle button clicks seamlessly within the conversation flow. Note sendQuery is supported by the webComponents

Integrating Agents and Tools​

CTA buttons can trigger specific agents or tools to perform actions, such as signing up for activities or retrieving detailed information.

ResortActivities Agent​

  • Purpose: Manages activity sign-ups by generating dynamic forms.

  • Functionality:

    • Auto-Population: Pre-fills form fields with known information (e.g., the activity name).
    • Data Collection: Gathers additional necessary details from the guest.

  • Example Workflow:

    1. Button Clicked: Guest clicks "Sign up for Golf".
    2. Agent Triggered: The ResortActivities agent is called with activity=golf.
    3. Form Generation: A form is presented to the guest to complete the sign-up process.

Best Practices for Implementing CTA Buttons​

  • Clear Button Labels: Use descriptive text that clearly indicates the button's action (e.g., "Learn about Yoga", "Sign up for Spa").

  • User-Friendly Design: Ensure buttons are easily noticeable and accessible within the response.

  • Contextual Placement: Place buttons immediately after the relevant content to maintain logical flow.

  • Limit Quantity: Avoid cluttering the response with too many buttons; prioritize the most relevant actions.

  • Testing: Regularly test buttons to ensure they trigger the correct actions and that the sendQuery function works as intended.

Summary​

CTA buttons are a powerful tool to enhance interactivity within the AI assistant, providing guests with convenient options to explore and engage with the resort's offerings. By incorporating the provided code examples into the system prompt and following the implementation guidelines, you can create a more dynamic and responsive AI assistant that significantly improves the guest experience at Kalauni Resort.

Note: This documentation builds upon the initial system prompt and guidelines, incorporating detailed code examples to clarify the implementation of CTA buttons within the AI assistant's responses.