クイックスタート
2つのステップで、AI Anywhereをあなたのサイトで動作させましょう。
9分で読めます
ウェブサイトにインテリジェントなテキスト支援を追加する準備はできましたか？ヘルパーを使用する方法は2つあります。このガイドはサイトにヘルパーを埋め込むことに焦点を当てています。ヘルパーページオプションについては以下に要約されています。
2つのオプション
- ヘルパーページ（コード不要）： すべてのヘルパーは、すぐに共有可能なヘルパーページのリンクを取得します。ダッシュボードでヘルパーを開き（ヘルパー名をクリックするか、編集をクリック）、ヘルパーの編集または詳細ページで「ヘルパーページ」ボタンをクリックして、新しいタブでページを開くか、リンクをコピーして共有します。スニペットや統合は必要ありません。
- サイトに埋め込む： 統合スニペットをウェブサイトに追加して、ヘルパーボタンがテキストエリアの横に表示されるようにします。以下の手順に従ってください。
ヘルパーページを起動する場所： ダッシュボード → ヘルパー → ヘルパーを開く（名前をクリックまたは編集）→「ヘルパーページ」ボタンをクリックします。「ヘルパーページを共有」を使用してリンクをコピーまたは送信することもできます。
1
統合コードを取得
AI Anywhereダッシュボードでヘルパーを作成した後、すぐに使用できるスニペットを生成できます。このスニペットには、サイトをAI Anywhereに接続するために必要なすべてが含まれています。
見つける場所： Navigate to your Helper settings in the dashboard and click "Generate Snippet". You'll see two separate code panels - copy both the script tag and the anchor span code.
スニペットは2つの部分で構成されています：
<!-- 1. ヘルパースクリプトを読み込む -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<!-- 2. ヘルパーの動作方法 -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>2
ウェブサイトに追加
ウェブサイトのHTMLファイル（またはテンプレート）を開いて、次を見つけてください <head> セクション。スニペットを閉じタグの直前に貼り付けてください </head> タグ。
ベストプラクティス： スニペットを<head>セクションの上部近くに配置しますが、メタタグの後に配置してください。これにより、ヘルパースクリプトが早期にロードされ、ページがレンダリングされるときに準備が整います。
こちらは完全なページ設定の例です：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のウェブサイト</title>
<!-- ヘルパースクリプトの埋め込み -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
<form>
<textarea id="notes" placeholder="あなたのメッセージ："></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>
</body>
</html>概要
You've successfully integrated AI Anywhere into your website! Here's what you've accomplished:
- ステップ 1: AI Anywhere ダッシュボードからヘルパーのスニペットをコピーしました
- ステップ 2: Pasted the snippet into your site's
<head>セクションとフォームフィールドにヘルパーアンカーを追加しました
保存してページを更新すると、テキストエリアや入力フィールドの横にヘルパーボタンが表示されるはずです。ヘルパーは、設定された理想的な例やキーワードに基づいてインテリジェントな支援を提供します。
次は何をしますか： ヘルパーの外観と動作をカスタマイズし、特定のフォームフィールドをターゲットにし、高度な設定オプションを探ることができます。
次のステップ
- ヘルパーの外観と動作をカスタマイズする 設定 セクション
- 特定のフォームフィールドをターゲットにするために使用する セレクター
- 詳細なオプションについては、当社の 埋め込み & スニペットパラメータ ガイド
