Installation Guide

Installing AI Anywhere on your website is straightforward. You can use your Helper in two ways: the Helper Page (no code: shareable link, use from any browser) or embed the Helper Button on your site. This guide covers the embed path.

Two Ways to Use Your Helper

• Helper Page (no code): Get a shareable link from your dashboard. No code, no integration, no snippet. Open in any browser or share with others; use from any device with no deployment.
• Helper Button (embed): Add the script to your <head> and the Helper anchor next to your text area. The Helper button appears on your site next to the field.

You can also set a Helper to "Both": it will be available as a shareable Helper Page link and embeddable on your site. For embed (or Both), you must create or select a Site (and its group) in the dashboard; the snippet uses that site's ID. The default Helper Page site cannot be used for embedding.

Sites and embedding

To embed a Helper on your website, you need a Site in your dashboard (Sites → Add site, or select an existing one). Each new site gets a default group. Use that site's ID in the script tag. If you only use the Helper Page (shareable link), you do not need to create a separate site.

Prerequisites

Before you begin, make sure you have:

• An active AI Anywhere account: Sign up at ai-anywhere.ai if you haven't already.
• A created Helper: In your dashboard, create a new Helper. Configure the selector and Helper Answer.

How the Helper Works

The Helper widget follows a simple three-step process:

1. Reads: When a user clicks the Helper button, it reads the current text in the associated text area or input field.
2. Compares: The text is compared against your configured Helper Answer and keywords to identify areas for improvement.
3. Suggests: The Helper provides contextual suggestions to help users write better, more complete content that matches your Helper Answer.

Embedding the Helper Script

To add AI Anywhere to your webpage, you need to:

1. Load the Helper script in your <head> section
2. Add the Helper anchor span next to your text area or form field

Step 1: Load the Script

Add the script tag to your HTML's <head> section with your site ID:

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

Step 2: Add the Helper Anchor

Add the Helper anchor span next to your text area or form field where you want the Helper to appear:

<span data-helper-anchor data-helper-token="your-helper-token"></span>

Complete Example

Here's a complete example showing both parts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Contact Form</title>
  
  <!-- AI Anywhere Helper Script -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <form>
    <textarea id="message" placeholder="Your message"></textarea>
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </form>
</body>
</html>

Understanding the Configuration

Let's break down each part:

• data-site: Your site ID that identifies your account. This is shared across all pages on your site.
• data-helper-anchor: This attribute marks where the Helper button should appear.
• data-helper-token: The unique token for this specific Helper configuration. Each Helper has its own token that you get from your dashboard.

Visual Example

Here's what users will see when the Helper is active:

Testing and Verification

After adding your snippet to your site, follow these steps to verify everything is working:

1. Refresh your page: Save your HTML file and refresh your browser (hard refresh with Ctrl+Shift+R or Cmd+Shift+R to clear cache).
2. Look for the Helper button: You should see the Helper button appear next to any <textarea> or <input type="text"> elements on your page.
3. Test the Helper: Enter some text in your form field, then click the Helper button. The Helper should analyze your text and provide suggestions.
4. Check the console: Open your browser's developer console (F12) and ensure there are no JavaScript errors.

Common Issues & Troubleshooting

Frequently Asked Questions

Does it work everywhere?

AI Anywhere works with standard HTML form elements including:

• <textarea> elements
• <input type="text"> fields
• <input type="email"> fields
• Contenteditable divs (with additional configuration)

It works on any website regardless of framework (React, Vue, Angular, plain HTML, WordPress, etc.) as long as you can add the script tag to your <head> section.

Can I hide the button?

Yes, you can hide the Helper button using CSS if needed:

However, hiding the button means users won't be able to access the Helper. Consider making it visible only on specific pages or for specific user roles instead.

Can I use multiple Helpers on one page?

Yes! You can have multiple Helper instances on a single page, each with different configurations. Simply add multiple anchor spans with different Helper tokens:

<!-- First Helper for message field -->
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="message-helper-token"></span>

<!-- Second Helper for notes field -->
<textarea id="notes"></textarea>
<span data-helper-anchor data-helper-token="notes-helper-token"></span>

Each Helper will independently attach to its specified location.