Asyntai AIチャットボットをGhostに追加する方法

Ghost CMSウェブサイト向けのステップバイステップガイド

プラットフォーム:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：コードインジェクションの使用（推奨）

Ghostにはコードインジェクション機能が組み込まれており、カスタムスクリプトの追加が非常に簡単です：

Ghost管理パネルにログインします
左下の歯車アイコン（設定）をクリックします
「詳細」セクションまでスクロールしてください
「コードインジェクション」をクリックしてください
「サイトフッター」セクションにAsyntaiの埋め込みコードを貼り付けてください
右上の「保存」をクリックしてください

ヒント: JavaScriptをサイトヘッダーではなくサイトフッターに追加することで、ページコンテンツの後に読み込まれるようになります。これはチャットウィジェットに推奨されており、ページの読み込み速度に影響しません。

代替方法：ページ固有のコードインジェクション

特定のページや投稿にのみチャットボットを表示したい場合：

チャットボットを追加したい投稿またはページを開きます
右上の設定アイコン（歯車）をクリックします
「コードインジェクション」までスクロールしてください
セクションを展開し、Asyntaiの埋め込みコードを「投稿フッター」フィールドに貼り付けてください
フィールドの外をクリックして保存し、投稿を公開/更新します

注記: ページ固有のコードインジェクションは、サイト全体ではなく特定のページにのみチャットボットを表示したい場合に便利です。

代替方法：テーマファイルの編集（セルフホスティングの場合）

Ghostをセルフホスティングしていて、テーマファイルを直接編集する場合：

FTPまたはファイルマネージャーを使用してGhostのインストールファイルにアクセスします
テーマフォルダに移動します：content/themes/your-theme/
default.hbsファイル（メインレイアウトファイル）を開きます
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します
Ghostを再起動するか、キャッシュをクリアします

重要: テーマファイルの直接編集は、必要な場合を除き推奨されません。テーマの更新時に変更が上書きされる可能性があります。コードインジェクション方式はテーマの更新後も維持されるため推奨されます。

ステップ3：インストールの確認

変更を保存した後、新しいブラウザタブまたはシークレットウィンドウでGhostサイトにアクセスしてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開き、動作することを確認してください。