它能做什么
费用是行前决策的第一驱动因素。大多数旅行内容处理得很糟——要么是一段“在东南亚算便宜”式的空泛描述，要么是汇率一变就过期的静态表格。Orizn 预算计算器小组件用一个实时、可交互的答案取而代之。
访客选择国家、旅行风格（背包客 / 中档 / 舒适）和行程时长。小组件以其本币返回每日总额和全程总额，并按住宿、餐饮、交通、活动细分。每条费用线的数据来自 Numbeo、BackpackerIndex 与 Orizn 自有的每晚用户提交价格的混合。
小组件完全自挂载——把两行代码粘贴到 HTML 任意位置即可渲染。它兼容所有主流 CMS，gzip 后不到 15 KB，仅设置一枚用于回访预填的第一方 cookie，并自带可通过 50/50 联盟分成变现的指南购买 CTA。
小组件构建器
下方的小组件运行的正是你将粘贴到自己网站上的生产脚本。每个选项都会即时更新预览和代码——语言、主题、颜色、白标——调好后复制两行代码即可。
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.
功能特性
具体、有数据来源的功能——不是空泛的勾选项。以下每一条今天都已在生产版小组件中上线。
每个国家分为四条费用线——住宿、餐饮、交通、活动——数据来自 Numbeo、BackpackerIndex 及我们每晚聚合的用户提交价格。每条费用线均含经济/中档/高端三档。
访客只需切换一个分段控件即可重算总额。两周度假客和为一年基地定价的全职数字游民都用得上。
价格内部以 USD 存储，可通过每日刷新的汇率以 50+ 种货币显示。根据访客所在地区自动检测。
从 1 天拖到 365 天，总额实时更新，无需刷新页面。
一键在背包客、中档、舒适三种预设间切换。每种预设按比例调整四条费用线。
当目的地需要签证时，预算旁会出现一枚小徽章，让读者同时看到费用与入境规则。
结果下方会出现“查看完整越南预算指南”CTA。设置 data-affiliate 后，每笔销售的 50% 归你。
纯原生 JS、异步加载、作用域隔离的 CSS。与你的 Tailwind、Bootstrap 或现有分析脚本互不冲突。
最佳场景
小组件是通用的，但以下四类用户使用最多。只要你符合其中任何一类，粘贴代码后几分钟内就能见效。
在每篇国家攻略的“费用是多少？”H2 标题下嵌入小组件。读者带着具体数字离开，而不是一段模糊的描述。
把小组件置顶在首页。对比巴厘岛和里斯本的新订阅者几秒钟就能得到并排的费用答案，且归因到你的联盟代码。
嵌入到 /resources/cost-of-travel。成员为下一趟旅程估价时产生的指南销售，足以覆盖你的服务器账单。
与旅行社套餐并排嵌入。预算小组件锚定预期，你的产品回答下一个问题。
数据从何而来
每个国家的四条费用线每晚计算，数据来自 Numbeo（生活成本指数，约 120 国）、BackpackerIndex（背包客日均费用，约 80 国）以及带离群值剔除的自研用户提交聚合器。货币换算使用每日刷新的 ECB 与 OXR 中间价。悬停即可查看每条费用线的来源构成，保证编辑透明度。
参考
每个选项都是容器 div 上的一个 data-* 属性。无需任何 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"（跟随系统）、"light" 或 "dark"。 |
data-affiliate | string | "" | 你的 ORIZN-XXXXX 或 aff_… 联盟代码（两种格式均可），用于获得指南销售的 50/50 分成。 |
data-color | hex | #2563EB | 按钮、焦点环、滑块及 CTA 的强调色。仅接受十六进制色值（会做安全过滤）。 |
data-branding | string | "on" | 设为 "off" 即可白标：隐藏“Powered by Orizn”页脚、JSON-LD 结构化数据以及分享文案中的 orizn.app 字样。 |
data-radius | int | 16 | 小组件卡片和输入框的圆角半径（px）。 |
data-font | string | "system-ui" | 整个小组件使用的字体族。任何 CSS 字体栈均可。 |
data-currency | string | "USD" | 显示币种。接受 ISO 4217 代码（USD、EUR、GBP、JPY、VND、THB 等）——支持 50+ 种。 |
集成
同样的两行代码，不同技术栈的粘贴路径略有差异。各 CMS 的分步指南：
变现
在容器 div 上添加 data-affiliate="ORIZN-XXXXX" 即可——ORIZN-… 和 aff_… 两种代码格式均可。读者通过小组件购买的每份指南在点击后 30 天内归因到你，收益每月通过 Stripe 结算。无最低门槛、无追回条款，联盟后台数据完全透明。
常见问题
来自集成小组件的开发者、博主和联盟营销者的真实问题。如果没找到你的问题，/embed/getting-started 的文档覆盖了更长尾的内容。
相关小组件
五个小组件共享同一运行时，因此在页面上再加一个不产生任何额外开销。整个套件就是为组合而设计的。