ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

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

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

埋め込みコードの取得

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

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

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

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

ステップ2:サイト全体にコードを追加する(推奨)

Tildaウェブサイトのすべてのページに一括でチャットボットを追加するには、サイト設定の方法を使用します:

  1. Tildaアカウントにログインし、サイトエディターを開きます
  2. 上部メニューのSite Settings(ギアアイコン)をクリックします
  3. 「More」セクションまでスクロールしてください
  4. 「HTML code for the HEAD section for all pages」を見つけてください
  5. 「Edit code」をクリックしてください
  6. テキストボックスにAsyntaiの埋め込みコードを貼り付けます
  7. 「保存」をクリックしてください
  8. 「公開」をクリックして変更を反映してください

ヒント: この方法により、サイトのすべてのページにチャットボットが自動的に追加されます。訪問者がサイト全体でチャットボットを利用できるようにする最も簡単な方法です。

代替方法:T123ブロックを使用する(特定のページ)

特定のページにのみチャットボットを追加したい場合は、TildaのT123 HTMLブロックを使用できます:

  1. Tildaエディターで編集したいページを開きます
  2. 「+ ブロックを追加」をクリックするか、「T」を押してください
  3. ブロックライブラリでその他 → T123(HTMLコードの埋め込み)に移動します
  4. または、検索バーで「T123」を検索してください
  5. T123ブロックをクリックしてページに追加します
  6. ブロック設定で、Asyntaiの埋め込みコードを貼り付けます
  7. ページ上の任意の場所にブロックを配置します(ウィジェットの表示位置には影響しません)
  8. 「公開」をクリックして変更を反映してください

注記: T123ブロックはHTML、JavaScript(<script>タグ内)、CSS(<style>タグ内)に対応しています。ブロックの視覚的な配置は関係ありません。チャットボットは設定どおり右下に表示されます。

ページ別Headセクション(上級者向け)

より細かい制御のために、個別のページheadセクションにコードを追加できます:

  1. Tildaエディターでページを開きます
  2. 「ページ設定」(歯車アイコン)をクリックしてください
  3. 「Additional」タブに移動してください
  4. "HTML code for the HEAD section"を見つけてください
  5. Asyntaiの埋め込みコードを貼り付けます
  6. 「保存」をクリックし、次に「公開」をクリックします

重要: T123ブロックまたはページ別の方法を使用する場合、チャットボットを表示したい各ページにコードを追加する必要があります。サイト全体にインストールするには、ステップ2で説明したサイト設定の方法を使用してください。

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

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

ウィジェットが表示されませんか? 変更を公開したことを確認してください(保存しただけではありません)。ブラウザのキャッシュをクリアするか、シークレットウィンドウでサイトを表示してみてください。Tildaの変更がライブサイトに反映されるまで少し時間がかかる場合があります。