Skip to main content
Version: v1

Product Details Page

Beam has provided a supplementary widget for a storefront's product details page to ensure that essential information regarding Beam's usage is disclosed early in the customer experience.

Widget script configuration​

To add the Beam Product Details Page script to your BigCommerce Storefront:

  1. Open your BigCommerce Storefront administration panel, and go to Script Manager

    Screenshot 2023-10-02 at 4.22.04 PM.png

  2. Click the Create Script button to add a new script to your storefront

    Screenshot 2023-10-02 at 4.23.44 PM.png

  3. Use the following information to fill out the new script creation form

    1. Script name: Beam Product Details Page
    2. Description: Beam Product Details Page Script Tag
    3. Placement: Footer
    4. Location: Storefront pages
    5. Script category: Essential
    6. Script type: Script
    7. Script contents:

    In the following code example, replace

    • apiKey - Your Beam SDK API Key
    • storeId - Your Beam Store Id
    • baseUrl - This value can remain unchanged, unless you are specifically using Beam’s Staging environment
    • domain - Required for promo code support. This should be the full domain of your storefront (e.g., mybrand.com)
    • promoCodes - (Optional) A list of promo codes to manually pass into the widget. If not provided, Beam will automatically detect codes from the cart or the URL ex. '["INFLUENCER20", "FALL2025"]'
    • remoteProductIdentifier - (Optional) To enable custom PDP messaging per product, the SKU of the product can be passed to this component

    <script type="module" async crossorigin src="https://sdk.beamimpact.com/web-sdk/v1.39.1/dist/components/product-details-page.esm.js"></script>
    <!-- ADD BEAM TO PRODUCT DETAILS PAGE -->
    <!-- BEAM START -->
    <div data-beam-widget="product-details-page">
      <beam-product-details-page
        apiKey="{{ SDK API Key }}"
        storeId={{ Beam Store Id }}
        baseUrl="https://api.beamimpact.com"
        domain="store.com"
        promoCodes='["CODE1", "INFLUENCER20"]'
      ></beam-product-details-page>
    </div>
    <!--BEAM END -->

  4. Click the Save button to save your new script