AstroAPI

Appearance

ウェブサイトへのウィジェットの追加 ​

このガイドでは、AstroAPI のウィジェットやチャットボットをウェブサイトに追加する方法を説明します。プログラミングの知識は必要ありません。ダッシュボードからコードスニペットを 1 つコピーして、お使いのウェブサイトビルダーに貼り付けるだけです。

WordPress、Wix、Squarespace、Shopify、Webflow 向けのステップバイステップの手順に加え、あらゆるウェブサイトで使える汎用的な方法もご紹介します。

技術的なウィジェット API をお探しですか？

このガイドは、用意された埋め込みコードをサイトに貼り付ける方法について説明しています。API 経由でウィジェットを作成・設定する方法については、埋め込みウィジェットをご覧ください。チャットボット API については、AIチャットボットをご覧ください。

ステップ 1: 埋め込みコードを取得する ​

  1. AstroAPI ダッシュボードにログインします。
  2. Widgets（AI チャットボットの場合は Chatbots）に移動し、埋め込みたいウィジェットを開きます。
  3. Preview タブで、意図したとおりの見た目になっているか確認します。色・フォント・レイアウトはコードではなく、このダッシュボードで設定されるため、後からウェブサイトに触れることなくウィジェットのスタイルを変更できます。
  4. Embed タブを開き、埋め込みコードをコピーします。コードは次のような形式です：
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

チャットボットの埋め込みコードは、<div> のない単一の script タグです：

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

必要なコードはこれだけです。以降のセクションでは、プラットフォームごとに貼り付ける場所を説明します。

API キーを安全に保管してください

埋め込みコードには API キーが含まれています。ウィジェットまたはチャットボットの権限のみを持つキーを使用し、メインの API キーは決して使用しないでください。制限付きキーはダッシュボードの API Keys で作成でき、Chatbots → Security でチャットボットをご自身のドメインのみに制限できます。

WordPress ​

方法 A: Custom HTML ブロック（推奨） ​

  1. ウィジェットを表示したいページまたは投稿を編集します。
  2. + ボタンをクリックしてブロックを追加し、Custom HTML を検索します。
  3. 埋め込みコードをブロックに貼り付けます。
  4. Preview をクリックして結果を確認し、Update または Publish をクリックします。

方法 B: サイト全体（チャットボット向け） ​

すべてのページにチャットボットを表示するには：

  1. WPCode のような軽量なヘッダー/フッタープラグインをインストールするか、テーマの「カスタムスクリプト」オプションを使用します。テーマファイルの編集は不要です。
  2. チャットボットの埋め込みコードを Footer セクション（</body> の前）に貼り付けます。
  3. 保存します。これで、すべてのページにチャットボットのバブルが表示されます。

Elementor

Elementor をお使いですか？ページに HTML ウィジェットを追加し、そこに埋め込みコードを貼り付けてください。

Wix ​

  1. Wix エディタで、左サイドバーの Add Elements（+ ボタン）をクリックします。
  2. Embed Code → Embed HTML を選択します。
  3. Enter Code をクリックし、埋め込みコードを貼り付けます。
  4. Apply をクリックし、ウィジェットに合わせてフレームをドラッグ／リサイズします。
  5. Publish をクリックします。

Wix でのチャットボット

Wix は埋め込み HTML をフレーム内にレンダリングするため、チャットボットのバブルがそのフレーム内に閉じ込められてしまいます。サイト全体にチャットボットを表示するには、代わりに Settings → Custom Code を使用してください（有料の Wix プランが必要です）。チャットボットの埋め込みコードを貼り付け、All pages で読み込むように設定し、Body - end に配置します。

Squarespace ​

  1. ウィジェットを表示したいページを編集します。
  2. 挿入ポイントをクリックし、Code ブロックを選択します。
  3. 埋め込みコードを貼り付けます（デフォルトの HTML モードのままにしてください）。
  4. ページを保存します。

サイト全体にチャットボットを表示するには、Settings → Advanced → Code Injection に移動し、チャットボットの埋め込みコードを Footer フィールドに貼り付けます。

WARNING

コードブロックとコードインジェクションには、Squarespace の Business プラン以上が必要です。

Shopify ​

  1. Shopify 管理画面で、Online Store → Themes に移動します。
  2. 現在のテーマの Customize をクリックします。
  3. ウィジェットを表示したいページに、Custom Liquid セクション（テーマによっては HTML ブロック）を追加します。
  4. 埋め込みコードを貼り付け、Save をクリックします。

サイト全体にチャットボットを表示するには：

  1. Online Store → Themes → ⋯ → Edit code に移動します。
  2. layout/theme.liquid を開きます。
  3. チャットボットの埋め込みコードを、閉じタグ </body> の直前に貼り付けます。
  4. Save をクリックします。

Webflow ​

  1. Webflow デザイナーで、Embed 要素（Add Elements → Components 内）をページにドラッグします。
  2. コードエディタに埋め込みコードを貼り付け、Save & Close をクリックします。
  3. サイトを公開します。カスタムコードは公開されたサイトでのみ動作し、デザイナーのプレビュー内では動作しません。

サイト全体にチャットボットを表示するには、Site Settings → Custom Code に移動し、チャットボットの埋め込みコードを Footer Code フィールドに貼り付けます。

WARNING

Webflow のカスタムコードには有料のサイトプランが必要です。

その他のウェブサイト ​

ご自身（またはウェブ開発者の方）が HTML を直接管理している場合：

  1. ページの HTML ファイルまたはテンプレートを開きます。
  2. ページ内のウィジェットを表示したい位置に、ウィジェットの埋め込みコードを貼り付けます。
  3. チャットボットの場合は、埋め込みコードを閉じタグ </body> の直前に貼り付けます。チャットボットはフローティングバブルとして表示されるため、HTML 内での位置は問題になりません。

トラブルシューティング ​

ウィジェットの領域が空のままです。 埋め込みコードの両方の部分、つまり <script> タグとその下の <div> が貼り付けられているか確認してください。ページビルダーによっては、どちらか一方が削除されてしまうことがあります。

「Invalid API key」と表示される、または何も読み込まれません。 埋め込みコード内の API キーが失効しているか、必要な権限が不足している可能性があります。ダッシュボードの Embed タブから新しい埋め込みコードをコピーしてください。

公開したサイトにチャットボットが表示されません。 チャットボットを特定のドメインに制限している場合（Chatbots → Security → Allowed domains）、ウェブサイトのドメインがリストに含まれているか確認してください。サイトが www. 付きの URL を使用している場合は、そのバリエーションも含めてください。

ウィジェットの見た目がプレビューと異なります。 スタイルはダッシュボードの設定に基づいており、ウィジェットと一緒に読み込まれます。最近デザインを変更した場合は、ブラウザキャッシュを回避するためにページをハードリフレッシュ（Ctrl+Shift+R / Cmd+Shift+R）してください。

デスクトップでは動作しますが、アプリの WebView では動作しません。 埋め込みコードは astroapi.cloud からの JavaScript を実行する必要があります。アプリまたはサイトのセキュリティポリシー（CSP）が、そのドメインからのスクリプトを許可しているか確認してください。

次のステップ ​

AstroAPI Documentation

Copyright © 2026 AstroAPI