วิดเจ็ตคำนวณงบประมาณท่องเที่ยวของ Orizn ให้ผู้อ่านเห็นค่าใช้จ่ายโดยประมาณรายวัน รายเดือน และรายปี ของ 195 ประเทศ — ที่พัก อาหาร การเดินทาง กิจกรรม — ในสกุลเงินของตัวเอง ฝังบนโพสต์จุดหมายปลายทางของคุณ แล้วเปลี่ยนความอยากรู้เรื่องค่าครองชีพให้เป็นยอดขายไกด์ที่มีคุณภาพ
มันทำอะไรได้
ค่าใช้จ่ายคือปัจจัยตัดสินใจก่อนทริปที่ใหญ่ที่สุด คอนเทนต์ท่องเที่ยวส่วนใหญ่จัดการเรื่องนี้ได้แย่ — ไม่ก็ย่อหน้าคลุมเครือแบบ “ราคาย่อมเยาสำหรับเอเชียตะวันออกเฉียงใต้” หรือตารางนิ่ง ๆ ที่ล้าสมัยทันทีที่อัตราแลกเปลี่ยนขยับ วิดเจ็ตคำนวณงบประมาณของ Orizn แทนที่ทั้งสองอย่างด้วยคำตอบสดแบบอินเทอร์แอกทีฟ
ผู้เยี่ยมชมเลือกประเทศ สไตล์การเดินทาง (Backpacker / Mid-range / Comfort) และระยะเวลาทริป วิดเจ็ตคืนค่ายอดรวมต่อวันและยอดรวมทั้งทริปในสกุลเงินของพวกเขาเอง แยกตามที่พัก อาหาร การเดินทาง และกิจกรรม ทุกหมวดมาจากการผสมข้อมูล Numbeo, BackpackerIndex และราคาที่ผู้ใช้ส่งเข้ามาของ Orizn ที่อัปเดตทุกคืน
วิดเจ็ต mount ตัวเองอัตโนมัติ — วางโค้ดสองบรรทัดที่ไหนก็ได้ใน HTML แล้วมันจะเรนเดอร์เอง ใช้ได้กับ CMS หลักทุกตัว หนักไม่ถึง 15 KB gzip ตั้งคุกกี้ first-party เพียงตัวเดียวสำหรับกรอกค่าล่วงหน้าในการกลับมาครั้งถัดไป และมาพร้อม CTA ซื้อไกด์ที่คุณสร้างรายได้ได้ด้วยส่วนแบ่งแอฟฟิลิเอต 50/50
ตัวสร้างวิดเจ็ต
วิดเจ็ตด้านล่างรันสคริปต์ production ตัวเดียวกับที่คุณจะวางบนเว็บไซต์ของคุณเอง ทุกตัวเลือกอัปเดตพรีวิวและสนิปเพ็ตทันที — ภาษา ธีม สี white-label แล้วคัดลอกโค้ดสองบรรทัดไปใช้
Live preview · updates as you type
The widget above runs the exact production script you would paste on your own site — async, zero dependencies, scoped CSS. Every option on the left maps to a data-* attribute in the snippet.
ฟีเจอร์
ฟีเจอร์ที่เจาะจงและมีแหล่งอ้างอิง — ไม่ใช่เช็คบ็อกซ์ทั่วไป ทุกข้อด้านล่างอยู่ในวิดเจ็ต production วันนี้
แต่ละประเทศมีค่าใช้จ่าย 4 หมวด — ที่พัก อาหาร การเดินทาง กิจกรรม — จาก Numbeo, BackpackerIndex และตัวรวบรวมข้อมูลจากผู้ใช้ของเราที่อัปเดตทุกคืน แต่ละหมวดแสดงระดับ budget/mid/premium
ผู้เยี่ยมชมสลับ segmented control เดียวเพื่อคำนวณยอดรวมใหม่ เหมาะทั้งนักท่องเที่ยวสองสัปดาห์และ digital nomad เต็มเวลาที่กำลังตั้งฐานหนึ่งปี
ราคาถูกเก็บภายในเป็น USD แต่แสดงผลได้ในกว่า 50 สกุลเงินผ่านอัตราแลกเปลี่ยนที่รีเฟรชรายวัน ตรวจจับอัตโนมัติจากโลแคลของผู้เยี่ยมชม
ลากสไลเดอร์จาก 1 วันถึง 365 วัน ยอดรวมอัปเดตแบบเรียลไทม์โดยไม่ต้องเปลี่ยนหน้า
แตะครั้งเดียวสลับระหว่างพรีเซ็ต Backpacker, Mid-range และ Comfort แต่ละพรีเซ็ตปรับค่าใช้จ่ายทั้ง 4 หมวดตามสัดส่วน
เมื่อจุดหมายต้องใช้วีซ่า จะมีชิปเล็ก ๆ ปรากฏข้างงบประมาณ ให้ผู้อ่านเห็นทั้งค่าใช้จ่ายและกฎการเข้าเมืองพร้อมกัน
CTA "ดูไกด์งบประมาณเวียดนามฉบับเต็ม" ปรากฏใต้ผลลัพธ์ เมื่อตั้ง data-affiliate แล้ว ทุกยอดขายแบ่ง 50% ให้คุณ
Vanilla JS โหลดแบบ async CSS ถูก scope ไม่ชนกับ Tailwind, Bootstrap หรือสคริปต์ analytics เดิมของคุณ
จุดที่มันโดดเด่น
วิดเจ็ตใช้งานได้ทั่วไป แต่มีสี่กลุ่มที่นำไปใช้บ่อยที่สุด ถ้าคุณเห็นตัวเองในกลุ่มใดกลุ่มหนึ่ง คุณจะได้คุณค่าภายในไม่กี่นาทีหลังวางโค้ด
วางวิดเจ็ตใต้หัวข้อ H2 "ต้องใช้เงินเท่าไหร่?" ในไกด์ทุกประเทศ ผู้อ่านได้ตัวเลขที่จับต้องได้ ไม่ใช่ย่อหน้าคลุมเครือ
ปักหมุดวิดเจ็ตบนหน้าแรก สมาชิกใหม่ที่เปรียบเทียบบาหลีกับลิสบอนได้คำตอบด้านค่าใช้จ่ายแบบเทียบกันในไม่กี่วินาที นับ attribution ให้โค้ดแอฟฟิลิเอตของคุณ
ฝังบน /resources/cost-of-travel สมาชิกที่กำลังตั้งงบทริปถัดไปสร้างยอดขายไกด์ที่ช่วยจ่ายค่าโฮสติ้งของคุณ
ฝังคู่กับแพ็กเกจของเอเจนซี่ วิดเจ็ตงบประมาณตั้งความคาดหวัง ข้อเสนอของเอเจนซี่ตอบคำถามถัดไป
ข้อมูลมาจากไหน
ค่าใช้จ่าย 4 หมวดของแต่ละประเทศคำนวณทุกคืนจาก Numbeo (ดัชนีค่าครองชีพ ~120 ประเทศ), BackpackerIndex (อัตรารายวันแบ็คแพ็คเกอร์ ~80 ประเทศ) และตัวรวบรวมข้อมูลจากผู้ใช้ของเราเองพร้อมการตัด outlier การแปลงสกุลเงินใช้อัตรากลางตลาดจาก ECB และ OXR ที่รีเฟรชรายวัน รายละเอียดแหล่งที่มาของแต่ละหมวดดูได้เมื่อ hover เพื่อความโปร่งใสเชิงบรรณาธิการ
อ้างอิง
ทุกตัวเลือกคือแอตทริบิวต์ data-* บน container div ไม่ต้องตั้งค่า JavaScript ใด ๆ — วาง ตั้งแอตทริบิวต์ที่ต้องการ แล้วปล่อยของ
| พารามิเตอร์ | ชนิด | ค่าดีฟอลต์ | คำอธิบาย |
|---|---|---|---|
data-destination | ISO3 | "" | ตั้งค่าประเทศปลายทางล่วงหน้า (เช่น VNM, THA, MEX) ผู้เยี่ยมชมเปลี่ยนเองได้ |
data-lang | string | "auto" | กำหนดภาษาแทนการตรวจจับอัตโนมัติจากเบราว์เซอร์ รองรับ 16 โลแคล: en, fr, es, de, it, pt, ja, ko, zh, ru, ar, hi, th, vi, tl, tr (ภาษาอาหรับแสดงผลแบบ RTL) |
data-theme | string | "auto" | บังคับธีม: "auto" (ตาม OS), "light" หรือ "dark" |
data-affiliate | string | "" | โค้ด ORIZN-XXXXX หรือ aff_… ของคุณ (ใช้ได้ทั้งสองรูปแบบ) สำหรับส่วนแบ่งรายได้ 50/50 จากยอดขายไกด์ |
data-color | hex | #2563EB | สีเน้นสำหรับปุ่ม focus ring สไลเดอร์ และ CTA รับเฉพาะค่า hex (ผ่านการ sanitize) |
data-branding | string | "on" | ตั้งเป็น "off" เพื่อ white-label: ซ่อนฟุตเตอร์ "Powered by Orizn" สคีมา JSON-LD และการอ้างถึง orizn.app ในข้อความแชร์ |
data-radius | int | 16 | รัศมีมุมโค้งเป็น px สำหรับการ์ดวิดเจ็ตและช่องกรอกข้อมูล |
data-font | string | "system-ui" | Font-family ที่ใช้ทั่วทั้งวิดเจ็ต ใช้ CSS font stack ใดก็ได้ |
data-currency | string | "USD" | สกุลเงินที่แสดงผล รับรหัส ISO 4217 (USD, EUR, GBP, JPY, VND, THB, …) — รองรับกว่า 50 สกุล |
การเชื่อมต่อ
โค้ดสองบรรทัดเดียวกัน วิธีวางต่างกันเล็กน้อยตาม stack ของคุณ ไกด์ทีละขั้นตอนแยกตาม CMS:
สร้างรายได้
เพิ่ม data-affiliate="ORIZN-XXXXX" ลงบน container div — รับโค้ดทั้งรูปแบบ ORIZN-… และ aff_… การซื้อไกด์ทุกครั้งที่ผู้อ่านทำผ่านวิดเจ็ตจะนับ attribution ให้คุณนาน 30 วัน จ่ายเงินรายเดือนผ่าน Stripe ไม่มีขั้นต่ำ ไม่มี clawback โปร่งใสเต็มที่บนแดชบอร์ดแอฟฟิลิเอต
คำถามที่พบบ่อย
คำถามจริงจากนักพัฒนา บล็อกเกอร์ และนักการตลาดแอฟฟิลิเอตที่กำลังติดตั้งวิดเจ็ต ถ้าคำถามของคุณไม่อยู่ที่นี่ เอกสารที่ /embed/getting-started ครอบคลุมส่วนที่เหลือ
วิดเจ็ตที่เกี่ยวข้อง
วิดเจ็ตทั้งห้าตัวใช้ runtime เดียวกัน การเพิ่มตัวที่สองลงหน้าเดิมจึงไม่มีต้นทุนเพิ่ม ชุดนี้ถูกออกแบบมาให้ใช้ร่วมกัน
ข้อกำหนดวีซ่าแบบเรียลไทม์สำหรับ 199 พาสปอร์ต × 199 จุดหมายปลายทาง
อันดับ mobility + รายละเอียด 4 แกนของ 199 พาสปอร์ต รีเฟรชทุกคืน
เทียบข้างกันทั้งค่าใช้จ่าย วีซ่า ความปลอดภัย และภูมิอากาศของสองประเทศใดก็ได้
เช็กลิสต์เอกสาร วัคซีน แพ็คของ และเรื่องเงินแบบเฉพาะบุคคลต่อทริป
พร้อมฝังหรือยัง?
HTML สองบรรทัด ไม่มี dependency ฟรีตลอดไป เพิ่มโค้ดแอฟฟิลิเอตแล้วเริ่มรับ 50% จากไกด์ทุกเล่มที่วิดเจ็ตของคุณขายได้