ตัวสร้างวิดเจ็ต: สร้างวิดเจ็ต Kick เอง

ตัวสร้างวิดเจ็ตให้คุณสร้างโอเวอร์เลย์สำหรับสตรีม Kick ของตัวเองด้วย HTML, CSS และ JavaScript KickBot ส่งอีเวนต์สดจาก Kick (การติดตาม ซับ กิฟต์ซับ KICKs เรด ข้อความแชท และอื่น ๆ) เข้าโค้ดของคุณให้เลย จึงไม่ต้องเชื่อมต่อ API ใด ๆ คุณใช้วิดเจ็ตบนสตรีมของตัวเองได้ และเผยแพร่ให้สตรีมเมอร์คนอื่นติดตั้งจากคลังวิดเจ็ตได้ด้วย เปิดได้ที่ kickbot.com/dashboard/widget-builder

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

ตัวสร้างวิดเจ็ตแสดงรายการวิดเจ็ตของคุณและ URL สำหรับ OBS

สร้างวิดเจ็ตใหม่

1. เปิด kickbot.com/dashboard/widget-builder แล้วคลิก วิดเจ็ตใหม่
2. เลือก หน้าว่าง หรือเริ่มจากเทมเพลต: Viewer Count, Simple Follower Goal หรือ Basic Chat Widget เทมเพลตจะคัดลอกโค้ดของวิดเจ็ต KickBot ตัวนั้นมาให้คุณแก้ได้
3. ใส่ ชื่อวิดเจ็ต ถ้าเป็นหน้าว่าง ให้ตั้ง ความกว้าง และ ความสูง เป็นพิกเซลด้วย (ค่าเริ่มต้น 800 × 600)
4. คลิก สร้างวิดเจ็ต แล้วตัวแก้ไขจะเปิดขึ้น

เริ่มจากหน้าว่างหรือจากเทมเพลต

หมายเหตุ

แพ็กเกจฟรีมีวิดเจ็ตในตัวสร้างวิดเจ็ตได้สูงสุด 10 ตัว ส่วน Premium ไม่จำกัด วิดเจ็ตที่ติดตั้งจากคลังไม่นับรวม

ตัวแก้ไข

ตัวแก้ไขมี 3 ส่วน: การตั้งค่าทางซ้าย โค้ดตรงกลาง และตัวอย่างแบบสดทางขวา

การตั้งค่า โค้ด และตัวอย่างในตัวแก้ไขของตัวสร้างวิดเจ็ต

• การตั้งค่าพื้นฐาน: ชื่อ และความกว้างกับความสูงที่ใช้แสดงวิดเจ็ต
• ตัวแปรผู้ใช้: การตั้งค่าที่สตรีมเมอร์เปลี่ยนได้โดยไม่ต้องแตะโค้ด เช่น สี ข้อความ หรือตัวเลขเป้าหมาย ดูตัวแปรผู้ใช้
• ส่งอีเวนต์ทดสอบ: ปุ่มที่ส่งอีเวนต์จำลอง (ซับ กิฟต์ซับ KICKs ติดตาม เรด ข้อความ และอื่น ๆ) ไปที่ตัวอย่าง
• การมองเห็น: บอกว่าวิดเจ็ตเป็นแบบส่วนตัวหรือเผยแพร่แล้ว และมีปุ่ม เผยแพร่วิดเจ็ต
• โค้ด: แท็บ HTML, CSS และ JavaScript ใช้ เลย์เอาต์ตัวแก้ไข ด้านบนเพื่อแสดงทีละไฟล์ (หน้าเดียว) หรือ 2 ไฟล์พร้อมกัน (แบ่งซ้ายขวา หรือ ซ้อนบนล่าง)
• ตัวอย่าง: แสดงวิดเจ็ตตามขนาดจริง ย่อให้พอดีกับพื้นที่ และอัปเดตขณะที่คุณพิมพ์ ใช้ปุ่มรีโหลดเพื่อเริ่มใหม่ หรือปุ่มแยกหน้าต่างเพื่อเปิดในหน้าต่างของตัวเอง (สะดวกเวลาจะเปิดคอนโซลของเบราว์เซอร์)

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

ตัวแก้ไขต้องใช้หน้าจอกว้าง ถ้าเปิดบนมือถือ KickBot จะให้คุณไปเปิดบนคอมพิวเตอร์ วิดเจ็ตของคุณบันทึกไว้แล้ว จึงทำต่อจากตรงนั้นได้เลย

ทดสอบวิดเจ็ต

1. เปิด ส่งอีเวนต์ทดสอบ
2. คลิกอีเวนต์ เช่น ติดตาม หรือ ข้อความ
3. ดูว่าตัวอย่างตอบสนองยังไง

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

ใช้วิดเจ็ตบนสตรีม

วิดเจ็ตทุกตัวที่คุณสร้างจะแสดงในวิดเจ็ตที่บันทึกไว้ ด้วย โดยมีคำว่า “วิดเจ็ตของคุณเอง” อยู่ใต้ชื่อ URL ของวิดเจ็ตจะรันโค้ดล่าสุดของคุณเสมอ

1. ในหน้าตัวสร้างวิดเจ็ต คลิก คัดลอก URL ที่วิดเจ็ตของคุณ
2. ใน OBS ให้เพิ่ม source แบบ Browser วาง URL แล้วตั้งความกว้างและความสูงให้เท่ากับขนาดวิดเจ็ต
3. คลิก OK

ถ้าแก้โค้ดตอนที่วิดเจ็ตอยู่ใน OBS แล้ว ให้รีเฟรช browser source เพื่อโหลดโค้ดใหม่ เมื่อคุณเปลี่ยนค่าตัวแปรผู้ใช้ในหน้าวิดเจ็ตที่บันทึกไว้แล้วคลิก บันทึก OBS จะโหลดวิดเจ็ตใหม่เอง ดูความช่วยเหลือเพิ่มเติมที่เพิ่ม browser source ลงใน OBS

คำเตือน

เก็บ URL ไว้เป็นความลับ ใครที่มี URL นี้ก็แสดงวิดเจ็ตของคุณบนจอของเขาได้

เผยแพร่ลงคลังวิดเจ็ต

เผยแพร่วิดเจ็ตเมื่อคุณอยากให้สตรีมเมอร์คนอื่นค้นหาและติดตั้งได้

1. ในตัวแก้ไข เปิด การมองเห็น แล้วคลิก เผยแพร่วิดเจ็ต
2. เพิ่ม รูปภาพหลัก และรูปภาพอื่นอีกอย่างน้อย 1 รูป เพิ่มได้รวมสูงสุด 10 รูป รูปละไม่เกิน 10 MB ขนาด 1920 × 1080 ดีที่สุด
3. เขียน คำอธิบาย: วิดเจ็ตแสดงอะไรและตั้งค่ายังไง
4. ส่ง ป๊อปอัปจะแสดง ส่งตรวจสอบแล้ว

ทีม KickBot ตรวจวิดเจ็ตทุกตัว ถ้าผ่าน วิดเจ็ตจะแสดงในคลังวิดเจ็ตโดยมีชื่อ Kick ของคุณเป็นผู้สร้าง ปกติการตรวจใช้เวลาไม่ถึง 24 ชั่วโมง

คำเตือน

เผยแพร่วิดเจ็ตได้ครั้งเดียว หลังจากนั้นตัวแก้ไขจะแสดง “วิดเจ็ตนี้เผยแพร่แล้ว หากต้องการแก้ไข ติดต่อซัพพอร์ต” ให้ทดสอบวิดเจ็ตให้ดีก่อนเผยแพร่

ลบวิดเจ็ต

ในหน้าตัวสร้างวิดเจ็ต เปิดเมนู ⋯ ที่วิดเจ็ตแล้วคลิก ลบ การลบจะลบโค้ดและการตั้งค่าทั้งหมด และย้อนกลับไม่ได้

สมาชิกทีม

สมาชิกทีมต้องมีสิทธิ์ ตัวสร้างวิดเจ็ต จึงจะเปิดตัวแก้ไขและสร้างวิดเจ็ตได้ และต้องมีสิทธิ์ ตั้งค่าวิดเจ็ต จึงจะเห็น URL ของวิดเจ็ต ดูจัดการทีม

คำถามที่พบบ่อย

ต้องเขียนโค้ดเป็นไหม?

ต้อง อย่างน้อยต้องรู้ HTML, CSS และ JavaScript บ้าง ถ้าเขียนโค้ดไม่เป็น ให้ติดตั้งวิดเจ็ตจากคลังวิดเจ็ต แล้วปรับการตั้งค่าแทน

แก้ไขวิดเจ็ต KickBot จากคลังได้ไหม?

แก้โค้ดของวิดเจ็ตในคลังไม่ได้ ให้สร้างวิดเจ็ตใหม่จากเทมเพลต Viewer Count, Simple Follower Goal หรือ Basic Chat Widget เพื่อได้สำเนาโค้ดที่แก้ได้

วิดเจ็ตโหลดฟอนต์ รูปภาพ หรือสคริปต์อื่นได้ไหม?

ได้ HTML, CSS และ JavaScript ของคุณรันในหน้าเว็บปกติใน OBS จึงลิงก์เว็บฟอนต์ รูปภาพ และสคริปต์จากเว็บอื่นได้ ใช้ตัวแปรผู้ใช้แบบ รูปภาพ/GIF, วิดีโอ หรือ เสียง เพื่อให้สตรีมเมอร์อัปโหลดไฟล์ของตัวเองได้

สร้างวิดเจ็ตด้วย KickBot API ได้ไหม?

ได้ KickBot API แสดงรายการ สร้าง และอัปเดตวิดเจ็ตของคุณได้ ดูข้อมูลอ้างอิง API ของวิดเจ็ต