Skip to main content

Next steps

6. Create Brand Guidelines (AI Brand Info)​

  • Why This Matters: Consistent branding increases user trust and ensures every web control (Bot, Search, Knowledge Box) matches your visual identity. Using AI Brand Creation saves time by auto‑generating colors, typography, tone, and structured brand JSON from just a few images.
  • Detailed Steps:
    1. Go to AI Settings → Brand Guidelines.
    2. Click Generate Brand.
    3. Upload 2–5 brand images (homepage, logo, UI elements, marketing graphic).
    4. Click Generate Brand to start AI analysis (30–60s).
    5. Review the populated fields: brand name, colors, typography, tone, imagery, iconography, logo usage JSON.
    6. Adjust any field manually if needed (e.g., refine tagline or primary color).
    7. Click Save Brand Guidelines.
  • Outcome: A saved brand profile the platform can reuse for theme generation and future control configuration.

Complete guide: AI Brand Creation

  • Why This Matters: A bot configuration links your agent to an actual user interface. You can create multiple configurations (e.g., Default, Support, Sales) with different themes and welcome experiences.
  • Detailed Steps:
    1. Open your Agent, select Controls → Bot.
    2. Click Create Configuration (or edit an existing one).
    3. Provide:
      • Name (e.g., “Default” or “Sales Assistant”).
      • Description (purpose—internal note only).
    4. Select an initial Theme (see next section for Custom themes).
    5. (Optional) Adjust Display tab: expanded on load, width/height.
    6. (Optional) Set Settings tab fields (Bot Title / avatar / logo).
    7. Open Info tab to prepare Welcome & Privacy content (see Section 9 below after theming & deployment).
  • Outcome: A reusable configuration representing how this agent appears and behaves in the UI.

Reference: Bot Configuration

8. Select or Generate a Theme​

  • Why This Matters: Themes control visual consistency (colors, gradients, typography). If you generated Brand Guidelines (Step 6), selecting Custom lets the system auto‑build a matching theme—no manual palette tweaking required.
  • Detailed Steps:
    1. In the Bot Configuration, open the Theme dropdown.
    2. Choose:
      • Default Theme: Prebuilt standard palette.
      • Custom: Uses saved Brand Guidelines to auto‑generate tokens (primary / secondary / accent colors, font family, tone alignment). If no guidelines exist yet, a blank customizable template is created.
    3. Save the configuration after selecting Custom to apply generated variables.
    4. (Optional) Open Style tab to add advanced overrides (CSS variables, background, gradients). Prefer variables over deep selectors for forward compatibility.
  • Outcome: A theme-aligned control with minimal manual styling effort.

Tip: Generate Brand Guidelines before choosing Custom for best results.

9. Create the Welcome & Privacy Experience​

  • Why This Matters: The Welcome Message sets initial tone and drives user engagement (button prompts, quick question suggestions). A clear Privacy Statement builds trust and transparency.
  • Detailed Steps:
    1. In the Bot Configuration, go to the Info tab.
    2. Author or paste your Welcome Message (HTML allowed: buttons, structured layout, branded headings).
    3. (Optional) Use AI Create Welcome Page (Generate Welcome) to auto-build HTML + suggested questions based on your domain and content.
    4. Add quick action buttons that call ai12zBot.sendMessage('Your prompt').
    5. Add a concise Privacy Statement with a link to your full policy.
    6. Preview, then Save.
  • Outcome: A polished first-interaction flow that increases relevance and click-through.

Reference sections: Welcome & Privacy in Bot Configuration

10. Deploy Web Controls to a Web Page​

  • Why This Matters: Deployment makes your agent usable by real users and provides live feedback to refine content and prompts.
  • Detailed Steps:
    1. Navigate to Web Controls. Web Controls
    2. Copy the embed snippet for the Bot (or Search / Knowledge Box).
    3. Paste before the closing </body> tag of your site (staging first recommended).
    4. Confirm the script loads (no 404 network errors) and the element renders.
    5. Test initial load + welcome message + a few question flows.
    6. (Optional) Add CSP headers for production (allow ai12z CDN domains).
  • Outcome: A live interactive control ready for user sessions.

11. Categorize Content​

  • Why This Matters: Categories improve the organization of content, making the agent more efficient at retrieving relevant data.
  • Detailed Steps:
    • Auto generate categories based on your content and the purpose of the agent:
      • Business functions (e.g., Sales, Support, FAQs).
      • Content type (e.g., Technical Documents, Tutorials).
    • Assign categories to uploaded content manually or use automatic tagging.
    • Test categorization by enabling "Category Filter" in the Test Drive section.
    • Adjust relevance scores to control how strict the filtering is.
  • Outcome: Users receive more focused and relevant responses.

12. Enhancing ReAct - Reasoning and Acting​

  • Why This Matters: ReAct allows your agent to combine reasoning with action, making it more versatile and capable. That is the ReAct LLM knows about all the out of the box agents, custom agents and Forms available to use as a tool to accomplish an Action. The reasoning engine has the history of everything it has done for this sessione.
  • Detailed Steps:
    • ReAct System Promt, is created when creating an Agent, the properties of the Agent Creation dialog, specifically the agent purpose, the Organization name and the Organization URL are used to first create Pgent Organization Information. Next from this information the AI creates all the prompts.
    • Customize the system prompt:
      • AI creates the system prompt. You should update for your particular use case, for example to add Calls To Actions.
    • Enable necessary agents/tools for your agent
    • Understanding the workflow
    • Add Custom Integrations
  • Outcome: An intelligent agent capable of not just answering but acting on queries.

13. Set Up Forms​

  • Why This Matters: Forms allow you to collect structured data, which is essential for workflows like lead generation or service requests.
  • Detailed Steps:
    • Use the form builder to design custom forms.
    • Add dynamic controls like dropdowns or date pickers linked to APIs.
    • Integrate forms into the web control for seamless interaction.
    • Optional see how to create a form dynamically as a custom agent
  • Outcome: A richer, more interactive user experience.

14. Set Up Image AI​

  • Why This Matters: Image AI adds visual context to your agent, enhancing user interactions with relevant images and descriptions.

  • Detailed Steps:

    • Enable "Image Match AI" When answer is created, it will attempt to match an image to the Answer
    • Enable "Image Description AI" When content is ingested, Vision AI will analyze the image, page content and alt text and recreate the alt text.
    • Select image quality (Low, Auto, High) based on your needs.
    • Complete Guide for Setting Up Image AI

  • Outcome: an Agent experience enriched with text and images for more engaging interactions.

15. Test, Monitor, and Optimize​

  • Why This Matters: Continuous testing and optimization ensure the agent remains effective as user needs evolve.
  • Detailed Steps:
    • Use analytics to monitor user interactions.
    • Review Data tab, - see questions asked, user feedback to identify areas of improvement.
    • Review logs - Validate that the workflow is what is expected.
    • Regularly update content, categories, and configurations.
  • Outcome: A continuously improving agent that meets user expectations.

16. Create Custom Integrations​

  • Why This Matters: Custom Integrations let you connect to your digital systems, giving the agent context, also enables client user controls such as Carousel slider or list, Template HTML widgets, even the ability to process source data with Python.
  • Detailed Steps:
    • Create a Custom Integrations - Name and Description, so the LLM knows when to call it.
    • Select Data Source: None, RestAPI, GraphQL, MCP
    • Create the LLM parameters
    • Test the endpoint in the Agent
    • Select how to Handle the data response: Send to the LLM, or send the client with a template to visualize the data, such as a Carousel or Template (HTML widget) or Form
    • Ability to use JSONata, both for posting data to an endpoint, and filterting data from a source
    • Enable applying Custom Python code to process data
  • Outcome:

By breaking down each step into detailed actions, you ensure a clear understanding of the process, reducing errors and streamlining implementation.