วิธีปรับแต่งแบรนด์ให้กับอินเทอร์เฟซและโลโก้ของ BigBlueButton

การสร้างแบรนด์ให้กับ BigBlueButton อาจหมายถึงสามสิ่ง ได้แก่ การเปลี่ยนโลโก้บนหน้าเว็บเริ่มต้นของเซิร์ฟเวอร์ การแสดงโลโก้ภายในห้องประชุม หรือการออกแบบโปรแกรมประชุมใหม่ เลือกการเปลี่ยนแปลงที่เล็กที่สุดที่ตรงกับเป้าหมายของคุณ สองอย่างแรกเป็นการเปลี่ยนแปลงการตั้งค่าหรือสินทรัพย์ที่มีการบันทึกไว้ การปรับเปลี่ยนโทนสี คำพูด หรือเค้าโครงของโปรแกรมประชุมโดยทั่วไปแล้วต้องสร้างโปรแกรมประชุม HTML5 ที่ปรับแต่งเอง

คู่มือนี้อ้างอิงจากเอกสารการดูแลระบบ BigBlueButton 4.0 ที่เผยแพร่เมื่อวันที่ 6 ตุลาคม 2026 เส้นทางและแพ็กเกจการติดตั้งอาจแตกต่างกันไปตามรุ่นหรือผู้ให้บริการโฮสติ้ง โปรดตรวจสอบเวอร์ชันที่ติดตั้งบนเซิร์ฟเวอร์ของคุณก่อนทำการเปลี่ยนแปลงไฟล์ และทำการสำรองข้อมูลก่อนเสมอ

เลือกการเปลี่ยนแปลงแบรนด์ที่คุณต้องการ

โลโก้บนหน้า Landing Page ของเซิร์ฟเวอร์และโลโก้ในระหว่างการประชุมนั้นแยกจากกัน การเปลี่ยนโลโก้หนึ่งไม่ได้หมายความว่าอีกโลโก้หนึ่งจะถูกแทนที่โดยอัตโนมัติ

ก่อนที่คุณจะแก้ไขเซิร์ฟเวอร์

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

• ตรวจสอบเวอร์ชันที่ติดตั้งของคุณและเปรียบเทียบกับคู่มือการปรับแต่งเซิร์ฟเวอร์ BigBlueButton ที่ ตรงกัน
• บันทึกสำเนาของโลโก้ปัจจุบันและไฟล์การตั้งค่าใดๆ ที่คุณวางแผนจะแก้ไขไว้ด้วย
• เตรียมไฟล์โลโก้ที่สะอาดตาและยังคงมองเห็นได้ชัดเจนในขนาดที่แสดงบนเว็บไซต์หรือการประชุมของคุณ เอกสารไม่ได้ระบุขนาดพิกเซลที่เป็นมาตรฐาน ดังนั้นควรตรวจสอบพื้นที่แสดงผลจริงแทนที่จะใช้ขนาดที่คาดเดาเอาไว้
• ใช้ URL ของรูปภาพที่ผู้เข้าร่วมประชุมสามารถเข้าถึงได้โดยไม่ต้องลงชื่อเข้าใช้ ควรใช้ HTTPS และตรวจสอบ URL จากภายนอกเซิร์ฟเวอร์ก่อนใช้งาน

เปลี่ยนโลโก้เริ่มต้นของเว็บเพจ

สำหรับ BigBlueButton เวอร์ชัน 4.0 คู่มือการดูแลระบบระบุโลโก้เริ่มต้นไว้ที่/var/www/bigbluebutton-default/assets/images/logo.pngซึ่งมีผลต่อเว็บไซต์เริ่มต้นที่ให้บริการโดยเซิร์ฟเวอร์ แต่ไม่ได้กำหนดโลโก้ที่แสดงภายในไคลเอนต์การประชุม HTML5

1. เชื่อมต่อกับเซิร์ฟเวอร์และตรวจสอบว่าไฟล์มีอยู่จริงที่พาธที่ระบุไว้ หากพาธแตกต่างออกไป ให้หยุดชั่วคราวและตรวจสอบเอกสารประกอบสำหรับเวอร์ชันที่คุณติดตั้งแทนที่จะคัดลอกไฟล์ไปยังไดเร็กทอรีที่คาดเดา
2. สำรองข้อมูลไฟล์เดิมก่อน ตัวอย่างเช่น ผู้ดูแลระบบสามารถคัดลอกไฟล์นั้นไปยังไฟล์สำรองที่มีวันที่ระบุไว้ในไดเร็กทอรีเดียวกันก่อนที่จะทำการติดตั้งไฟล์ใหม่แทนที่ โปรดคำนึงถึงสิทธิ์การเข้าถึงและกรรมสิทธิ์เดิมเมื่อทำการติดตั้งไฟล์ใหม่แทนที่
3. วางโลโก้ใหม่ของคุณในตำแหน่งที่ระบุไว้ โดยใช้ชื่อไฟล์logo.pngตรวจสอบให้แน่ใจว่าไฟล์ภาพเป็นไฟล์ PNG จริง และมีความคมชัดเพียงพอเมื่อเทียบกับพื้นหลังของหน้าเว็บ
4. เปิดหน้า Landing Page สาธารณะของ BigBlueButton ในหน้าต่างเบราว์เซอร์แบบส่วนตัว หรือล้างแคชของเบราว์เซอร์ ตรวจสอบให้แน่ใจว่าโลโก้ใหม่ปรากฏขึ้นโดยไม่ยืด บิดเบี้ยว หรือเบลอ

คู่มืออย่างเป็นทางการระบุตำแหน่งของไฟล์ แต่ไม่ได้รับประกันว่าไฟล์ทดแทนในเครื่องจะคงอยู่ตลอดการอัปเดตแพ็กเกจ โปรดเก็บไฟล์ต้นฉบับและไฟล์ทดแทนไว้ในบันทึกการติดตั้งของคุณ และตรวจสอบหน้า Landing Page อีกครั้งหลังจากการอัปเกรด หากโลโก้หายไปหลังจากการอัปเดต ให้เปรียบเทียบไฟล์ที่ติดตั้งกับไฟล์ที่บันทึกไว้ของคุณ และทำการเปลี่ยนแปลงอีกครั้งหลังจากตรวจสอบคำแนะนำในการเผยแพร่เวอร์ชันปัจจุบันแล้วเท่านั้น

แสดงโลโก้ภายในที่ประชุม

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

1. ในการตั้งค่าไคลเอ็นต์ HTML5 ให้เปิดใช้งานdisplayBrandingArea. ในการติดตั้งที่ระบุไว้ในปัจจุบัน/etc/bigbluebutton/bbb-html5.ymlไฟล์การกำหนดค่าในเครื่องที่แนะนำคือไฟล์ override; รายการการกำหนดค่าในไฟล์นี้จะแทนที่การตั้งค่าไคลเอ็นต์ที่มาพร้อมกับแพ็กเกจ รักษาค่า YAML อื่นๆ ที่มีอยู่เมื่อแก้ไขไฟล์
2. รีสตาร์ท BigBlueButton เพื่อให้การเปลี่ยนแปลงการตั้งค่ามีผล: sudo bbb-conf --restartกำหนดเวลารีสตาร์ทในช่วงเวลาการบำรุงรักษาที่เหมาะสม เนื่องจาก1การรีสตาร์ทอาจขัดจังหวะการประชุมที่กำลังดำเนินอยู่
3. เมื่อแอปพลิเคชันหรือไคลเอ็นต์ API ของคุณสร้างการประชุม ให้ใส่พารามิเตอร์แบบกำหนดเองลงในแบบฟอร์ม ตำแหน่งlogo=https://your-domain.example/brand.pngที่แน่นอนในการป้อนพารามิเตอร์แบบกำหนดเองจะขึ้นอยู่กับการผสานรวมที่ส่ง/createคำขอ BigBlueButton ใช้คำแนะนำสำหรับการผสานรวมนั้น และอย่าเปิดเผยรหัสลับร่วมของเซิร์ฟเวอร์ของคุณในโค้ดฝั่งไคลเอ็นต์
4. สร้างการประชุมทดสอบใหม่และเข้าร่วม ตรวจสอบว่าโลโก้ปรากฏอยู่เหนือรายชื่อผู้เข้าร่วม และรูปภาพโหลดสำหรับผู้เข้าร่วมที่ไม่ได้ล็อกอินเข้าสู่ระบบโฮสต์รูปภาพ

โปรดดูเอกสารอ้างอิงไฟล์การกำหนดค่า อย่างเป็นทางการ สำหรับตำแหน่งที่แนะนำสำหรับการแก้ไข และเอกสารอ้างอิง APIสำหรับพารามิเตอร์การสร้างการประชุม ใช้เอกสารที่ตรงกับเวอร์ชันเซิร์ฟเวอร์ของคุณหากไม่ใช่เวอร์ชัน 4.0

เมื่อคุณต้องการเปลี่ยนโฉมอินเทอร์เฟซทั้งหมด

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

เส้นทางนี้ต้องการการพัฒนาและการติดตั้งใช้งาน ไม่ใช่การตั้งค่าเซิร์ฟเวอร์ที่รวดเร็ว และการเปลี่ยนแปลงอาจต้องการการบำรุงรักษาเมื่อ BigBlueButton พัฒนาขึ้น ก่อนที่จะลงทุนสร้างแบบกำหนดเอง ให้จดบันทึกอย่างละเอียดว่าหน้าจอหรือองค์ประกอบใดบ้างที่ต้องเปลี่ยนแปลง และตรวจสอบว่าตัวเลือกหน้า Landing Page หรือโลโก้การประชุมที่มีอยู่เพียงพอหรือไม่ หากคุณดำเนินการต่อ ให้เก็บการปรับแต่งไว้ในระบบควบคุมเวอร์ชัน บันทึกวิธีการสร้างใหม่ และทดสอบการอัปเกรดในสภาพแวดล้อมทดสอบก่อนที่จะอัปเดตเป็นเวอร์ชันใช้งานจริง

ตรวจสอบผลลัพธ์และแก้ไขปัญหาตามอาการ

• โลโก้หน้า Landing Page ยังไม่เปลี่ยนแปลง:โปรดยืนยันว่าคุณได้เปลี่ยนไฟล์ในbigbluebutton-defaultไดเร็กทอรี assets ของเซิร์ฟเวอร์ที่ใช้งานอยู่แล้ว จากนั้นให้ข้ามการแคชของเบราว์เซอร์ หากมีพร็อกซีหรือพอร์ทัลแยกต่างหากให้บริการหน้าเว็บสาธารณะ โปรดตรวจสอบว่าระบบใดเป็นเจ้าของหน้าเว็บนั้น
• โลโก้การประชุมไม่ปรากฏ:โปรดตรวจสอบว่าการตั้งค่าพื้นที่แสดงแบรนด์เปิดใช้งานอยู่ รีสตาร์ทเซิร์ฟเวอร์ สร้างการประชุมใหม่โดยใช้logoพารามิเตอร์ และ URL รูปภาพใช้งานได้ในเบราว์เซอร์ที่ไม่ต้องลงชื่อเข้าใช้
• โลโก้ปรากฏขึ้นแต่ดูผิดปกติ:ตรวจสอบสัดส่วน พื้นที่โปร่งใส และความคมชัดของภาพต้นฉบับ ปรับแต่งภาพต้นฉบับแทนการยืดภาพในอินเทอร์เฟซ
• ผู้เข้าร่วมบางคนอาจเห็นพื้นที่ว่างเปล่า:ลองทดสอบ URL ของรูปภาพจากเครือข่ายและอุปกรณ์อื่นดู ไฟร์วอลล์ การจำกัดการเข้าถึง ใบรับรอง TLS ที่ไม่ถูกต้อง หรือ URL ที่กำลังจะหมดอายุ อาจทำให้เบราว์เซอร์ของผู้เข้าร่วมไม่สามารถโหลดรูปภาพได้
• สีหรือข้อความยังคงเหมือนเดิม:การเปลี่ยนโลโก้เซิร์ฟเวอร์ไม่ได้เปลี่ยนรูปลักษณ์ของโปรแกรมประชุม หากต้องการเปลี่ยนแปลงองค์ประกอบส่วนติดต่อผู้ใช้เหล่านั้น ให้เลือกใช้วิธีการพัฒนาโปรแกรมประชุมแบบกำหนดเอง

ประเมินความสำเร็จจากตำแหน่งและความสม่ำเสมอของผลลัพธ์: หน้า Landing Page แสดงเครื่องหมายที่แก้ไขแล้ว; การประชุมทดสอบที่สร้างขึ้นใหม่แสดงโลโก้การประชุมในพื้นที่แบรนด์ที่ระบุไว้; และหากคุณสร้างไคลเอ็นต์แบบกำหนดเอง การเปลี่ยนแปลงอินเทอร์เฟซที่ร้องขอจะยังคงปรากฏอยู่ตลอดขั้นตอนการเข้าร่วมและการประชุม การประชุมทดสอบขนาดเล็กเป็นจุดตรวจสอบที่ปลอดภัยกว่าการตรวจสอบแท็บเบราว์เซอร์ที่แคชไว้เพียงแท็บเดียว

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