مرحباً بمجتمع Discourse،
آمل أن تكونوا جميعاً بخير!
لقد قمت بإعداد روبوت محادثة بشخصية ذكاء اصطناعي (LLM GPT-4 Omni-Mini)، وقد كان يعمل بشكل رائع! ولكن، لاحظت أن تفاعلات العملاء قليلة جداً. حالياً، للدردشة مع الروبوت، يتعين عليهم النقر على أيقونة الروبوت الصغيرة هذه في الشريط العلوي، وأعتقد أنها قد لا تكون واضحة جداً.
لقد أنشأت موضوعاً يشرح كيفية العثور عليها، ولكنها لا تزال تبدو مخفية بعض الشيء. كنت أتساءل عما إذا كانت هناك طريقة لإنشاء أيقونة دردشة أكبر في زاوية الشاشة لجعلها تبرز أكثر؟
لقد قرأت عن دمج Help Scout أو Zendesk، ولكني أفضل استخدام ما لدي بالفعل في Discourse دون تكاليف إضافية أو المرور بالمزيد من التعقيدات.
هل لديكم أي نصائح أو حيل يمكنكم مشاركتها؟ سأكون ممتناً لأي توجيهات يمكنكم تقديمها! ما زلت أتعلم كل هذا، لذا فإن أي مساعدة تعني الكثير.
شكراً لك يا ليلي، هذه فكرة جيدة جداً!
لن تعمل حقاً في منتدياتنا، لقد أزلت الشريط الجانبي، أفكر في جعله أقل ازدحاماً… قد أعيده إذا لم أجد حلاً بديلاً آخر
من الواضح أنني لن أمانع في التوسع قليلاً…
كنت أفكر في استخدام صورتي الخاصة لهذا الزر (لقد أضفتها بالفعل إلى مظهري)، لكنني لا أعرف كيف أستدعي هذه الصورة المخصصة كأيقونتي في خيارات المكون (GitHub - literatecomputing/discourse-custom-components )
أيضًا، لا يبدو أنني أستطيع تغيير الموضع… هل أحتاج إلى إنشاء قسم مخصص في كود المظهر؟؟
هذه هي الصورة التي أتخيلها للزر الخاص بروبوت الدردشة:
بعد بعض البحث هنا وهناك، ساعدتني ChatGPT - تقريبًا - في تحقيق هدفي
لقد أضفت الزر كما اقترحت ليلي، وقضيت أيضًا وقتًا طويلاً في القراءة عن البدائل هنا وهناك. في النهاية، طلبت من 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; /* جعله مرئيًا بالكامل */
}
هذا هو شكله على الصفحة (يظهر النص “ابدأ محادثة…” عند التحويم فوق الصورة الرمزية فقط.
هناك شيء واحد لم أتمكن من القيام به بعد، وهو جعله يظهر على الصفحة الرئيسية فقط، في الوقت الحالي يظهر على كل صفحة، بما في ذلك صفحة مناقشة روبوت الدردشة بالذكاء الاصطناعي، حيث يكون زائدًا عن الحاجة بوضوح… لقد حاولت إضافة نص برمجي لتحديد الصفحة وحظرها في كل مكان باستثناء الصفحة الرئيسية، وما إلى ذلك.. لم ينجح حتى الآن. سأرى ما إذا كان بإمكاني القيام بالمزيد غدًا!
ولكن، لاحظت أن تفاعلات العملاء قليلة جداً. حالياً، للدردشة مع الروبوت، يتعين عليهم النقر على أيقونة الروبوت الصغيرة هذه في الشريط العلوي، وأعتقد أنها قد لا تكون واضحة جداً.
