こんにちは、Discourseコミュニティの皆さん、
お元気でお過ごしのことと思います！
AIペルソナ（LLM GPT-4 Omni-Mini）を搭載したチャットボットをセットアップしたのですが、素晴らしい働きをしてくれています！
しかし、顧客の利用率がかなり低いことに気づきました。現在、ボットとチャットするには、トップバーにある小さなロボットアイコンをクリックする必要がありますが、あまり目立たないのかもしれません。
見つけ方を説明するトピックを作成しましたが、それでも少し隠れているようです。画面の隅にもっと目立つように、より大きなチャットウィジェットアイコンを作成する方法はありますか？
Help ScoutやZendeskとの統合について調べましたが、追加費用や余計な手間をかけずに、Discourseで既に持っているものを使いたいと考えています。
何かヒントやコツがあれば教えていただけますか？どんな情報でもありがたいです！まだこの分野に慣れていないので、どんな助けでも大変助かります。
たくさんのお礼を申し上げます！
リリー、ありがとうございます。とても良いアイデアです！
私たちのフォーラムではあまりうまくいかないでしょう。サイドバーを削除しました。もっとすっきりさせようと思っています… 他の回避策が見つからなければ、元に戻すかもしれません 
それをサイドバーの代わりに使用している場合は、ドロップダウンメニューに入れることができます。
はい、承知いたしました 
ボタンのURLに/discourse-ai/ai-bot/conversationsを使用し、好きな場所に配置できます。 
Lily、ご提案いただき大変ありがとうございます。カテゴリの上にボタンを追加することができ、完璧に動作しています…
もちろん、もう少しスケールアップしても構いません…
このボタンに独自の画像を使用したいと考えています（すでにテーマに追加済みですが、コンポーネントオプションでカスタム画像をアイコンとして呼び出す方法がわかりません（GitHub - literatecomputing/discourse-custom-components ）
また、位置を変更することもできません…テーマコードにカスタムセクションを作成する必要がありますか？
チャットボットのボタンは次のように考えています。
ご協力に大変感謝いたします!!!
いろいろ調べて、ChatGPTの助けを借りて、なんとか目標を達成できました！
Lilyさんの提案通りボタンを追加し、あちこちで代替案を読み漁るのにかなりの時間を費やしました。結局、ChatGPTにボタンを作成するためのコード、あるいはアップロードした画像を元にしたフローティング「アバター」のコード作成を手伝ってもらいました。
将来誰かの役に立つかもしれないので、使用しているコードをここに載せておきます！
HTML:
<a id="chatbot-avatar" href="https://YOUR_URL_HEREs" title="AI chatbot">
<img src="https://YOUR_IMAGE_URL_HERE__" alt="Chatbot Avatar" />
<div class="tooltip">Start a conversation with the AI Chatbot</div>
</a>
CSS:
#chatbot-avatar {
position: fixed; /* アバターを固定 */
bottom: 50px; /* ページ下部からの距離 */
right: 50px; /* ページ右部からの距離 */
cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
z-index: 1000; /* 他のコンテンツの上にアバターが表示されるようにする */
text-align: center; /* アバターのすぐ下にツールチップテキストを中央揃え */
}
#chatbot-avatar img {
width: 200px; /* 必要に応じてサイズを調整 */
height: 200px; /* 必要に応じてサイズを調整 */
transition: transform 0.3s; /* ホバーエフェクトをスムーズに */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* ホバー時にアバターを少し拡大 */
}
.tooltip {
visibility: hidden; /* デフォルトでは非表示 */
width: 200px; /* ツールチップの幅 */
background-color: #000C34; /* ツールチップの背景色 */
color: #fff; /* ツールチップのテキストカラー */
text-align: center; /* テキストを中央揃え */
border-radius: 5px; /* 角丸 */
padding: 8px; /* ツールチップ内のパディング */
position: absolute; /* 絶対配置 */
bottom: 220px; /* アバターの上に配置 */
right: 50%; /* アバターと中央揃え */
transform: translateX(50%); /* 中央揃えのために調整 */
opacity: 0; /* デフォルトでは透明 */
transition: opacity 0.3s; /* 透明度をスムーズに遷移 */
z-index: 999; /* アバターのすぐ下に配置 */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* ツールチップを表示 */
opacity: 1; /* 完全に見えるようにする */
}
ページでの表示は以下のようになります（「AIチャットボットとの会話を開始する」というテキストは、アバターにカーソルを合わせたときにのみ表示されます。
まだできていないことが一つだけあります。それは、ホームページにのみ表示させ、現在はAIチャットボットの議論ページを含むすべてのページに表示されてしまい、明らかに冗長です。ページを識別してホームページ以外ではブロックするスクリプトを追加しようとしましたが、今のところうまくいっていません。明日、もう少し頑張ってみます！
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
