インストールガイド

AI Anywhereをウェブサイトにインストールするのは簡単です。Helperは2つの方法で使用できます：Helperページ（コード不要：共有可能なリンク、どのブラウザからでも使用可能）またはサイトにHelperボタンを埋め込む。このガイドは埋め込みパスをカバーしています。

ヘルパーを使用する2つの方法

• ヘルパーページ（コード不要）： ダッシュボードから共有可能なリンクを取得します。コード不要、統合不要、スニペット不要。どのブラウザでも開くことができ、他の人と共有できます。デプロイメントなしでどのデバイスからでも使用できます。
• ヘルパーボタン（埋め込み）： スクリプトを追加 <head> テキストエリアの横にヘルパーアンカーを追加します。ヘルパーボタンがフィールドの横にサイトに表示されます。

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.

サイトと埋め込み

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.

前提条件

始める前に、以下を確認してください：

• 有効なAI Anywhereアカウント： 登録はこちら ai-anywhere.ai まだお持ちでない場合は\
• 作成されたヘルパー： ダッシュボードで新しいヘルパーを作成します。セレクターとヘルパーアンサーを設定してください。

ヘルパーの動作方法

ヘルパーウィジェットは、簡単な3ステップのプロセスに従います：

1. 読み取り： ユーザーがヘルパーボタンをクリックすると、関連するテキストエリアまたは入力フィールドの現在のテキストを読み取ります。
2. 比較： テキストは、設定されたヘルパーアンサーとキーワードと比較され、改善が必要な領域を特定します。
3. 提案： ヘルパーは、ユーザーがヘルパーアンサーに合った、より良く、より完全なコンテンツを書くのを助けるための文脈的な提案を提供します。

ヘルパースクリプトの埋め込み

AI Anywhereをウェブページに追加するには、以下が必要です：

1. ヘルパースクリプトを読み込む <head> セクション
2. テキストエリアまたはフォームフィールドの隣にHelperアンカースパンを追加します

ステップ1：スクリプトを読み込む

スクリプトタグをHTMLに追加\ <head> サイトに貼り付け

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

ステップ2：ヘルパーアンカーを追加する

Helperを表示したいテキストエリアまたはフォームフィールドの隣にHelperアンカースパンを追加します：

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

完全な例

こちらは両方の部分を示す完全な例です：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form 7用）</title>
  
  <!-- ヘルパースクリプトの埋め込み -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <form>
    <textarea id="message" placeholder="あなたのメッセージ："></textarea>
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </form>
</body>
</html>

設定の理解

各設定オプションを分解してみましょう：

• data-site: アカウントを識別するサイトID。これはサイト内のすべてのページで共有されます。
• data-helper-anchor: この属性は、ヘルパーボタンが表示される位置をマークします。
• data-helper-token: この特定のヘルパー設定を識別する一意のトークン。各ヘルパーには、ダッシュボードから取得できる独自のトークンがあります。

ビジュアル例

ヘルパーがアクティブなときにユーザーが見るものはこちらです：

テストと検証

スニペットをサイトに追加した後、すべてが正常に動作していることを確認するために次の手順に従ってください：

1. ページを更新： HTMLファイルを保存し、ブラウザを更新してください（キャッシュをクリアするにはCtrl+Shift+RまたはCmd+Shift+Rでハードリフレッシュ）。
2. ヘルパーボタンを探してください： ヘルパーボタンが次の要素の横に表示されるはずです： <textarea> または <input type="text"> ページ上の要素。
3. ヘルパーをテスト： フォームフィールドにテキストを入力し、ヘルパーボタンをクリックしてください。ヘルパーがテキストを分析し、提案を提供します。
4. コンソールを確認： ブラウザのコンソール（F12）を確認して、エラーがないことを確認してください

一般的な問題とトラブルシューティング

よくある質問

どこでも動作しますか？

AI Anywhereは、標準のHTMLフォーム要素と共に動作します：

• <textarea> 要素
• <input type="text"> フィールド
• <input type="email"> フィールド
• コンテンツ編集可能なdiv（追加設定あり）

スクリプトタグを追加できる限り、フレームワーク（React、Vue、Angular、プレーンHTML、WordPressなど）に関係なく、どのウェブサイトでも動作します。 <head> セクションに追加するだけです。

ボタンを隠すことはできますか？

はい、必要に応じてCSSを使用してヘルパーボタンを隠すことができます：

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.

1ページに複数のヘルパーを使用できますか？

はい！1つのページに複数のHelperインスタンスを持つことができ、それぞれ異なる設定が可能です。異なるHelperトークンを持つ複数のアンカースパンを追加するだけです：

<!-- メッセージフィールド用の最初のヘルパー -->
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="message-helper-token"></span>

<!-- メモフィールド用の2番目のヘルパー -->
<textarea id="notes"></textarea>
<span data-helper-anchor data-helper-token="notes-helper-token"></span>

各ヘルパーは指定された場所に独立して接続されます。