Complete Tutorial

First, you need to sign up for an AI Anywhere account.

1. Go to the AI Anywhere homepage
2. Click the "Get Started" button in the header
3. Sign up using your preferred social account (Google, GitHub, etc.)
4. You'll be automatically logged into your dashboard

Now let's create a Helper that will assist users with writing contact form messages.

1. In your dashboard, click "New Helper"
2. Give your Helper a descriptive name, such as "Contact Form Helper"
3. Select the site where this Helper will be used
4. Click "Save Helper"

Configure Your Helper

After creating the Helper, you'll need to configure it:

• Helper Answer: Enter a well-written example of what you want users to write. For a contact form, this might be a complete, professional message that includes all necessary information. The example should be complete with mock names, specific details, and realistic content (e.g., "Hello, I'm John Smith writing to inquire about your web development services. I'm particularly interested in building an e-commerce platform for my business. Could you please provide more information about your pricing and timeline? Thank you for your time.").
• Keywords and/or Rules: Add keywords or rules that are important for your use case (e.g., "contact", "inquiry", "question", "support").
• Button Styling: Customize the Helper button's appearance (color, text) to match your site's design.

Now you need to get the code snippets that will integrate the Helper into your website.

1. In your Helper settings, click the "Generate Snippet" button
2. You'll see two code snippets:
   • Script tag: Contains your site ID
   • Anchor span: Contains your Helper token
3. Copy both snippets - you'll need them in the next step

Your snippets will look like this:

<!-- Script tag (goes in <head>) -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- Anchor span (goes next to your text area) -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>

Now let's add the Helper script to your website's HTML.

1. Open your HTML file (or template file if using a framework)
2. Find the <head> section
3. Paste the script tag before the closing </head> tag

Here's what it should look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  
  <!-- AI Anywhere Helper Script -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>

Now add the anchor span next to your text area where you want the Helper button to appear.

1. Find your contact form (or the form where you want the Helper)
2. Locate the text area where users will type their message
3. Add the anchor span right after the text area (or in a nearby location)

Here's a complete example of a contact form with the Helper:

<form id="contact-form">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="6" required></textarea>
    <!-- Helper anchor - button will appear here -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Now let's verify that everything is working correctly.

1. Save your HTML file
2. Open your website in a web browser
3. Navigate to the page with your contact form
4. Look for the Helper button next to your text area

What to Check

• The Helper button appears next to your text area
• The button has the correct styling (color, text, size) that you configured
• When you click the button, the Helper interface opens
• When you type text and click the Helper button, it provides suggestions

Troubleshooting

If the Helper button doesn't appear:

• Check your browser's developer console (F12) for any JavaScript errors
• Verify that the script tag is correctly placed in the <head> section
• Ensure the anchor span is present and contains the correct Helper token
• Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to clear cached files
• Check that your site ID and Helper token are correct

Now that your Helper is working, you can customize it to better match your needs.

What You Can Customize

• Button Appearance: Change the color and text of the Helper button.
• Helper Answer: Update the example to better reflect what you want users to write
• Keywords: Add or remove keywords to improve suggestion accuracy
• Multiple Helpers: Create additional Helpers for different forms or text areas

To customize:

1. Go back to your dashboard
2. Select "Helpers", then select the specific Helper you want to edit
3. Click the "Edit" button
4. Make your changes
5. Save your changes

Once you've tested everything locally, it's time to deploy to your production website.

Pre-Deployment Checklist

• Tested the Helper on your local/staging environment
• Verified the Helper button appears and works correctly
• Tested with different browsers (Chrome, Firefox, Safari, Edge)
• Tested on mobile devices
• Verified the Helper suggestions are helpful and accurate

Deployment Steps

1. Upload your updated HTML files to your web server
2. Verify the script tag is in the <head> of all pages where you want the Helper
3. Verify the anchor spans are placed correctly next to your text areas
4. Test the Helper on your live website
5. Monitor for any issues or errors