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

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

プラットフォーム:

ステップ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：サイト設定からコードを追加する（全ページ）

Webflowサイトのすべてのページに一括でチャットボットを追加するには：

Webflowアカウントにログインし、プロジェクトを選択します
左サイドバーの歯車アイコン（サイト設定）をクリックします
設定メニューで「Custom Code」をクリックします
「Footer Code」セクション（</body>タグの前）までスクロールします
Asyntaiの埋め込みコードを貼り付けます
「Save Changes」をクリックします
変更を反映するためにサイトを公開します

ヒント: フッターセクションにコードを追加すると、閉じタグ</body>の直前に配置されます。これはチャットウィジェットに推奨される方法であり、ページの読み込みを遅くすることはありません。

代替方法：ページ固有のカスタムコード

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

Webflowデザイナーでプロジェクトを開きます
左サイドバーのページパネル（フォルダアイコン）をクリックします
編集したいページにカーソルを合わせ、歯車アイコンをクリックします
「Custom Code」までスクロールします
Asyntaiの埋め込みコードを「Before </body> tag」セクションに貼り付けます
「保存」をクリックしてください
サイトを公開します

代替方法：埋め込み要素を使用する

ページ上の任意の場所に埋め込み要素を使用してチャットボットを追加することもできます：

Webflowデザイナーでプロジェクトを開きます
「+」ボタンをクリックして追加パネルを開きます
「Embed」を検索するか、コンポーネントから見つけます
埋め込み要素をページにドラッグします
コードエディタにAsyntai埋め込みコードを貼り付けてください
「保存して閉じる」をクリックしてください
サイトを公開します

重要: 埋め込み要素を使用する場合、チャットボットを表示したい各ページに追加する必要があります。サイト全体にインストールするには、上記のサイト設定の方法を使用してください。

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

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

ウィジェットが表示されませんか？ コードを追加した後にサイトを公開したことを確認してください。カスタムコードはライブサイトにのみ表示され、デザイナープレビューには表示されません。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。

AI 検索バーを追加する

AI 検索バーは独自のコードを持つ別のウィジェットです。チャットと一緒に追加しても、単独で追加してもかまいません。Standard 以上のプランが必要で、下位プランではバーは表示されますが結果は返りません。

script タグに data-replace 属性を追加すると、テーマにある既存の検索バーと置き換わります。 Site Settings、Custom Code、Footer に追加してください。チャット用コードと同じ場所で、閉じる body タグの直前に入ります。

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

AI 検索バーの詳しいガイドを読む