Community Impact

Base component

File: src/components/beam/beam-community-impact.tsx

Replace

• cardStyle - “image” or “icon”
• lang - Beam supports changing the displayed language based on a lang parameter passed into the widgets. If the partner supports multiple languages, this Liquid variable value should be updated based on any existing language detection method available in the theme. The supported values for this property can be found in the Beam Supported Languages documentation.

import React from 'react'
import dynamic from 'next/dynamic'
import * as Beam from '~/src/components/beam/constants'

const BeamCommunityImpact = dynamic(
  () => import("@beamimpact/web-sdk/dist/react/community-impact"), 
  { loading: () => null, ssr: false },
)

export default function BeamCommunityImpactWrapper() {
  return (
    <div className="beam-sync-visibility">
      <h2>The "Your Brand Name" Community's Impact</h2>
      <p>
       1% of every "Your Brand Name" purchase is donated to a nonprofit of your choice.
       <br />
       Check out the impact the "Your Brand Name" community is making below.
      </p>
      <BeamCommunityImpact 
        apiKey={Beam.BEAM_PUBLIC_API_KEY}
        chainId={Beam.BEAM_CHAIN_ID}
        storeId={Beam.BEAM_STORE_ID}
        baseUrl={Beam.BEAM_BASE_URL}
        lang='en'
        cardStyle='image'
      />
    </div>
  )
}