Navigation

Configuration Guide

Customize AI Anywhere to match your application's needs with comprehensive configuration options.

9 min read

Configuration is where AI Anywhere truly becomes yours. Each Helper has settings that define how it behaves and appears. Let's walk through each configurable component.

Helper Configuration

When creating or editing a Helper, you configure:

  • Helper Name: A descriptive name for your Helper (e.g., "Contact Form Helper", "Support Bot"). This helps you identify it in your dashboard.
  • Selector: The CSS selector that targets your text area (e.g., #message, .comment-box). This tells the Helper where to attach. Required when the Helper is set to Embed or Both; optional for Helper Page only.
  • Requirements & Keywords: Keywords or phrases that the Helper should consider when analyzing user input. These help guide the AI's suggestions.
  • Helper Answer: A sample text that demonstrates the quality and style you want users to achieve. The Helper uses this to understand context and provide relevant suggestions.

To configure your Helper, navigate to your dashboard and create a new Helper or edit an existing one. Here you can set the selector, Helper Answer, and all other Helper settings.

Button Configuration

The Helper Button is what users see and click. You can customize:

  • Button Label: The text that appears on the button (e.g., "Helper", "Get Help", "AI Assistant"). Choose something clear and inviting that matches your brand voice.

The button label is one of the first things users see, so choose something that clearly communicates what the Helper does and encourages users to click it.

Agent Configuration

The Agent settings control how the Helper communicates with users. Configure:

  • Language: Select the language for the Helper interface and suggestions. Options include English, Spanish, French, German, Chinese, Japanese, Arabic, Portuguese, Russian, Hindi, and others.

Theme Configuration

Theme settings control the visual appearance of your Helper:

  • Theme Colour: The primary color used for the Helper button. Use the color picker to select a hex color that matches your brand (e.g., #4B0082 for purple).
  • Theme Style: Choose from preset theme styles: Default, Minimal, Modern, Classic, Corporate, or Creative. Each theme has a different visual style for the Helper interface.

You can also click "Customize" to access advanced theming options where you can fine-tune button appearance, colors, and styles. For more details, see our Theming & Customization guide.

Example Configuration Workflow

Here's a typical configuration process:

  1. Create a Helper: In your dashboard, create a new Helper and give it a descriptive name (e.g., "Contact Form Helper").
  2. Set Selector: Enter the CSS selector for your text area (e.g., #message or .contact-form textarea).
  3. Configure Button: Set the label to "Helper" or customize it to match your brand.
  4. Set Button Color: Choose your brand color (e.g., #4B0082 for purple).
  5. Set Language: Choose the language (e.g., "English").
  6. Add Ideal Example: Paste a high-quality example text that shows what you want users to achieve.
  7. Add Keywords (Optional): Add relevant keywords that the Helper should consider.
  8. Copy Your Snippet: Once everything is configured, click "Generate Snippet" and copy the integration code to add to your site.
Note: All configuration changes save to your Helper. When you update settings, you can regenerate the snippet with your latest configuration. Changes take effect immediately on your live site after you update the code and refresh the page.