เอกสารวิดเจ็ต
คู่มือฉบับสมบูรณ์สำหรับฝังและปรับแต่งวิดเจ็ตเครื่องแปลงสกุลเงิน Currency.Wiki บนเว็บไซต์ของคุณ
สารบัญ
1 เริ่มต้นใช้งาน
การเพิ่มวิดเจ็ตเครื่องแปลงสกุลเงินลงในเว็บไซต์ของคุณทำได้ง่าย ๆ เพียงทำตามขั้นตอนเหล่านี้:
- ไปที่หน้าตัวสร้างวิดเจ็ตและปรับแต่งรูปลักษณ์วิดเจ็ตของคุณ
- เลือกสไตล์วิดเจ็ต สกุลเงิน และธีมที่คุณต้องการ
- คัดลอกรหัสฝังที่สร้างขึ้น (Script หรือ Iframe)
- วางโค้ดลงใน HTML ของเว็บไซต์ในตำแหน่งที่คุณต้องการให้วิดเจ็ตแสดง
เคล็ดลับ: ใช้พรีเซ็ตเริ่มต้นด่วนในตัวสร้างวิดเจ็ตเพื่อเริ่มต้นอย่างรวดเร็วด้วยวิดเจ็ตที่ตั้งค่าล่วงหน้า
2 วิธีฝัง
ฝัง Script (แนะนำ)
วิธีฝังแบบสคริปต์จะฝังวิดเจ็ตลงในหน้าโดยตรง เมนูดรอปดาวน์สกุลเงินจะแสดงเหนือเนื้อหาโดยรอบเพื่อให้เลือกได้ง่าย
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- ดรอปดาวน์แสดงนอกกล่องวิดเจ็ต
- เหมาะสำหรับการเลือกสกุลเงินแบบโต้ตอบ
- ผสานรวมกับหน้าเว็บของคุณได้อย่างไร้รอยต่อ
ฝัง Iframe
วิธีฝังแบบ iframe จะสร้างกล่องแยกสำหรับวิดเจ็ต วิธีนี้ปลอดภัยและเหมาะกับสภาพแวดล้อมที่มีนโยบายเนื้อหาเข้มงวด
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- แยกจากสไตล์หน้าเว็บของคุณโดยสมบูรณ์
- ทำงานกับ Content Security Policies ที่เข้มงวด
- ติดตั้งง่ายและปลอดภัย
หมายเหตุ: ใช้ Script embed สำหรับการโต้ตอบเต็มรูปแบบ (ดรอปดาวน์แสดงเหนือเนื้อหา) ใช้ Iframe embed เมื่อคุณต้องการความแยกหรือมีข้อจำกัด CSP
3 สไตล์วิดเจ็ต
เลือกจาก 11 สไตล์วิดเจ็ตที่แตกต่างกันให้เข้ากับดีไซน์เว็บไซต์ของคุณ แต่ละสไตล์เหมาะกับการใช้งานและขนาดหน้าจอที่ต่างกัน
mini
250x140px
เครื่องแปลงสกุลเงินแบบบรรทัดเดียว เหมาะสำหรับส่วนหัวหรือพื้นที่จำกัด
square
250x250px
วิดเจ็ตอัตราส่วน 1:1 พร้อมปุ่มสลับ เหมาะสำหรับแถบด้านข้าง
compact
300x180px
เครื่องแปลงสกุลเงินขนาดเล็กพร้อมฟีเจอร์สำคัญครบถ้วน
inline
480x56px
เลย์เอาต์แนวนอน เหมาะสำหรับฝังในเนื้อหาหรือเมนูนำทาง
tall
200x280px
เลย์เอาต์แนวตั้งแบบแถบด้านข้างพร้อมป้ายคลาสสิก
mini-chart
250x260px
เครื่องแปลงสกุลเงินขนาดเล็กพร้อมกราฟเส้นแสดงประวัติอัตรา
multi-expandable
300x320px
เครื่องแปลงสกุลเงินหลายสกุล ผู้ใช้สามารถเพิ่ม/ลบสกุลเงินได้
multi-fixed
300x300px
รายการอัตราแลกเปลี่ยนแบบคงที่ เหมาะสำหรับแสดงอัตราเฉพาะ
rates-compact
250x320px
รายการอัตราแลกเปลี่ยนแบบย่อพร้อมเวลาปรับปรุงล่าสุด
rates-viewer
300x500px
มุมมองกราฟเต็มพร้อมข้อมูลอัตราโดยละเอียด
rates-viewer-compact
300x400px
เวอร์ชันย่อของมุมมองอัตราพร้อมกราฟ
4 พารามิเตอร์ URL
ปรับแต่งวิดเจ็ตของคุณด้วยพารามิเตอร์ URL เหล่านี้ ใช้ได้กับทั้ง Script และ Iframe embed
| พารามิเตอร์ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|
| style | compact | สไตล์วิดเจ็ต (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | ธีมสี (light, dark หรือ auto) |
| from | USD | รหัสสกุลเงินต้นทาง (เช่น USD, EUR, GBP) |
| to | EUR | รหัสสกุลเงินเป้าหมาย (เช่น EUR, USD, JPY) |
| amount | 1000 | จำนวนเงินเริ่มต้นสำหรับการแปลง |
| accent | #2563eb | สีเน้นในรูปแบบ hex (ไม่ต้องใส่ #) |
| lang | en | รหัสภาษาของวิดเจ็ต (เช่น en, es, fr, de) |
| flags | 1 | แสดงธงประเทศ (1=แสดง, 0=ซ่อน) |
| display | iso | รูปแบบการแสดงสกุลเงิน (iso=USD, symbol=$) |
| lock | 0 | ล็อกสกุลเงิน (1=ล็อก, 0=ไม่ล็อก) |
| currencies | EUR,GBP,JPY | รายการสกุลเงินคั่นด้วยจุลภาคสำหรับวิดเจ็ตหลายสกุลเงิน |
| dropdown | all | สกุลเงินในดรอปดาวน์ (all, top10, top20 หรือรายการคั่นด้วยจุลภาค) |
| branding | 1 | แสดงแบรนด์ (1=แสดง, 0=ซ่อน) |
| brandinglink | 1 | ทำให้แบรนด์คลิกได้ (1=ลิงก์, 0=ข้อความเท่านั้น) |
| format | auto | รูปแบบตัวเลข (auto, us, eu, french, indian) |
| decimals | 2 | จำนวนตำแหน่งทศนิยม (0-6) |
| chart | 0 | เปิดใช้งานกราฟ (1=เปิด, 0=ปิด) |
| chartperiod | 7d | ช่วงเวลากราฟ (7d, 14d, 30d, 90d) |
ตัวอย่าง
เครื่องแปลงสกุลเงินขนาดกะทัดรัดธีมมืด:
?style=compact&theme=dark&from=USD&to=EUR
อัตราแลกเปลี่ยนหลายสกุลเงิน:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
เครื่องแปลงขนาดเล็กพร้อมกราฟ 30 วัน:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
แสดงสัญลักษณ์สกุลเงินแทนรหัส:
?style=compact&display=symbol&from=USD&to=EUR
ล็อกสกุลเงินพร้อมจำนวนเงินกำหนดเอง:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 ตัวเลือกการปรับแต่ง
ตัวเลือกธีม
- light - พื้นหลังสว่างพร้อมข้อความสีเข้ม
- dark - พื้นหลังมืดพร้อมข้อความสีสว่าง
- auto - ปรับอัตโนมัติตามการตั้งค่าระบบของผู้ใช้
รูปแบบการแสดงสกุลเงิน
- iso - แสดงรหัส ISO เช่น USD, EUR, GBP
- symbol - แสดงสัญลักษณ์สกุลเงิน เช่น $, €, £
รูปแบบตัวเลข
- auto - ตรวจจับการตั้งค่าภาษาเบราว์เซอร์ของผู้เยี่ยมชมโดยอัตโนมัติ
- us - รูปแบบ US: 1,234.56
- eu - รูปแบบยุโรป: 1.234,56
- french - รูปแบบฝรั่งเศส: 1 234,56
- indian - รูปแบบอินเดีย: 1,23,456.78
ตัวเลือกสกุลเงินในดรอปดาวน์
- all - สกุลเงินที่รองรับทั้งหมด 170+
- top10 - 10 สกุลเงินยอดนิยม
- top20 - 20 สกุลเงินที่มีปริมาณการซื้อขายสูงสุด
- USD,EUR,GBP,... - รายการสกุลเงินเฉพาะที่กำหนดเอง
เคล็ดลับ: ใช้ตัวสร้างวิดเจ็ตเพื่อกำหนดค่าตัวเลือกเหล่านี้แบบภาพและสร้างโค้ดฝังโดยอัตโนมัติ
6 การแก้ไขปัญหา
วิดเจ็ตไม่แสดง
ตรวจสอบให้แน่ใจว่าโค้ดฝังอยู่ใน HTML อย่างถูกต้อง สำหรับ Script embed ให้ตรวจสอบว่ามี div container พร้อม ID ที่ถูกต้อง ตรวจสอบคอนโซลเบราว์เซอร์สำหรับข้อผิดพลาด JavaScript
ดรอปดาวน์ไม่ทำงาน
หากใช้ iframe embed ดรอปดาวน์จะเลื่อนภายในพื้นที่วิดเจ็ต สำหรับฟีเจอร์ดรอปดาวน์เต็มรูปแบบพร้อม overlay ให้ใช้วิธีฝังแบบ script แทน
ปัญหาสไตล์ขัดแย้ง
หาก CSS ของเว็บไซต์คุณมีผลกับวิดเจ็ต ให้ลองใช้วิธีฝังแบบ iframe ซึ่งจะแยกสไตล์วิดเจ็ตออกจากหน้าเว็บของคุณ
ปัญหา Content Security Policy
หากคุณมี CSP ที่เข้มงวด อาจต้องเพิ่ม currency.wiki ใน script-src และ frame-src ที่อนุญาต ตัวอย่าง: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
ต้องการความช่วยเหลือ?
ไม่พบสิ่งที่คุณต้องการ? ทีมสนับสนุนของเราพร้อมช่วยเหลือคุณ
