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

Dudaウェブサイトのためのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

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

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

ステップ2：サイト設定にコードを追加（推奨）

Dudaウェブサイトのすべてのページにチャットボットを追加する最も簡単な方法は、サイト設定を使用することです：

Dudaアカウントにログインし、ウェブサイトエディターを開きます
左サイドバーで「More」（3つのドットのアイコン）をクリックしてください
「設定」をクリックしてください
下にスクロールして「Head HTML」をクリックしてください
「Body End HTML」フィールドにAsyntaiの埋め込みコードを貼り付けてください
「保存」をクリックしてください
右上の「公開」をクリックして変更を反映してください

ヒント: Body End HTMLセクションにコードを追加すると、ページコンテンツの後にチャットボットが読み込まれるため、サイトの読み込み速度に影響しません。この方法により、サイトのすべてのページにチャットボットが自動的に追加されます。

代替方法1：HTMLウィジェット（特定のページ）

特定のページにのみチャットボットを追加したい場合は、HTMLウィジェットを使用します：

Dudaエディターで編集したいページを開きます
左サイドバーのウィジェットパネルで「HTML」を検索してください
HTMLウィジェットをページの列または行にドラッグアンドドロップします
ウィジェットをクリックして編集します
Asyntaiの埋め込みコードをコードフィールドに貼り付けます
「更新」をクリックしてください
「公開」をクリックして変更を反映してください

注記: HTMLウィジェットを使用すると、ページの任意の場所にカスタムコードを埋め込むことができます。ウィジェットの視覚的な配置はチャットボットの表示位置に影響しません - 設定通り右下に表示されます。

代替方法2：デベロッパーモード（上級者向け）

上級者向けに、デベロッパーモードを使用してHTMLに直接コードを追加できます：

Dudaエディターの上部バーにあるデベロッパーモードアイコンをクリックします
「Site HTML/CSS」をクリックして選択肢を展開します
ファイルリストから「body-end.html」をクリックします
ファイルの最終行までスクロールします
新しい行にAsyntaiの埋め込みコードを貼り付けます
「保存」をクリックしてください
「完了」をクリックして開発者モードを終了してください
「公開」をクリックして変更をデプロイしてください

重要: デベロッパーモードを使用すると、サイトのHTMLとCSSに直接アクセスできます。サイトの機能を壊さないように、body-end.htmlファイルの末尾にのみコードを追加してください。公開前に必ず変更をテストしてください。

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

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