# @beamimpact/web-sdk 中文文档 规范地址：https://npmcn.com/package/%40beamimpact/web-sdk/ 版本：1\.58\.4 npm 元数据更新时间：2026-11-02T20:26:36.749Z 中文译文更新时间：2026-11-07T19:41:38.620Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40beamimpact/web-sdk 原文对照：https://npmcn.com/package/%40beamimpact/web-sdk/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：4.6 MB，331 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：18\.x \|\| 20\.x \|\| 22\.x \|\| 24\.x - 运行依赖：9 个 - 首次发布：2023-11-06T22:36:13.304Z - 最新版本发布：2026-11-02T20:26:36.581Z - 近 30 天下载量：18959（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：79（近 12 个月 20 个） ## 中文简介 Beam SDK使品牌在共享价值之上与用户连接,而不是交易折扣,以建立更强的忠诚. 我们的整合通过让用户(a) 选择一个非盈利性企业 在那里,品牌将捐赠他们的部分食品 ## 安装 ```sh npm install @beamimpact/web-sdk ``` 也可以使用：`pnpm add @beamimpact/web-sdk`、`yarn add @beamimpact/web-sdk`、`bun add @beamimpact/web-sdk` ## README # @束波/web-sdk Beam SDK使品牌在共享价值之上与用户连接,而不是交易折扣,以建立更强的忠诚. 我们的一体化是通过允许用户(a) 选择一个非营利机构,在该机构中,该品牌将从一套管理好的选项中捐出部分购买权,并(b) 跟踪其累积影响,按顺序排列,以实现可量化的目标. Beam负责所有的非营利管理和合规、影响跟踪、UI的造型和动态宣传. ![Beam](https://cdn01.beamimpact.com/chains/img/beam-logo.png) **学习更多: [bam-impact.com (原始内容存档于2018-09-29)](https://beamimpact.com/)** * * * - [安装](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-installation) - [光盘N](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-cdn) - [国家预防机制](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-npm) - [使用束](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-using-beam) - [Web 组件](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-web-components) - [反应](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-react) - [服务器端渲染](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-serverside-rendering) - [调试模式](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-debug-mode) - [组件选项](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-component-options) - [束-社区影响](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-beam-community-impact) - [梁-累积-影响](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-beam-cumulative-impact) - [梁选非盈利](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-beam-select-nonprofit) - [活动](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-events) - [**事件类型**](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-event-types) - [后购梁](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-beam-post-purchase) - [活动](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-events-1) - [自定义内部组件](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-customizing-inner-components) - [一体化](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-integrations) - [墨盒整合](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-cart-integration) - [购买](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-shopify) - [用户](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-utils) - [一体化](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-integrations-1) - [Statsig A/B 测试](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-statsig-ab-testing) - [可见度](https://npmcn.com/package/%40beamimpact/web-sdk/#readme-visibility) ![Screenshot of Beam component](https://sdk.beamimpact.com/assets/img/screenshots/beam-select-nonprofit.png) Beam Web SDK 提供了一组网络组件和针对框架的包装 将Beam组件纳入电子商务网站. ## 安装 `@beamimpact/web-sdk` 国家防范机制或通过CDN提供. ### 光盘N 大部分电子商务应用都会将Beam装入CDN. 包含要在页面上方使用的组件的脚本 : ```html ``` > **版本数** > > 替换 `v1.36.1` 与 [关于国家预防机制的最新版本](https://www.npmjs.com/package/@beamimpact/web-sdk?activeTab=versions) - `type="module"` 需要正确解析捆绑 - 此脚本将注册 Beam 自定义元素, 因此可以在页面的任意位置使用 - 您可能需要调整您的页面内容安全政策, 以允许从 Beamimpact.com 获取脚本和图像 . ### 国家预防机制 ```shell npm install @beamimpact/web-sdk ``` 导入您的应用程序 JavaScript 中的组件 : ```js import { BeamCommunityImpact } from "@beamimpact/web-sdk/dist/components"; // Native web component import { BeamCommunityImpact } from "@beamimpact/web-sdk/dist/react"; // React component ``` ## 使用束 ### Web 组件 Beam 网络组件是自定义元素,因此可以用于 HTML : ```html ``` 因为它们是标准的 HTML 元素,Beam 组件可以具有像 `class`, (中文(简体) ), `style`,以及 `data-attributes`。 。 。 . 还可以使用 Javascript 创建组件 : ```js const component = document.createElement("beam-select-nonprofit"); component.chainId = 1000; component.apiKey = "abc123"; const parent = document.querySelector("#sidebar-cart .footer"); parent.appendChild(component); ``` 元素还可以有在脚本加载前出现或无法解析的孩子: ```html Fallback or loading content ``` ### 反应 Beam为网络组件提供了反应包装. 关键差异:事件处理器召回被曝光为Beam事件,组件使用 JSX友好大写格式. ```tsx import { BeamSelectNonprofit } from "@beamimpact/web-sdk/dist/react"; import { events } from "@beamimpact/web-sdk/dist/integrations/utils"; { const { selectedNonprofitId, nonprofitName } = event.detail; // do something }} />; ``` ### 服务器端渲染 **(i,下一个JS)** Beam组件在本地Storage和cookie中运行客户端并保存数据(如用户的非营利选择). 使用 [下一个/动态](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) 至懒惰 组件在客户端而不是服务器上同步. ```tsx "use client"; import dynamic from "next/dynamic"; const BeamSelectNonprofit = dynamic(() => import("@beamimpact/web-sdk/dist/react/select-nonprofit"), { loading: () => null, ssr: false, }); ``` ### 调试模式 添加数据 `debug` 属性到组件,以显示发生错误时 DOM 中的错误状态。 否则,检查一下 控制台日志. ```html ``` ## 组件选项 所有部件所需的道具: - `apiKey` - Beam API 键 可选道具 : - `baseUrl` - (由Beam提供) - 用于 dev或中转 API 的 URL - `lang` - 说吧 `en`, (中文(简体) ), `fr`等 (中文(简体) ). Beam 支持的翻译目标的语言代码 ### 束-社区影响 为每个非盈利组织展示有品牌支持的影响力进步卡,品牌影响力页等. ```html ``` - `chainId` = Beam 客户身份证 - `cardStyle` =: `image` 或者说 `icon` - 用于撞击卡的视觉风格 ### 梁-累积-影响 在非营利筹资目标方面显示出总的影响,例如“清除了9 000磅海洋垃圾” ```html ``` - `chainId` = Beam 客户身份证 ### 梁选非盈利 集成到推车中的组件,让用户在退货时支持非营利组织. ```html Select a nonprofit ``` - `storeId` = 网站的Beam ID,即欧盟或美国在线商店(可选) - 用于向用户显示相关的非营利性 - `countryCode` 打开 `postalCode` = 如果 `storeId` 不提供,而是可以提供地点信息(可选) - `cart` = 通常由推车整合自动设置(见下文),推车属性允许自定义 根据推车中的物品显示的非盈利 #### 活动 ```js document.addEventListener("beamnonprofitselect", (evt) => { const { selectedNonprofitId, selectionId, nonprofitName } = evt.detail; // ... }); ``` #### **事件类型** **选择非营利构成部分和采购后构成部分** - **事件 :** `beamnonprofitselect` - **说明 :** 当终端用户在 Beam 组件中选择一个非营利时, 当前一个选择被自动恢复时, 发送 **选择非营利部分** - **事件 :** `beamcartchange` - **说明 :** 当Beam发现推车内装物有变化时,当首次将物品添加到推车中时,即予确认 - **事件 :** `beamnonprofitselectionremoved` - **说明 :** 在非盈利性选择被取消或由于非盈利性群体变动而取消时被允许入境 **Statsig / A/B 实验** - **事件 :** `beamstatsiginitialized` - **说明 :** 当Statsig完成为本届会议指定实验变体时即予以确认。 包含 `showBeam` (是否应当显示组件)和 `stableId` (Statsig会议Id). **采购后构成部分** - **事件 :** `beamordercreated` - **说明 :** 首次向Beam登记命令时发出通知,但重复访问、页面刷新等时不发出通知. ### 后购梁 用于登记交易和使交易 `beam-impact-overview` 或者说 `beam-redeem-transaction` 组件,取决于用户在购买之前是否进行了选择. ```html ``` ```js const component = document.createElement("beam-post-purchase"); // Config values: component.apiKey = "abc123"; // Required component.storeId = 100; // Beam Store ID component.countryCode = "GB"; // 2-letter country code for order component.postalCode = "11111"; // String - postalCode in country-specific format component.orderId = String(10101); // partner provides ID component.email = "test@beamimpact.com"; // user email component.cartTotal = 100.01; // Cart total before tax component.currencyCode = "USD"; // "CAD" etc. component.cart = { schema: { source: "shopify", }, content: { items: [{ sku: "PRODUCT-100" }], }, }; // see OpenAPI spec for cart formats component.discountCodes = ["PROMO10", "CLEARANCE_50"]; // discount / promo codes component.lang = "en"; // en | fr Language component.domain = "example.com"; // [Optional] Base domain of the store, if subdomains for store and checkout differ component.debug = false; // boolean ``` #### 活动 ```js document.addEventListener("beamnonprofitselect", (evt) => { const { selectedNonprofitId, nonprofitName } = evt.detail; // ... }); ``` #### 自定义内部组件 使用 `beam-post-purchase::part(impact-overview)` 或者说 `beam-post-purchase::part(redeem-transaction)` 应用 CSS. ## 一体化 ### 墨盒整合 把Beam和你的推车结合起来,就可以根据推车内的物品定制现有的非营利性物品. ```ts import { updateCart } from "https://sdk.beamimpact.com/web-sdk/v1.36.1/dist/integrations/cart.js"; // on cart change const cart = { cartId: "cart_100", // external cart ID (from partner site, optional) subtotal: 90, itemCount: 1, currencyCode: "USD", content: { items: [ { remoteProductIdentifier: "sku-123", localAmount: 50 }, { remoteProductIdentifier: "sku-456", localAmount: 40 }, ], }, }; const beamConfig = { apiKey: "abc-123", storeId: 123, domain: "my-tld.com", // optional, domain or subdomain to set cookies on baseUrl: "", // optional, Beam API url (staging or production) }; await updateCart(beamConfig, cart); ``` ### 购买 这个 `registerCartIntegration()` 函数将 Beam 非营利选择组件与 Shopify 拖车相融合 允许将非营利ID和选择Id的Beam元数据添加到顺序中,因为用户通过 检查出行,并跟踪行车符和行车值用于Beam ROI计算. **添加事件跟踪脚本到主版式 :** ```html ``` 后购脚本 : ```ts import { showBeamOrderPageWidgets } from "https://sdk.beamimpact.com/web-sdk/v1.36.0/dist/integrations/shopify.esm.js"; await showBeamOrderPageWidgets({ apiKey: beam.apiKey, chainId: beam.chainId, storeId: beam.storeId, orderId, // From Liquid email, // From Liquid cartTotal, // From Liquid cart, // Cart line items currencyCode, // From Liquid countryCode, // From Liquid postalCode, // From Liquid parentSelector: ".step__sections", // CSS selector lang: "en", // From Liquid baseUrl: beam.baseUrl, debug: false, }); ``` **同意驱动的拆解:** 如果用户撤回跟踪同意, `unregisterCartIntegration()` 停止听众设置 `registerCartIntegration()` 并可以在同一个呼叫中可选择地擦去Beam的本地存储/cookie. 这是选入—— SDK不看 同意信号本身, 所以这必须连接到你自己的同意横幅/流量. ```ts import { unregisterCartIntegration } from "https://sdk.beamimpact.com/web-sdk/v1.36.0/dist/integrations/shopify.esm.js"; await unregisterCartIntegration( { apiKey: "abc123", storeId: 100, chainId: 10 }, { clearStorage: true }, // also clear Beam's localStorage/cookies; defaults to false ); ``` ### 用户 一些公用事业被曝光,使得与现有应用程序的整合更容易. 1. `waitForElement` 返回选择器出现时解析的保证. 2. `errors` 包含 Beam 自定义错误类. 3. `events` 包含 Beam 自定义事件类/事件名. 4. `clearBeamStorage` 清除所有与 Beam 相关的本地密钥和给定配置的 cookie; 有用 独立同意驱动的重置不附带条件 `unregisterCartIntegration`。 。 。 . ```js import { clearBeamStorage } from "https://sdk.beamimpact.com/web-sdk/v1.36.1/dist/integrations/utils.js"; clearBeamStorage({ apiKey: "abc123", domain: "my-store.com" }); ``` ```js import { waitForElement, errors, events } from "https://sdk.beamimpact.com/web-sdk/v1.36.1/dist/integrations/utils.js"; try { const parentElement = await waitForElement("#my-selector", { timeout: 1000 }); parentElement.appendChild(component); } catch (err) { if (err instanceof errors.BeamError) { /* do something */ } } window.addEventListener(BeamNonprofitSelectEvent.eventName, async (event) => {}); ``` ### 一体化 #### Statsig A/B 测试 Beam与Statsig有一个A/B测试的预建集成. ```ts import { StatsigPlugin } from "@beamimpact/web-sdk/dist/integrations/statsig"; import { init, getConfig } from "@beamimpact/web-sdk/dist/integrations/beam"; const beam = await init({ apiKey: "", chainId: 1, storeId: 1, domain: "my-store.com", // in case site uses subdomains for different pages plugins: [new StatsigPlugin({ statsigApiKey: "" })], }); ``` 初始化 Statsig 插件将自动日志 `statsig_init`, (中文(简体) ), `cart_created`,以及 `order_created` 事件. 要手动日志附加事件 : ```ts beam.plugins.statsig.logEvent(eventName, eventValue, metadataObject); ``` A/B测试的设置是Async. 等待Beam A/B测试设置在其他脚本中准备: ```ts const beam = getConfig(); // Wait for promise to resolve await beam.readyPromise; // resolves when plugins are all ready // OR use event listeners if (beam.status !== "ready") { beam.addEventListener("beamstatuschange", (event) => { const status = event.detail.status; if (status === "ready") doSomething(beam); else if (status === "error") handleError(event.detail.error); }); } ``` ##### 可见度 一旦初始化,所有Beam组件都有 `display: none` 除非用户被分配到显示Beam的 A/B 测试组. 要隐藏额外元素, 添加 CSS 类Name `beam-sync-visibility` 给他们。 这个等级的元素会 自动拥有 `display: none` 如果用户不能看到Beam. 要访问JavaScript中的实验状态: ```ts import { getConfig } from "@beamimpact/web-sdk/dist/integrations/beam"; getConfig().plugins.statsig.experiments.shouldShowBeam; // boolean ``` ## 常见问题 ### @beamimpact/web-sdk 是什么？ Beam SDK使品牌在共享价值之上与用户连接,而不是交易折扣,以建立更强的忠诚\. 我们的整合通过让用户\(a\) 选择一个非盈利性企业 在那里,品牌将捐赠他们的部分食品 ### 如何安装 @beamimpact/web-sdk？ 在项目目录运行 npm install @beamimpact/web-sdk，或使用 pnpm add / yarn add / bun add。 ### @beamimpact/web-sdk 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @beamimpact/web-sdk 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @beamimpact/web-sdk 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js 18\.x \|\| 20\.x \|\| 22\.x \|\| 24\.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @beamimpact/web-sdk 可以商用吗？ @beamimpact/web-sdk 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @beamimpact/web-sdk 的下载量有多少？ 根据 npm 官方下载统计，@beamimpact/web-sdk 在 2026/10/08 – 2026/11/06 这 30 天内被下载 18,959 次，日均约 632 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @beamimpact/web-sdk 还在维护吗？ 最新版本 1\.58\.4 发布于 2026/11/03（5 天前）；至今共发布 79 个版本，其中过去 12 个月发布了 20 个；首次发布于 2023/11/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。