RevenueCat Paywalls：自定义组件实现动画与折叠交互
Beyond the building blocks: custom components for Paywalls and Funnels
Arthur C. Clarke, the British science-fiction author and futurist behind 2001: A Space Odyssey, spent his career imagining what technology could make possible.
《2001太空漫游》的英国科幻作家兼未来学家阿瑟·C·克拉克（Arthur C. Clarke）毕生都在想象技术能实现什么。
As he put it:
正如他所言：
“The only way of discovering the limits of the possible is to venture a little way past them into the impossible.”
"发现可能性的唯一方法，就是冒险稍微越过它们，踏入不可能之境。"
Even flexible visual builders have limits. You can arrange the available components in countless ways, but some ideas, such as a branded animation or expandable FAQs, don’t fit neatly within a predefined set of building blocks.
即使是灵活的可视化构建器也有其局限。你可以用无数种方式排列可用组件，但某些创意，例如品牌动画或可展开的常见问题解答（FAQs），无法完美地融入预定义的构建模块集合中。
We want to give developers more freedom to push what their purchase experiences can do and bring their most creative ideas to life. That’s why we introduced custom components for RevenueCat Paywalls and web-to-app Funnels.
我们希望赋予开发者更多自由，去拓展其购买体验的能力，并将最具创意的想法变为现实。这就是为什么我们为 RevenueCat Paywalls 和 web-to-app Funnels 引入了自定义组件。
With custom components, you can bring self-contained HTML, CSS, and JavaScript into a paywall or funnel to create animated backgrounds and icons, accordions and expandable content, and experiences tailored to your app.
通过自定义组件，你可以将自包含的 HTML、CSS 和 JavaScript 引入支付墙或转化漏斗中，以创建动画背景与图标、手风琴式折叠面板及可展开内容，并打造专为你的应用定制的体验。
Purchase-critical elements still rely on RevenueCat’s native components and checkout flows. But the canvas around them just became much bigger.
对购买至关重要的元素仍依赖 RevenueCat 的原生组件和结账流程。但它们周围的画布空间现在变得大得多了。
Here are two ways to put custom components to work.
以下是两种利用自定义组件的方法。
Bring your purchase experience to life with animation
通过动画让购买体验栩栩如生
Motion can add personality, reinforce your brand, and guide attention toward the most important parts of a paywall or web-to-app funnel.
动态效果可以增添个性、强化品牌形象，并将注意力引导至支付墙或 web-to-app 转化漏斗中最关键的部分。
Custom components let you create animated backgrounds, icons, illustrations, and other visual treatments that go beyond static media. You can build animations directly with CSS or JavaScript, or use libraries such as Lottie and Rive by including them in your component bundle.
自定义组件让你能够创建超越静态媒体的动画背景、图标、插图及其他视觉特效。你可以直接使用 CSS 或 JavaScript 构建动画，或者通过将 Lottie 和 Rive 等库包含在你的组件包中来使用它们。
For example, you could:
例如，你可以：
- Add a subtle animated background behind your value proposition
- Bring benefit icons to life as customers explore an offer
- Use a looping illustration to demonstrate your app’s premium experience
- Add branded motion to connect the different steps of a web-to-app funnel
- 在价值主张背后添加微妙的动画背景
- 当客户浏览优惠时，让利益点图标动起来
- 使用循环播放的插图来展示应用的优质体验
- 添加品牌化动效，以串联 web-to-app 转化漏斗的不同步骤
Animation doesn’t need to dominate the experience. Even small moments of movement can make a paywall or funnel feel more polished and connected to the rest of your brand.
动画不必主导整个体验。即使是微小的动态瞬间，也能让支付墙或转化漏斗看起来更加精致，并与品牌的其他部分保持一致。
Let customers expand the details they care about
让客户自行展开他们关心的详情
Customers often have questions before subscribing, but putting every answer on the screen at once can make a purchase experience difficult to scan.
客户在订阅前通常会有各种问题，但如果一次性将所有答案都显示在屏幕上，会让购买体验难以快速浏览。
With HTML and JavaScript, you can create accordions and expandable sections that keep the initial experience focused while giving customers access to additional context.
借助 HTML 和 JavaScript，你可以创建手风琴式折叠面板和可展开区域，使初始体验保持聚焦，同时让客户能够访问额外的上下文信息。
You might use expandable content for:
你可能会将可展开内容用于：
- Frequently asked questions
- More information about individual benefits
- Explanations of how a feature works
- Details about what’s included with an upgrade
- Supporting information within a web-to-app onboarding journey
- 常见问题解答（FAQs）
- 关于各项福利的更多信息
- 功能工作原理的说明
- 升级包含内容的详情
- 网页到应用引导流程中的辅助信息
This creates a more layered experience. Customers can quickly understand the primary value proposition, then dig deeper when they need reassurance or clarification.
这创造了更具层次感的体验。客户可以快速理解核心价值主张，然后在需要安心或澄清时深入探索。
In a paywall, expandable content can keep the offer focused without hiding useful details. In a funnel, it can add depth to an onboarding screen without turning every step into a wall of text.
在付费墙中，可展开的内容可以在不隐藏有用细节的情况下保持优惠聚焦。在转化漏斗中，它可以在引导屏幕中增加深度，而不会让每一步都变成大段文字。
Build it with an agent or write it yourself
使用智能体构建或自行编写
To get started, add a custom component in the RevenueCat Paywall or Funnel Editor and download the starter bundle. It includes an index.html entry point, a local preview, packaging tools, a getting-started guide, and instructions that coding agents can follow.
要开始使用，请在 RevenueCat Paywall 或 Funnel Editor 中添加自定义组件并下载入门包。它包括一个 index.html 入口文件、本地预览功能、打包工具、入门指南以及可供编码智能体遵循的说明。
You can give the folder to your coding agent of choice and describe the experience you want.
您可以将文件夹交给您选择的编码智能体，并描述您想要的体验。
Your coding agent can use the included instructions to build the component within RevenueCat’s requirements. If you prefer to work directly with the code, you can edit the HTML, CSS, and JavaScript yourself.
您的编码智能体可以使用包含的说明，在符合 RevenueCat 要求的前提下构建该组件。如果您更喜欢直接处理代码，也可以自行编辑 HTML、CSS 和 JavaScript。
When the component is ready, preview it, package the files, and upload the resulting ZIP file. You can then place the custom component where you want it in your paywall or funnel.
当组件准备就绪后，预览它，打包文件，然后上传生成的 ZIP 文件。随后，您可以将自定义组件放置在付费墙或转化漏斗中的所需位置。
Creativity, with guardrails
有护栏的创意发挥
Custom components are self-contained and run inside the area they occupy in your paywall or funnel. They’re intended for decorative and supplementary experiences.
自定义组件是独立的，并在其在付费墙或转化漏斗中所占区域内运行。它们旨在用于装饰性和补充性的体验。
They shouldn’t contain interface elements required to complete a purchase. In Paywalls, packages and purchase buttons must remain native. In Funnels, custom components should complement RevenueCat’s native purchase controls and checkout flow.
它们不应包含完成购买所需的界面元素。在付费墙中，套餐和购买按钮必须保持原生状态。在转化漏斗中，自定义组件应补充 RevenueCat 的原生购买控件和结账流程。
Uploaded bundles must also follow RevenueCat’s security, file structure, and size requirements. For in-app paywalls, your app needs a supported RevenueCat SDK version to display custom components. Review the custom component requirements and minimum SDK versions before publishing.
上传的包还必须符合 RevenueCat 的安全、文件结构和大小要求。对于应用内付费墙，您的应用需要支持特定版本的 RevenueCat SDK 才能显示自定义组件。在发布之前，请查阅自定义组件要求和最低 SDK 版本。
Custom components open up a much broader creative canvas across RevenueCat Paywalls and web-to-app Funnels, from a single animated icon to an expandable experience that helps customers understand why they should upgrade.
自定义组件为 RevenueCat 付费墙和网页到应用转化漏斗打开了更广阔的创意画布，从单个动画图标到帮助客户理解为何应该升级的可展开体验。
Open the RevenueCat Dashboard and start building.
打开 RevenueCat Dashboard 并开始构建。
We can’t wait to see what you create.
我们迫不及待想看到您创造的作品。
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力