Studio.DesignのウェブサイトにAIサポートエージェントを追加しましょう
Studio.Design は、コードを一切触ることなく、完全なビジュアルの自由度を求めるデザイナーやクリエイター、小規模ビジネス向けに設計されたノーコード・ウェブサイトビルダーです。特に、洗練された見た目と優れたパフォーマンスを兼ね備えたポートフォリオ、ランディングページ、ブランドサイトの制作において高く評価されています。 ウェブサイトURL: Studio.DesignSiteSpeakAIにおいて
上部のドロップダウンメニューからAIサポートエージェントを選択し、サイドバーの「チャットボットのインストール（Install Chatbot）」セクションをクリックします。次に「iFrame」を選択し、「コードをコピー（Copy Code）」ボタンをクリックして、コードスニペットをコピーしてください。
Studio.Designにて
- Studio.Designアカウントにログインし、ダッシュボード上でウィジェットを追加したいプロジェクトにカーソルを合わせて、Design Editorを選択します。
- プロジェクトが編集モードで開き、デフォルトのページが表示されます。
- 左側のサイドバーで [ページ] オプションを選択します。
- [ページ] タブで [追加] をクリックし、ページを追加します。ここでは、「通常のページ」および「動的ページ」、「通常のモーダル」および「動的モーダル」、「リダイレクトページ」、「検索ページ」、「パスワード保護ページ」を追加できます。今回は、[通常のモーダル] ページを選択します。
- モーダル（通常）を選択
- これで、空のモーダルページが「ページ」の下に一覧表示されます。
- [追加] を選択し、Embed Blank </> ボックスをモーダルページ内にドラッグします。
- 最初にコピーしておいたiframeコードを、「</> Custom」ボックスに貼り付けます。モーダルページの埋め込みボックス（Embed Box）内にAIサポートエージェントが表示されます。これのサイズ調整は、次のステップで行います。
- iframeの実際のサイズは、幅450px、高さ600pxです。モーダルページのサイズを、iframeのコード属性で指定されているiframeのサイズに合わせて設定してください。
- iframe を含む 埋め込みボックス を選択し、モーダル ページを満たすサイズを設定します。
- 「モーダルページ設定」オプションを選択します。
- 「パスを使用」設定を有効にする
次に、AIサポートエージェントとの対話が表示されるポップアップモーダルを開くための「ボタン」を、Webページに追加します。このボタンは、ページフッターに配置するのが最適です。もしページフッターがない場合は、ここで追加してください（フッターの追加方法については本チュートリアルの範囲外となりますので、Studio.Designのドキュメントを参照してください）。
- AIサポートエージェントを追加するページを選択します。
- ページフッターに「ボックス」をドラッグします。
- ボタンをボックス内にドラッグします。
注意: Studio.Designで使用するボタンにはアイコンを表示できないため、ボタンに適切なテキストを追加します。今回は「Support」というテキストを追加しました。
- ボタンのサイズ、余白（マージン・パディング）、形状、塗りつぶしの色を変更するには、ボタンのボックスを選択し、上部メニューにある属性項目を使って設定を変更します。今回の例では、デフォルトの黒いボタンの色を、ウェブページに合わせた色に変更しました。
- ボタンをクリックしたときにモーダルが起動するようにするには、作成したモーダルを、そのボタンが含まれているボックスにリンクさせる必要があります。
- ライブプレビューを選択して、Webページをプレビューします。
- ほら！ ライブページにボタンが表示されました！
- ボタンをクリックすると、AIサポートエージェントの対話画面が表示されます。
AIサポートエージェントが Studio.Design のウェブサイトに追加されました。これより、お客様がエージェントとやり取りできるようになります！
Ready to automate your customer service with AI?
Join over 1000+ businesses, websites and startups automating their customer service and other tasks with a custom trained AI agent.