Configuration

🧩 Overview

Bot 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 & Theme

Name: Name your configuration. This is only used when displaying the list of configurations. The first configuration is typically named "Default".

Description: The description of the configuration. This is only used when displaying the list of configurations and helps identify the purpose of each configuration.

Theme Selection

Choose your bot's visual theme from the dropdown list. The theme controls the overall appearance, colors, and styling of your bot interface.

Available Theme Options:

• Default Themes: Pre-built themes with standardized color schemes and styling
• Custom Theme: Create a personalized theme that matches your brand identity

Custom Theme Creation

When you select "Custom" from the theme dropdown, ai12z will automatically begin the theme creation process.

Important: Before creating a custom theme, we strongly recommend completing the AI Brand Creation process first. This will analyze your brand assets and automatically generate appropriate colors, fonts, and styling guidelines that will be used in your custom theme.

To create a custom theme:

1. Complete Brand Guidelines First (Recommended)

   • Navigate to AI Settings → Brand Guidelines
   • Follow the AI Brand Creation guide to upload your brand images
   • Generate and save your brand guidelines

2. Select Custom Theme

   • Return to your bot configuration
   • Choose "Custom" from the Theme dropdown
   • The system will automatically create a theme based on your saved brand guidelines

3. Theme Auto-Generation

   • If you have completed brand guidelines, the custom theme will automatically inherit:
     • Primary and secondary brand colors
     • Accent colors for highlights and interactions
     • Typography preferences
     • Overall visual style consistency
   • If no brand guidelines exist, a default custom theme template will be created that you can manually customize

Benefits of Custom Theme with Brand Guidelines:

• Brand Consistency: Automatically matches your website's visual identity
• Professional Appearance: Cohesive design that reflects your brand personality
• Time Saving: No manual color picking or style configuration needed
• Responsive Design: Optimized for all device sizes while maintaining brand integrity

Display tab

Manage the width and height of the Bot, and the mode of how the Bot opens. The check box for Expanded view, changes the behavior of the Bot when the page loads. If unchecked it will display as

Expanded view Checked

Expanded view Unchecked

Settings tab

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

Info tab

The Info tab allows you to customize the content that users see when they first interact with your bot. This includes welcome messages and privacy information.

Welcome Message

The Welcome Message appears when the bot first opens and provides the initial user experience. You can insert custom HTML content including:

• Text and Formatting: Use HTML tags for styled text, headings, and paragraphs
• Interactive Buttons: Add buttons that trigger specific bot actions
• Images and Media: Include logos, icons, or branded graphics
• Custom Styling: Apply CSS classes for brand-consistent appearance
• JavaScript Integration: Use sendMessage() and sendJSON() functions for interactive elements

Example Welcome Message HTML:

<div class="welcome-container">
  <h2>Welcome to Our Support Assistant!</h2>
  <p>
    I'm here to help you with your questions. Choose an option below or ask me
    anything:
  </p>
  <button onclick="ai12zBot.sendMessage('I need help with billing')">
    Billing Support
  </button>
  <button onclick="ai12zBot.sendMessage('Technical support')">
    Technical Help
  </button>
</div>

Privacy Statement

The Privacy Statement displays privacy information to users, typically as a brief notice with a link to your full privacy policy. Keep this concise and user-friendly.

Best Practices for Privacy Statement:

• Keep the message short and clear
• Link to your complete privacy policy page
• Include essential information about data collection
• Use reassuring language about data protection

Example Privacy Statement:

<p>
  Your privacy is important to us. We collect minimal information to provide
  better assistance.
  <a href="/privacy-policy" target="_blank">View our Privacy Policy</a>
</p>

AI Create Welcome Page

The AI Create Welcome Page feature automatically generates personalized welcome content based on your website and business context.

How It Works

1. Domain Analysis: The system uses the domain from your agent settings
2. Content Intelligence: LLM analyzes your website content and knowledge base
3. Question Generation: Creates relevant questions your visitors commonly ask
4. Contextual Suggestions: Tailors questions to specific website sections (if specified)

Using Advanced Settings

Advanced Tab Options:

• Section Targeting: Specify a particular section of your website to focus question generation
• Content Context: Provide additional context about your business or service area
• Question Types: Choose between general questions, product-specific, or support-focused

Example Advanced Settings:

• Target Section: "Products > Software Solutions"
• Context: "Enterprise software for healthcare providers"
• Focus: "Implementation and support questions"

Click Generate Welcome

When you click "Generate Welcome", the AI will create:

Generated Content:

• HTML Structure: Properly formatted welcome message with your brand context
• CSS Styling: Responsive design that works across devices
• JavaScript Functions (if required): Interactive elements for enhanced user engagement
• Suggested Questions: Relevant questions as clickable buttons or quick actions

Content Elements Created:

• Welcome greeting personalized to your business
• 3-5 relevant question buttons
• Professional formatting with your brand context
• Mobile-responsive design
• Accessibility-friendly structure

Save and Iterate

After generation, you can:

Review Generated Content:

• Preview the welcome message layout
• Test question buttons functionality
• Verify brand consistency and tone

Customize Further:

• Add specific instructions for refinement
• Request different question types
• Modify styling or layout preferences
• Include additional interactive elements

Iterate the Process:

• Click "Generate" again with new instructions
• Refine based on testing feedback
• Add seasonal or promotional content
• Update questions based on user behavior analytics

Save Your Welcome Message:

• Click "Save" to apply the generated content
• The welcome message becomes active immediately
• Test the bot to ensure proper functionality
• Monitor user interactions and adjust as needed

Best Practices for AI-Generated Welcome Messages

Content Strategy:

• Use business-specific context for better question generation
• Include your most common customer inquiries
• Balance promotional content with helpful information
• Keep language consistent with your brand voice

Technical Considerations:

• Test generated JavaScript functions thoroughly
• Ensure mobile responsiveness across devices
• Verify accessibility compliance
• Monitor loading performance with media elements

Ongoing Optimization:

• Regularly review question effectiveness through analytics
• Update seasonal or promotional content
• Refine based on user feedback and behavior
• A/B test different welcome message approaches

View tab

By default none are needed.

Style tab

div.modal {
  background-image: unset;
  background-color: #2095ae;
}
p {
  color: red;
}
fieldset.user-input-fieldset {
  background: red;
}
#template-container .carousel-card {
  background-color: yellow;
}
audio-recorder .mic-botIcon {
  fill: red;
}
.sv-header__background-color--accent .sv-header__description .sd-description {
  color: red !important;
}

Script tab

Note all integrations and even welcome message have there own script tab. Put general purpose script here.

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.