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

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

プラットフォーム:

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

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

<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：Custom Codeを使用してコードを追加する（推奨）

Custom Codeを使用すると、すべてのページに一度にチャットボットを追加できます。Wixでは、公開済みでドメインが接続されたサイトでこの機能を利用でき、そのためにはPremiumプランが必要です：

Wixアカウントにログインし、サイトのダッシュボードに移動します
左サイドバーの設定をクリックします
Development & integrationsセクションでCustom Codeをクリックします
右上の「+ Add Custom Code」をクリックします
テキストボックスにAsyntaiの埋め込みコードを貼り付けます
コードの名前を入力します（例：「Asyntai Chatbot」）
「Add Code to Pages」で「All pages」を選択します
「Place Code in」で「Body - end」を選択します
「Apply」をクリックして保存します

ヒント: 「Body - end」を選択すると、スクリプトが閉じ</body>タグの直前に配置されます。これはチャットウィジェットの推奨配置です。

代替方法：Embed HTML要素を使用する（無料プラン）

Premiumプランがない場合は、Embed HTML要素を使ってページにコードを追加できます。Wixはこの要素をiframeとして表示するため、チャットウィジェットは要素の枠内にとどまり、ページ上に浮かんで表示されません。開いたチャットウィンドウが収まるよう、枠を十分な大きさにしてください。

Wixエディターでサイトを開きます
左側のツールバーで「Add Elements」（「+」ボタン）をクリックします
「Embed Code」、「Popular Embeds」、「Embed HTML」の順に選択します
「Enter Code」をクリックし、Asyntaiの埋め込みコードを貼り付けます
「Apply」をクリックします
要素の角をドラッグして、開いたチャットウィンドウが収まる大きさにします
「Publish」をクリックして変更を保存します

重要: Embed HTML方式では、チャットボットを表示したい各ページに要素を追加する必要があります。すべてのページに一度に追加するには、上記のCustom Code方式を使用してください。

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

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

ウィジェットが表示されませんか？ サイトが公開されていることを確認してください（保存のみでは不十分です）。Wixではカスタムコードの変更が反映されるまで数分かかる場合があります。ブラウザキャッシュのクリアまたはシークレットウィンドウでの閲覧をお試しください。

AI 検索バーを追加する

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

script タグに data-replace 属性を追加すると、テーマにある既存の検索バーと置き換わります。チャットコードと同じ場所である「設定」の「Custom Code」に追加します。WixのCustom Codeはドメインが接続されたPremiumプランでのみ利用できるため、これをインストールするにはそのプランが必要です。

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