What's Changed​

Product Detail Page (PDP) Enhancements​

• Promo Pill Updates: The promo pill is now included in the PDP widget by default for improved promo visibility
• New Styling Options: Customization options for image placement and promo pill styling are now available
• Translations Support: Title, description fields, and disclosure tooltip copy now support translations
• SKU-Based Donation: PDP title, description, and icon can dynamically update based on product SKU

SKU-Based Donation Integration​

• PDP title, description, and icon can now be dynamically updated based on SKU donations (e.g., size, color). Just pass the remote product identifier to the pdp widget:

<script
  type="module"
  async
  crossorigin
  src="https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/components/product-details-page.esm.js"
></script>

<beam-product-details-page
  apiKey="{{ storefront_component_api_key }}" <!-- required -->
  storeId={{ storefront_component_store_id }}
  remoteProductIdentifier="{{ sku }}">
</beam-product-details-page>

What's Changed​

Improvements to Impact Overview Widget and Redeem Transaction Widget​

We’ve made several optimizations to improve the usability and design of both the Impact Overview Widget and the Redeem Transaction Widget.

Impact Overview Widget:​

• New Stacked Icon View: The icon display now features a stacked layout for better organization and visual clarity
• Decreased Card Height: We've reduced the card height to make it more compact and streamlined
• Sticky Social Share Button: The social share button is now sticky, ensuring it remains accessible as you scroll through the widget

Redeem Transaction Widget:​

• Sticky Confirm Button: The confirm button now stays fixed in place while you scroll, making the redemption process smoother
• Updated Grid Options: Options are now stacked for enhanced layout and easier interaction

What's Changed​

• Subscription Management

We are excited to introduce the newly optimized Subscription Management Widget, designed to significantly enhance both user experience and functionality. This widget introduces custom widgets specifically designed for subscription management.

Subscription-Management​

• Impact Section Integration: The previous impact section is seamlessly integrated within the Subscription Management Widget. Users can view their previous impact.
• You can exclude a nonprofit from personal impact. In the admin portal, there is now an 'Include in Personal Impact' toggle. Set this toggle to false to remove the tile from the 'Previous Impact' section.
• Nonprofit Selection: The option to swap nonprofits is now accessible via a meatball dropdown menu located in the top-right corner of the widget. This provides users with quick and intuitive access to manage their nonprofit preferences.
• Simplified Configuration: Logos no longer need to be configured separately for each widget. They are now inherently part of the Subscription Management Widget, simplifying setup and maintenance.
• Logos within the Subscription Management Widget can now be aligned differently based on the device using CSS variables:
  • -beam-SubscriptionManagement-logo-align-desktop: Controls logo alignment on desktop devices. Set to "left" or "center" to align logos to the left or center, respectively.
  • -beam-SubscriptionManagement-logo-align-mobile: Controls logo alignment on mobile devices. Set to "left" or "center" to align logos to the left or center.
• Icons representing previous impact tiles can be customized in style using CSS variables.

Key Takeaways from the Subscription Management Update​

• Dynamic Drop Down Menu for Nonprofit Selection: A new dropdown menu allows users to change their selected nonprofit. The dropdown menu dynamically adjusts based on the active widget.
• View and Support Previous Impacts: Users can now view their previous impacts and choose to support those nonprofits again if they are still active. There is also the option to exclude certain nonprofits from being displayed in the previous impacts section, configurable in the admin portal.
• Sleek Inline Appearance for Subscription Impact: The subscription impact widget now has a sleek, inline appearance that reduces the amount of screen space it occupies.
• Sticky Footer on Mobile: The select subscription nonprofit widget now features a sticky footer on mobile devices, making it easier to confirm the selection of a nonprofit. This footer will need to be styled according to partner specifications for width and padding.
• Editable Dynamic Strings: Dynamic strings within the widgets can now be edited on a per-chain basis, allowing for more personalized and relevant messaging.
• Conditional Display of Share Impact Button: The share impact button will not display when the share image is null, ensuring a cleaner user experience.
• Configurable Community Impact Website URL: The community impact website URL can now be configured per store, allowing for more tailored and relevant links to be displayed to users.

Integration​

To integrate the Subscription Management Widget, use the following code:

<script
  type="module"
  async
  crossorigin
  src="https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/components/subscription-management.esm.js"
></script>

<beam-subscription-management
  apiKey="{{ storefront_component_api_key }}" <!-- required -->
  subscriptionId="{{ your subscription id }}" <!-- required -->
  storeId="{{ store_id }}" <!-- required -->
  email="{{ user's email }}" <!-- required -->
  partnerUserId="{{ user's user id }}" <!-- optional -->
></beam-subscription-management>

What's Changed​

• Product Details Widget
  • The beam-product-details widget is now available for use. Use this widget to introduce Beam functionality early on in your store's product details page.

What's Changed​

• Set "type": "module" in package.json so that the .js files in dist/ are recognized as ESM modules by Node-based build systems

What's Changed​

• Subscription Management
  • The new beam-subscription-management widget is available for use. This allows viewing and changing nonprofit selections for recurring orders.
  • Add partnerUserId as a parameter to beam-post-purchase. This allows linking a 3rd party user ID to an email address, or using the ID instead of the email address for an order.
• Other Nonprofit selections older than 30 days are not restored on page load

This is the new home for all things related to the Beam Impact SDK and API