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

Bloggerウェブサイト向けステップバイステップガイド

プラットフォーム:

ステップ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：HTML/JavaScriptガジェットを使用する（推奨）

チャットボットを追加する最も簡単な方法は、Bloggerの組み込みHTML/JavaScriptガジェットを使用することです：

blogger.comでBloggerダッシュボードにログインします
リストからブログを選択します
左サイドバーの「レイアウト」をクリックしてください
ウィジェットを追加するセクションを見つけます（フッターが推奨）
「ガジェットを追加」をクリックしてください
ガジェットリストから「HTML/JavaScript」を選択します
タイトルを空のままにします（必要に応じて追加可能）
コンテンツエリアにAsyntaiの埋め込みコードを貼り付けます
「保存」をクリックしてください
レイアウトページで「配置を保存」をクリックしてください

ヒント: フッターセクションにガジェットを追加すると、ブログのすべてのページで読み込まれます。ガジェットの配置場所に関係なく、チャットボットはフローティングボタンとして表示されます。

代替方法：テーマHTMLを編集する

テーマのHTMLに直接コードを追加することもできます：

左サイドバーの「テーマ」に移動してください
「カスタマイズ」の横にあるドロップダウンの矢印をクリックします
「HTMLを編集」を選択してください
Ctrl+F（Macの場合はCmd+F）を押して検索を開きます
</body>を検索します
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
「テーマを保存」をクリックしてください

重要: テーマHTMLを編集する際は、他のコードを削除したり変更したりしないよう注意してください。変更前に「バックアップ」をクリックしてテーマのバックアップを作成することを検討してください。

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

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

ウィジェットが表示されませんか？ Bloggerは変更の適用に数分かかる場合があります。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。ガジェットを追加した後に「保存」をクリックしたことを確認してください。

ドキュメント

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

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

ステップ2：HTML/JavaScriptガジェットを使用する（推奨）

代替方法：テーマHTMLを編集する

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