แชร์ผ่าน


กำหนดเอเจนต์ของคุณเอง

เมื่อคุณสร้างเอเจนต์สำหรับเว็บไซต์ จะมีการใช้เนื้อหาจากเว็บไซต์ที่โฮสต์เพื่อสร้างการตอบ Microsoft Dataverse จัดทำดัชนีเนื้อหาของไซต์และตารางที่กำหนดค่า Copilot Studio สรุปเนื้อหาและตารางที่จัดทำดัชนีเพื่อสร้างการตอบ

ผู้ใช้ไซต์ที่ได้รับการรับรองความถูกต้องจะได้รับคำตอบที่สรุปและปรับแต่งให้สอดคล้องกับบทบาทบนเว็บของตน ปรับปรุงรูปแบบเนื้อหาสำหรับผู้ใช้ไซต์ที่ผ่านการรับรองความถูกต้องโดยการปรับแต่งข้อมูลด้วยขั้นตอนเหล่านี้:

  1. ใน Power Pages ไปที่ ตั้งค่าพื้นที่ทำงาน

  2. ภายใต้ Copilot ให้เลือก เพิ่มเอเจนต์

  3. ภายใต้ ปรับแต่งข้อมูลของคุณ เลือก ทำการเปลี่ยนแปลง

  4. เลือก เลือกการควบคุมการค้นหาตาราง เพื่อเลือกหรือล้างข้อมูลตาราง

    • คุณสามารถเลือกหลายตารางได้ในส่วนนี้ ตรวจสอบให้แน่ใจว่าทุกตารางที่คุณเลือกถูกใช้บนไซต์
    • ในหน้าถัดไป ให้ระบุหน้าที่ใช้ตารางเพื่อสร้าง URL การอ้างอิง
  5. เลือก ถัดไป

  6. ใต้ เลือกตาราง ให้เลือกตารางที่มีคอลัมน์และลิงก์ของหน้าที่คุณต้องการเลือก ตารางจะปรากฏขึ้นก็ต่อเมื่อมีคอลัมน์แบบหลายบรรทัดอย่างน้อยหนึ่งคอลัมน์

    คุณสามารถเลือกได้ครั้งละหนึ่งตารางเท่านั้น

  7. ใต้ เพิ่มลิงก์หน้า ให้เลือกหน้าที่ใช้ตาราง

    หมายเหตุ

    • ตรวจสอบให้แน่ใจว่าคุณเลือกหน้าที่ถูกต้อง มิฉะนั้น บอทจะให้ URL การอ้างอิงที่ไม่ถูกต้องสำหรับคำตอบ
    • หน้านี้ต้องใช้ id เป็นพารามิเตอร์สตริงคิวรี หากคุณใช้ชื่อพารามิเตอร์อื่น URL การอ้างอิงจะทำงานไม่ถูกต้อง
  8. ภายใต้ เลือกคอลัมน์ ให้เลือกคอลัมน์ที่ใช้บนหน้าเว็บ เลือกได้เฉพาะคอลัมน์ที่มีข้อความหลายบรรทัดเท่านั้น

  9. เลือก ถัดไป แล้วตรวจสอบสิ่งที่คุณเลือก

  10. เลือก บันทึก เพื่อส่งการเปลี่ยนแปลง

ปรับแต่งลักษณะที่ปรากฏของเอเจนต์

คุณสามารถปรับแต่งสลักษณะของเอเจนต์ได้โดยการแทนที่คลาส Cascading Style Sheet (CSS) เริ่มต้น เมื่อต้องการทำเช่นนี้ ให้เพิ่มองค์ประกอบ style ลงในเทมเพลตส่วนหัวและแทนที่ค่าโดยทำตามขั้นตอนเหล่านี้:

  1. เปิด ตัวแก้ไขโค้ด ของไซต์

  2. ในการนำทาง Explorer ให้ขยายโฟลเดอร์ web-templates

  3. เปิด Header.html

  4. เพิ่มองค์ประกอบ style หรือ script ของคุณ

    สกรีนช็อตของ Visual Studio ที่เน้นโฟลเดอร์ web-templates, ไฟล์ Header.html และองค์ประกอบสไตล์ที่มีตัวเลือก CSS

  5. แทนที่สไตล์ที่เหมาะสม

วิดเจ็ตตัวแทน

สกรีนช็อตของวิดเจ็ตแชทบอท

ไอคอนยุบตัวแทน:

.pva-embedded-web-chat-widget {
    background-color: #484644;
    border: 1px solid #FFFFFF;
}

คำแนะนำเครื่องมือ:

.pva-embedded-web-chat-widget .pva-embedded-web-chat-widget-tooltip-text {
    background: white;
    color: #323130;
}

รูปภาพไอคอน:

<script>
document.addEventListener('DOMContentLoaded', function() {
   var buttons = document.getElementsByClassName("pva-embedded-web-chat-widget");
    buttons[0].innerHTML = '<img src="<image URL>" height= "70px" width = "70px" />';
}, false);
</script>

หมายเหตุ

แทนที่ <image URL> ด้วย URL แหล่งที่มาของรูปภาพจริง ใช้พาธภายนอกหรืออัปโหลดรูปภาพไปยังตาราง เว็บไฟล์ และใช้ URL

องค์ประกอบของตัวแทน

ตัวอย่าง CSS ในส่วนนี้แสดงตัวอย่างที่แสดงวิธีปรับแต่งองค์ประกอบแชทบอทที่มีหมายเลขแต่ละรายการในภาพหน้าจอต่อไปนี้

สกรีนช็อตของแชทบอทที่มีองค์ประกอบแต่ละรายการที่เรียกและกำหนดหมายเลข

1. ส่วนหัว

.pages-chatbot-header
{
    background: #77a145;
    color: #ffffff;
}

2. การตั้งค่าความสูงและความกว้าง

.pva-embedded-web-chat[data-minimized='false'] {
    height: 80%;
    width: 25%;
    max-width: 400px;
    max-height: 740px;
}

3. หน้าต่างตัวแทน

.pva-embedded-web-chat-window {
    background: white;
}

4. กล่องข้อความจากเอเจนต์

สีพื้นหลัง:

.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    background-color: #77a145 !important;
    border-radius: 5px !important;
}

สีข้อความ:

.webchat__bubble:not(.webchat__bubble--from-user) p {
    color: #ffffff;
}

5. ข้อความจากผู้ใช้

สีพื้นหลัง:

.webchat__bubble.webchat__bubble--from-user .webchat__bubble__content {
    background-color: #797d81 !important;
    border-radius: 5px !important;
}

สีข้อความ:

.webchat__bubble.webchat__bubble--from-user p {
    color: #ffffff;
}
.webchat__link-definitions__badge {
    color: blue !important;
}

.webchat__link-definitions__list-item-text {
    color: blue !important;
}

.webchat__render-markdown__pure-identifier {
    color: blue !important;
}

7. การตั้งค่าข้อความความเป็นส่วนตัว

สีพื้นหลัง:

.pva-privacy-message {
    background: #797d81;
}

สีข้อความ:

.pva-privacy-message p {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
}