Skip to main content

Buttons and CTA

Product Documentation: Adding CTA Buttons in AI12Z Copilot Chatbot​

Overview​

This guide provides instructions on how to integrate Call-to-Action (CTA) buttons into the AI12Z Copilot chatbot. These buttons allow users to interact with various options, such as hotel activities, and seamlessly sign up or learn more through a webhook connection.

Prerequisites​

  • Access to the AI12Z Copilot platform with permissions to edit chatbot responses.
  • Basic understanding of HTML, JavaScript, and webhook integration.

Step 1: Inserting CTA Buttons for Hotel Activities, as an Example​

CTA and buttons for hotel activities to learn more

To enhance user interaction, you can add CTA buttons that users can click to learn more about hotel activities or sign up for them. Below is an example of how to insert these buttons.

Example: Displaying Hotel Activities with CTA Buttons​

When listing hotel activities such as a Spa session or a Wine Tasting event, include examples in the system prompt:

### Insert Button , CTA buttons 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>

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>

Anytime showing a single activey like about Golf, show content about Golf and
include the button also include detailed information about the activity:
<button class="ai12zBtn" onClick="sendQuery('Sign up for Golf')">
  Sign up for Golf
</button>

### When wanting to sign up for an activity The sign-up for Yogo should call the
the webhook function with keyname ResortActivities and where activity=yoga, it
should not list out all the activities If I ask Sign up for Golf, then call the
Activity sign up don't come back with a to sign up click this button, which is
just repeating the same text. If someone says I want to book a tee time, should
call the webhook function with keyname ResortActivities and where activity=golf

These buttons use the onClick event to send a query to the chatbot, allowing the content to be sent to the server and the LLM will process a response, which could include calling an agent, form or processing it based on context

Giving these examples in the system prompt enables the reaasoning engine to know how to insert buttons

sendQuery​

sendQuery is a built in function is the chatBot, to send text to the backend.

For example, when a user clicks the "Sign up for the Spa session" Send Query send the Sign up for the Spa session, the reasoning engine determines does it have an Agent or a form to handle this data.

This function sends a POST request to tha ai12z server, as though someone typed in the question and clicked the Ask AI button.