Configuration

🧩 Overview

The CTA configuration help us to allow the user to customize the bot corresponding to the width, name, avatar and logo of the bot. Bot configuration screen is designed to simplify the process of creating and configuring bots tailored to your specific business needs. Here, you can create, edit, set default, and delete your custom bots.

🛠️ Step 1 Create a Configuration

Go to the Agent, select the Controls menu from the left navigation panel, and click on the Bot menu to create a new bot configuration.

🛠️ Step 2 Name your configuration

Name: Name your configuration. Only used when displaying the list of configurations. The first configuration typically name Default. Description: The description of the configuration. Only used when displaying the list of configurations

Settings tab

• Bot Title Naming your Bot, this will show up when the Agent responds to the user

Info tab

• Help text The Welcome screen, When the Bot opens you can insert any HTML, including buttons, see sendMessage, and sendJSON

<div class="my-welcome-panel">
  <div class="my-welcome-header">🌴 Welcome to Kaluani Beach Resort!</div>
  <div class="my-welcome-message">
    How can we make your stay unforgettable?
    <div class="my-welcome-sub">Select a question below or ask your own!</div>
  </div>
  <div class="my-btn-row">
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('What rooms and suites are available right now?')"
    >
      Check Room Availability
    </button>
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('What amenities and activities does the resort offer?')"
    >
      Explore Resort Amenities
    </button>
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('What local attractions and tours do you recommend?')"
    >
      Discover Local Attractions
    </button>
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('Are there any current promotions or special packages?')"
    >
      View Special Offers
    </button>
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('Can I book dining or spa reservations?')"
    >
      Book Dining or Spa
    </button>
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('What is your cancellation and refund policy?')"
    >
      Ask About Cancellation Policy
    </button>
    <button
      class="ai12zbutton"
      onclick="document.querySelector('ai12z-bot').sendMessage('How can I arrange airport transfers or transportation?')"
    >
      Arrange Transportation
    </button>
  </div>
</div>
<style>
  .my-welcome-panel {
    background: #f9fafb;
    border-radius: 18px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 32px 28px 18px 28px;
    margin: 16px;
    max-width: 520px;
    text-align: center;
    font-family: inherit;
    border: 1px solid #f0f0f0;
  }
  .my-welcome-header {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #114d3d;
    letter-spacing: 0.02em;
  }
  .my-welcome-message {
    font-size: 1.08rem;
    margin-bottom: 18px;
    color: #2a3342;
  }
  .my-welcome-sub {
    font-size: 0.92rem;
    color: #7685a6;
    margin-top: 2px;
  }
  .my-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .ai12zbutton {
    color: #124d3e;
    background: #e7f6f0;
    font-weight: 500;
    border: 1px solid #b6ded0;
    border-radius: 7px;
    padding: 12px 18px;
    cursor: pointer;
    margin: 0;
    transition: background 0.18s;
    font-size: 1rem;
  }
  .ai12zbutton:hover {
    background: #c6ebe0;
    border-color: #80c7a6;
  }
</style>

Style tab

Example CSS for Search cta. Right click inspect code find the class an add the css to the CSS tab of the control that you are using. It will not work adding this to seperate css, css needs to be added to the style of the control you are using

h1 {
  color: red;
}

#parent-element .non-pending-user p {
  color: blue;
}

form div.searchbar-bgcolor {
  background-color: red;
}

#template-container .carousel-card {
  background-color: green;
}
ai12z-category .cta-search-text {
  color: red;
}

audio-recorder .mic-icon {
  fill: black;
}
.sv-header__background-color--accent .sv-header__description .sd-description {
  color: red;
}
.sd-element__title .sd-element__num {
  display: none;
}

Script tab

ai12z runs in a shadow dom, so to access a function it will not work if it exists in a js file.

The code below will not work

<input type="text" id="myTextField" value="hello" /> const textField =
document.getElementById('myTextField');

In a shadow dom, you need to access using querySelector

• 1. First, get the host element (the element to which the shadow root is attached).
• 2. Then, access the shadow root via .shadowRoot.
• 3. After that, use regular DOM methods (like .querySelector) inside the shadow root.

Accessing and Manipulating HTML Elements in ai12z Bot Custom Scripts

ai12z allows you to add custom JavaScript functions to your bot for actions such as “Add to Cart,” opening links, or interacting with the page. When your function needs to interact with HTML elements (such as reading the value of a dropdown), you need to reference those elements relative to the button or UI element that triggered your script.

---

Example: Add to Cart Button With Quantity

Suppose you have an "Add to Cart" button and a quantity dropdown in your UI. You want your script to:

• Find the quantity selected by the user, and
• Show a confirmation with the title and selected quantity.

Here’s how you can do this:

function addToCart(button, title) {
  // Find the nearest select[name="qnty"] within the same container as the button
  var select = button.parentNode.querySelector('select[name="qnty"]')
  var qty = select ? select.value : 0
  alert("Added to cart: " + title + ", Quantity: " + qty)
}

How it works:

• button is a reference to the button element that was clicked (passed by the bot’s event system).
• button.parentNode gets the container (parent) of the button.
• .querySelector('select[name="qnty"]') looks for the <select> dropdown for quantity within that container.
• select.value gets the selected quantity value.

This pattern ensures your script only accesses the dropdown that belongs to the same “card” or UI block as the button clicked—avoiding confusion if there are multiple product cards on the page.

---

General Guidance for Accessing HTML Elements

• Always use the button or element that triggers your function as the starting point.
• Use parentNode, closest(), or other DOM traversal methods to reliably locate the relevant input, dropdown, or other element.
• Avoid using document.querySelector globally unless there is only ever one matching element—otherwise, you might get the wrong one!

Example: Open Link in a New Tab

function openLink() {
  window.open("https://www.google.com", "_blank")
}

---

Best Practices

• Keep selectors specific to the UI structure: Use parentNode or .closest() to scope your queries to the right container.
• Check for nulls: Always check if the element exists before using its value.
• Use clear, descriptive function names: So it’s obvious what each script does when editing later.

---

Summary

When writing custom JavaScript for ai12z bot controls:

• Functions can be called by the bot when events occur (like button clicks).
• To access UI fields, use the triggering element as a reference point and traverse the DOM as needed.
• This keeps your code robust even when there are many interactive elements on the page.

🎨 Style Customization