Configuration Guide
Customize AI Anywhere to match your application's needs with comprehensive configuration options.
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.,
#4B0082for 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:
- Create a Helper: In your dashboard, create a new Helper and give it a descriptive name (e.g., "Contact Form Helper").
- Set Selector: Enter the CSS selector for your text area (e.g.,
#messageor.contact-form textarea). - Configure Button: Set the label to "Helper" or customize it to match your brand.
- Set Button Color: Choose your brand color (e.g.,
#4B0082for purple). - Set Language: Choose the language (e.g., "English").
- Add Ideal Example: Paste a high-quality example text that shows what you want users to achieve.
- Add Keywords (Optional): Add relevant keywords that the Helper should consider.
- Copy Your Snippet: Once everything is configured, click "Generate Snippet" and copy the integration code to add to your site.