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

> สร้างวิดเจ็ตสำหรับสตรีม Kick ของคุณเองด้วย HTML, CSS และ JavaScript ในตัวสร้างวิดเจ็ตของ KickBot ทดสอบด้วยอีเวนต์จำลอง แล้วเผยแพร่ลงคลังวิดเจ็ต

Source: https://kickbot.com/th/docs/widgets/widget-builder

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

ตัวสร้างวิดเจ็ตเหมาะกับคนที่เขียนโค้ดได้บ้าง ถ้าแค่อยากได้โอเวอร์เลย์สำเร็จรูป ให้ใช้[คลังวิดเจ็ต](https://kickbot.com/th/docs/widgets/widget-library) ส่วนข้อมูลอ้างอิงโค้ด (อีเวนต์ ข้อมูล และการตั้งค่า) ดู[ข้อมูลอ้างอิงตัวสร้างวิดเจ็ต](https://kickbot.com/th/docs/widgets/widget-builder-reference)

![หน้าแรกของตัวสร้างวิดเจ็ต KickBot มีปุ่มวิดเจ็ตใหม่ วิดเจ็ต 1 ตัวที่ซ่อน URL ไว้ และส่วนข้อมูลอ้างอิง](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "ตัวสร้างวิดเจ็ตแสดงรายการวิดเจ็ตของคุณและ URL สำหรับ OBS")

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

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

![ป๊อปอัปวิดเจ็ตใหม่ มีหน้าว่างและเทมเพลต Viewer Count กับ Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "เริ่มจากหน้าว่างหรือจากเทมเพลต")

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

## ตัวแก้ไข

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

![ตัวแก้ไขของตัวสร้างวิดเจ็ต มีการตั้งค่าพื้นฐานและตัวแปรผู้ใช้ทางซ้าย แท็บโค้ด HTML ตรงกลาง และตัวอย่างทางขวา](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "การตั้งค่า โค้ด และตัวอย่างในตัวแก้ไขของตัวสร้างวิดเจ็ต")

- **การตั้งค่าพื้นฐาน**: ชื่อ และความกว้างกับความสูงที่ใช้แสดงวิดเจ็ต
- **ตัวแปรผู้ใช้**: การตั้งค่าที่สตรีมเมอร์เปลี่ยนได้โดยไม่ต้องแตะโค้ด เช่น สี ข้อความ หรือตัวเลขเป้าหมาย ดู[ตัวแปรผู้ใช้](https://kickbot.com/th/docs/widgets/widget-builder-reference#user-variables)
- **ส่งอีเวนต์ทดสอบ**: ปุ่มที่ส่งอีเวนต์จำลอง (ซับ กิฟต์ซับ KICKs ติดตาม เรด ข้อความ และอื่น ๆ) ไปที่ตัวอย่าง
- **การมองเห็น**: บอกว่าวิดเจ็ตเป็นแบบส่วนตัวหรือเผยแพร่แล้ว และมีปุ่ม **เผยแพร่วิดเจ็ต**
- **โค้ด**: แท็บ **HTML**, **CSS** และ **JavaScript** ใช้ **เลย์เอาต์ตัวแก้ไข** ด้านบนเพื่อแสดงทีละไฟล์ (**หน้าเดียว**) หรือ 2 ไฟล์พร้อมกัน (**แบ่งซ้ายขวา** หรือ **ซ้อนบนล่าง**)
- **ตัวอย่าง**: แสดงวิดเจ็ตตามขนาดจริง ย่อให้พอดีกับพื้นที่ และอัปเดตขณะที่คุณพิมพ์ ใช้ปุ่มรีโหลดเพื่อเริ่มใหม่ หรือปุ่มแยกหน้าต่างเพื่อเปิดในหน้าต่างของตัวเอง (สะดวกเวลาจะเปิดคอนโซลของเบราว์เซอร์)

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

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

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

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

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

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

วิดเจ็ตทุกตัวที่คุณสร้างจะแสดงใน[วิดเจ็ตที่บันทึกไว้](https://kickbot.com/dashboard/saved-widgets) ด้วย โดยมีคำว่า “วิดเจ็ตของคุณเอง” อยู่ใต้ชื่อ URL ของวิดเจ็ตจะรันโค้ดล่าสุดของคุณเสมอ

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

ถ้าแก้โค้ดตอนที่วิดเจ็ตอยู่ใน OBS แล้ว ให้รีเฟรช browser source เพื่อโหลดโค้ดใหม่ เมื่อคุณเปลี่ยนค่าตัวแปรผู้ใช้ในหน้าวิดเจ็ตที่บันทึกไว้แล้วคลิก **บันทึก** OBS จะโหลดวิดเจ็ตใหม่เอง ดูความช่วยเหลือเพิ่มเติมที่[เพิ่ม browser source ลงใน OBS](https://kickbot.com/th/docs/getting-started/add-browser-source-obs)

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

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

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

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

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

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

## ลบวิดเจ็ต

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

## สมาชิกทีม

สมาชิกทีมต้องมีสิทธิ์ **ตัวสร้างวิดเจ็ต** จึงจะเปิดตัวแก้ไขและสร้างวิดเจ็ตได้ และต้องมีสิทธิ์ **ตั้งค่าวิดเจ็ต** จึงจะเห็น URL ของวิดเจ็ต ดู[จัดการทีม](https://kickbot.com/th/docs/account/team)

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

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

ต้อง อย่างน้อยต้องรู้ HTML, CSS และ JavaScript บ้าง ถ้าเขียนโค้ดไม่เป็น ให้ติดตั้งวิดเจ็ตจาก[คลังวิดเจ็ต](https://kickbot.com/th/docs/widgets/widget-library) แล้วปรับการตั้งค่าแทน

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

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

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

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

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

ได้ KickBot API แสดงรายการ สร้าง และอัปเดตวิดเจ็ตของคุณได้ ดู[ข้อมูลอ้างอิง API ของวิดเจ็ต](https://kickbot.com/docs/api/reference/widgets)