@liquidcommerce/elements-sdk 2.7.2 → 2.7.4

package/docs/v1/getting-started/quick-start.md

@@ -156,7 +156,7 @@ If you prefer JavaScript over HTML attributes:
   <script defer>
     // Wait for SDK to be ready
     window.addEventListener('lce:actions.client_ready', async (event) => {
-      const client = window.elements;
+      const client = window.LiquidCommerce.elements;
       
       // Inject the product
       await client.injectProductElement([
@@ -252,7 +252,7 @@ Want to customize the look, visit the Elements Builder in our [Partner Portal](h
 ```html
 <script>
 window.addEventListener('lce:actions.client_ready', async () => {
-  const client = window.elements;
+  const client = window.LiquidCommerce.elements;
   
   // You can customize after initialization
   // See Theming Guide for more options
@@ -313,7 +313,7 @@ The cart should open automatically after adding a product. If it doesn't:
 
 1. Check browser console for JavaScript errors
 2. Verify no other scripts are conflicting
-3. Try manually opening: `window.elements.actions.cart.openCart()`
+3. Try manually opening: `window.LiquidCommerce.elements.actions.cart.openCart()`
 
 ## Next Steps
 

package/docs/v1/guides/address-component.md

@@ -52,7 +52,7 @@ await client.injectAddressElement('address-container', {
 The recommended method - provides accurate geocoding:
 
 ```javascript
-await window.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
 ```
 
 **How to get a Places ID:**
@@ -64,7 +64,7 @@ Visit [Google Place IDs](https://developers.google.com/maps/documentation/places
 For custom address flows without Google Places:
 
 ```javascript
-await window.elements.actions.address.setAddressManually(
+await window.LiquidCommerce.elements.actions.address.setAddressManually(
   {
     one: '123 Main Street',
     two: 'Apt 4',         // Optional
@@ -93,7 +93,7 @@ await window.elements.actions.address.setAddressManually(
 Retrieve the current address:
 
 ```javascript
-const addressData = window.elements.actions.address.getDetails();
+const addressData = window.LiquidCommerce.elements.actions.address.getDetails();
 
 console.log(addressData);
 // {
@@ -120,7 +120,7 @@ console.log(addressData);
 Remove the current address:
 
 ```javascript
-await window.elements.actions.address.clear();
+await window.LiquidCommerce.elements.actions.address.clear();
 ```
 
 This will:
@@ -209,7 +209,7 @@ Create a dedicated page for address selection:
   
   <script>
     window.addEventListener('lce:actions.client_ready', async () => {
-      await window.elements.injectAddressElement('address');
+      await window.LiquidCommerce.elements.injectAddressElement('address');
     });
     
     window.addEventListener('lce:actions.address_updated', () => {
@@ -237,7 +237,7 @@ document.getElementById('save-address-btn').addEventListener('click', async () =
   const coords = await geocodeAddress(address);
   
   try {
-    await window.elements.actions.address.setAddressManually(address, coords);
+    await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
     showSuccessMessage('Address saved!');
   } catch (error) {
     showErrorMessage('Invalid address');
@@ -251,7 +251,7 @@ document.getElementById('save-address-btn').addEventListener('click', async () =
 // After user logs in, set their saved address
 window.addEventListener('lce:actions.client_ready', async () => {
   if (userIsLoggedIn && !currentAddressSet) {
-    await window.elements.actions.address.setAddressManually(
+    await window.LiquidCommerce.elements.actions.address.setAddressManually(
       user.savedAddress,
       user.savedCoordinates
     );
@@ -288,7 +288,7 @@ const locations = [
 document.getElementById('location-select').addEventListener('change', async (e) => {
   const selectedLocation = locations[e.target.value];
   
-  await window.elements.actions.address.setAddressByPlacesId(
+  await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(
     selectedLocation.placesId
   );
   
@@ -328,7 +328,7 @@ Set address as early as possible in the user flow:
 ```javascript
 // On homepage or landing page
 window.addEventListener('lce:actions.client_ready', () => {
-  const currentAddress = window.elements.actions.address.getDetails();
+  const currentAddress = window.LiquidCommerce.elements.actions.address.getDetails();
   
   if (!currentAddress) {
     // Show address prompt
@@ -380,7 +380,7 @@ async function setAddress(address, coords) {
   }
   
   // Set address
-  await window.elements.actions.address.setAddressManually(address, coords);
+  await window.LiquidCommerce.elements.actions.address.setAddressManually(address, coords);
 }
 ```
 
@@ -388,7 +388,7 @@ async function setAddress(address, coords) {
 
 ```javascript
 try {
-  await window.elements.actions.address.setAddressByPlacesId(placesId);
+  await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId);
 } catch (error) {
   console.error('Failed to set address:', error);
   

package/docs/v1/guides/best-practices.md

@@ -21,26 +21,26 @@ await Elements('KEY', { env: 'production' });
 
 ### Use Global Access
 
-After initialization, use `window.elements`:
+After initialization, use `window.LiquidCommerce.elements`:
 
 ```javascript
 // Initialize once
 await Elements('KEY', { env: 'production' });
 
 // Use globally throughout your app
-window.elements.actions.cart.openCart();
+window.LiquidCommerce.elements.actions.cart.openCart();
 ```
 
 ### Wait for Client Ready
 
 ```javascript
-if (window.elements) {
+if (window.LiquidCommerce.elements) {
   // Client already ready
-  window.elements.actions.cart.openCart();
+  window.LiquidCommerce.elements.actions.cart.openCart();
 } else {
   // Wait for initialization
   window.addEventListener('lce:actions.client_ready', () => {
-    window.elements.actions.cart.openCart();
+    window.LiquidCommerce.elements.actions.cart.openCart();
   });
 }
 ```
@@ -83,7 +83,7 @@ await client.injectProductElement([...]);
 
 ```javascript
 try {
-  await window.elements.actions.cart.addProduct([...]);
+  await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
 } catch (error) {
   if (error.name === 'SDKError') {
     console.error('SDK Error:', error);
@@ -158,7 +158,7 @@ setTimeout(async () => {
 ```javascript
 // Set address if known
 if (userSavedAddress) {
-  await window.elements.actions.address.setAddressManually(
+  await window.LiquidCommerce.elements.actions.address.setAddressManually(
     userSavedAddress,
     userCoordinates
   );
@@ -167,7 +167,7 @@ if (userSavedAddress) {
 // Pre-fill checkout info
 window.addEventListener('lce:actions.checkout_opened', () => {
   if (userIsLoggedIn) {
-    window.elements.actions.checkout.updateCustomerInfo({
+    window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
       firstName: user.firstName,
       email: user.email
     });
@@ -183,7 +183,7 @@ Cart persists across sessions - avoid clearing unless intentional:
 // Only clear when user explicitly requests
 document.getElementById('clear-cart-btn').addEventListener('click', async () => {
   if (confirm('Clear cart?')) {
-    await window.elements.actions.cart.resetCart();
+    await window.LiquidCommerce.elements.actions.cart.resetCart();
   }
 });
 ```
@@ -195,7 +195,7 @@ document.getElementById('clear-cart-btn').addEventListener('click', async () =>
 ```javascript
 // Update UI when cart changes
 window.addEventListener('lce:actions.cart_updated', () => {
-  const cart = window.elements.actions.cart.getDetails();
+  const cart = window.LiquidCommerce.elements.actions.cart.getDetails();
   updateHeaderCartCount(cart.itemsCount);
 });
 ```
@@ -267,11 +267,11 @@ const client = await Elements('YOUR_API_KEY', {
 ```javascript
 // Test empty cart
 if (isDevelopment) {
-  await window.elements.actions.cart.resetCart();
+  await window.LiquidCommerce.elements.actions.cart.resetCart();
 }
 
 // Test with specific product
-await window.elements.actions.cart.addProduct([
+await window.LiquidCommerce.elements.actions.cart.addProduct([
   { identifier: testProductId, fulfillmentType: 'shipping', quantity: 1 }
 ]);
 ```
@@ -311,9 +311,9 @@ await window.elements.actions.cart.addProduct([
 
 ```javascript
 if (window.innerWidth < 768) {
-  window.elements.ui.floatingCartButton(true);
+  window.LiquidCommerce.elements.ui.floatingCartButton(true);
 } else {
-  window.elements.ui.cartButton('header-cart', true);
+  window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
 }
 ```
 

package/docs/v1/guides/cart-component.md

@@ -113,13 +113,13 @@ Create cart buttons using JavaScript:
 
 ```javascript
 // Button in a container
-window.elements.ui.cartButton('my-container', false);  // No badge
+window.LiquidCommerce.elements.ui.cartButton('my-container', false);  // No badge
 
 // Button with item count
-window.elements.ui.cartButton('my-container', true);  // With badge
+window.LiquidCommerce.elements.ui.cartButton('my-container', true);  // With badge
 
 // Floating button
-window.elements.ui.floatingCartButton(true);  // With badge
+window.LiquidCommerce.elements.ui.floatingCartButton(true);  // With badge
 ```
 
 ### Custom Toggle Buttons
@@ -139,19 +139,19 @@ The SDK automatically adds click handlers to elements with `data-lce-cart-toggle
 ### Open Cart
 
 ```javascript
-window.elements.actions.cart.openCart();
+window.LiquidCommerce.elements.actions.cart.openCart();
 ```
 
 ### Close Cart
 
 ```javascript
-window.elements.actions.cart.closeCart();
+window.LiquidCommerce.elements.actions.cart.closeCart();
 ```
 
 ### Toggle Cart
 
 ```javascript
-window.elements.actions.cart.toggleCart();
+window.LiquidCommerce.elements.actions.cart.toggleCart();
 ```
 
 ### Add Product to Cart
@@ -159,7 +159,7 @@ window.elements.actions.cart.toggleCart();
 Add products programmatically:
 
 ```javascript
-await window.elements.actions.cart.addProduct([
+await window.LiquidCommerce.elements.actions.cart.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',  // or 'onDemand'
@@ -182,7 +182,7 @@ await window.elements.actions.cart.addProduct([
 ### Apply Promo Code
 
 ```javascript
-await window.elements.actions.cart.applyPromoCode('SUMMER20');
+await window.LiquidCommerce.elements.actions.cart.applyPromoCode('SUMMER20');
 ```
 
 The SDK automatically:
@@ -194,7 +194,7 @@ The SDK automatically:
 ### Remove Promo Code
 
 ```javascript
-await window.elements.actions.cart.removePromoCode();
+await window.LiquidCommerce.elements.actions.cart.removePromoCode();
 ```
 
 ### Reset Cart
@@ -202,7 +202,7 @@ await window.elements.actions.cart.removePromoCode();
 Clear all items from the cart:
 
 ```javascript
-await window.elements.actions.cart.resetCart();
+await window.LiquidCommerce.elements.actions.cart.resetCart();
 ```
 
 ### Get Cart Details
@@ -210,7 +210,7 @@ await window.elements.actions.cart.resetCart();
 Retrieve current cart information:
 
 ```javascript
-const cartData = window.elements.actions.cart.getDetails();
+const cartData = window.LiquidCommerce.elements.actions.cart.getDetails();
 
 console.log(cartData);
 // {
@@ -239,7 +239,7 @@ Show cart subtotal anywhere on your page:
 
 <script>
 window.addEventListener('lce:actions.client_ready', () => {
-  window.elements.ui.cartSubtotal('cart-total');
+  window.LiquidCommerce.elements.ui.cartSubtotal('cart-total');
 });
 </script>
 ```
@@ -257,7 +257,7 @@ Show the number of items in the cart:
 
 <script>
 window.addEventListener('lce:actions.client_ready', () => {
-  window.elements.ui.cartItemsCount('items-count', {
+  window.LiquidCommerce.elements.ui.cartItemsCount('items-count', {
     hideZero: true  // Hide when cart is empty
   });
 });
@@ -425,7 +425,7 @@ When you update the cart in one tab, all other open tabs automatically sync:
 
 ```javascript
 // Tab 1: Add item
-await window.elements.actions.cart.addProduct([...]);
+await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
 
 // Tab 2: Cart automatically updates
 // No additional code needed
@@ -459,10 +459,10 @@ If no address is set when adding to cart, the SDK:
 Set address before adding to cart:
 
 ```javascript
-await window.elements.actions.address.setAddressByPlacesId('ChIJ...');
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJ...');
 
 // Now add to cart
-await window.elements.actions.cart.addProduct([...]);
+await window.LiquidCommerce.elements.actions.cart.addProduct([...]);
 ```
 
 ## Promo Codes
@@ -627,8 +627,8 @@ const params = new URLSearchParams(window.location.search);
 const campaign = params.get('campaign');
 
 if (campaign === 'summer-sale') {
-  await window.elements.actions.cart.applyPromoCode('SUMMER20');
-  window.elements.actions.cart.openCart();
+  await window.LiquidCommerce.elements.actions.cart.applyPromoCode('SUMMER20');
+  window.LiquidCommerce.elements.actions.cart.openCart();
 }
 ```
 
@@ -658,7 +658,7 @@ Pre-load cart on page load for faster access:
 ```javascript
 window.addEventListener('lce:actions.client_ready', () => {
   // Cart loads automatically, but you can pre-fetch if needed
-  window.elements.actions.cart.getDetails();
+  window.LiquidCommerce.elements.actions.cart.getDetails();
 });
 ```
 
@@ -673,7 +673,7 @@ async function addToCart(productId) {
   button.textContent = 'Adding...';
   
   try {
-    await window.elements.actions.cart.addProduct([
+    await window.LiquidCommerce.elements.actions.cart.addProduct([
       { identifier: productId, fulfillmentType: 'shipping', quantity: 1 }
     ], true);
     
@@ -709,14 +709,14 @@ window.addEventListener('lce:actions.cart_updated', (event) => {
 
 ### Cart Not Opening
 
-1. Check that SDK is initialized: `console.log(window.elements)`
+1. Check that SDK is initialized: `console.log(window.LiquidCommerce.elements)`
 2. Verify no JavaScript errors in console
 3. Ensure cart button is properly configured
-4. Try manually: `window.elements.actions.cart.openCart()`
+4. Try manually: `window.LiquidCommerce.elements.actions.cart.openCart()`
 
 ### Items Not Adding
 
-1. Check that address is set: `window.elements.actions.address.getDetails()`
+1. Check that address is set: `window.LiquidCommerce.elements.actions.address.getDetails()`
 2. Verify product identifier is valid
 3. Check fulfillment type is available for the product
 4. Look for errors in browser console

package/docs/v1/guides/checkout-component.md

@@ -90,19 +90,19 @@ The `{token}` placeholder is replaced with the checkout token.
 ### Open Checkout
 
 ```javascript
-window.elements.actions.checkout.openCheckout();
+window.LiquidCommerce.elements.actions.checkout.openCheckout();
 ```
 
 ### Close Checkout
 
 ```javascript
-window.elements.actions.checkout.closeCheckout();
+window.LiquidCommerce.elements.actions.checkout.closeCheckout();
 ```
 
 ### Toggle Checkout
 
 ```javascript
-window.elements.actions.checkout.toggleCheckout();
+window.LiquidCommerce.elements.actions.checkout.toggleCheckout();
 ```
 
 ### Exit Checkout
@@ -110,7 +110,7 @@ window.elements.actions.checkout.toggleCheckout();
 Navigate away from checkout (requires `exitUrl` configuration):
 
 ```javascript
-window.elements.actions.checkout.exitCheckout();
+window.LiquidCommerce.elements.actions.checkout.exitCheckout();
 ```
 
 Configure exit URL:
@@ -130,7 +130,7 @@ customTheme: {
 Skip the cart and go directly to checkout:
 
 ```javascript
-await window.elements.actions.checkout.addProduct([
+await window.LiquidCommerce.elements.actions.checkout.addProduct([
   {
     identifier: '00619947000020',
     fulfillmentType: 'shipping',
@@ -142,25 +142,25 @@ await window.elements.actions.checkout.addProduct([
 ### Apply Promo Code
 
 ```javascript
-await window.elements.actions.checkout.applyPromoCode('WELCOME10');
+await window.LiquidCommerce.elements.actions.checkout.applyPromoCode('WELCOME10');
 ```
 
 ### Remove Promo Code
 
 ```javascript
-await window.elements.actions.checkout.removePromoCode();
+await window.LiquidCommerce.elements.actions.checkout.removePromoCode();
 ```
 
 ### Apply Gift Card
 
 ```javascript
-await window.elements.actions.checkout.applyGiftCard('GIFT-1234-5678');
+await window.LiquidCommerce.elements.actions.checkout.applyGiftCard('GIFT-1234-5678');
 ```
 
 ### Remove Gift Card
 
 ```javascript
-await window.elements.actions.checkout.removeGiftCard('GIFT-1234-5678');
+await window.LiquidCommerce.elements.actions.checkout.removeGiftCard('GIFT-1234-5678');
 ```
 
 ### Toggle Gift Mode
@@ -169,33 +169,33 @@ Enable/disable "Send as Gift" mode:
 
 ```javascript
 // Enable gift mode
-await window.elements.actions.checkout.toggleIsGift(true);
+await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(true);
 
 // Disable gift mode
-await window.elements.actions.checkout.toggleIsGift(false);
+await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(false);
 
 // Toggle current state
-await window.elements.actions.checkout.toggleIsGift();
+await window.LiquidCommerce.elements.actions.checkout.toggleIsGift();
 ```
 
 ### Toggle Billing Same As Shipping
 
 ```javascript
 // Use shipping address for billing
-await window.elements.actions.checkout.toggleBillingSameAsShipping(true);
+await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(true);
 
 // Use different billing address
-await window.elements.actions.checkout.toggleBillingSameAsShipping(false);
+await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(false);
 ```
 
 ### Toggle Marketing Preferences
 
 ```javascript
 // Opt into email marketing
-await window.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
+await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
 
 // Opt into SMS marketing
-await window.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
+await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
 ```
 
 ### Update Customer Information
@@ -203,7 +203,7 @@ await window.elements.actions.checkout.toggleMarketingPreferences('canSms', true
 Pre-fill customer information:
 
 ```javascript
-window.elements.actions.checkout.updateCustomerInfo({
+window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
   firstName: 'John',
   lastName: 'Doe',
   email: 'john@example.com',
@@ -225,7 +225,7 @@ window.elements.actions.checkout.updateCustomerInfo({
 Pre-fill gift recipient information:
 
 ```javascript
-window.elements.actions.checkout.updateGiftInfo({
+window.LiquidCommerce.elements.actions.checkout.updateGiftInfo({
   firstName: 'Jane',
   lastName: 'Smith',
   email: 'jane@example.com',
@@ -246,7 +246,7 @@ window.elements.actions.checkout.updateGiftInfo({
 Pre-fill billing address:
 
 ```javascript
-window.elements.actions.checkout.updateBillingInfo({
+window.LiquidCommerce.elements.actions.checkout.updateBillingInfo({
   firstName: 'John',
   lastName: 'Doe',
   email: 'john@example.com',
@@ -268,7 +268,7 @@ window.elements.actions.checkout.updateBillingInfo({
 ### Get Checkout Details
 
 ```javascript
-const checkoutData = window.elements.actions.checkout.getDetails();
+const checkoutData = window.LiquidCommerce.elements.actions.checkout.getDetails();
 
 console.log(checkoutData);
 // {
@@ -532,7 +532,7 @@ If you have customer data, pre-fill it:
 // After user logs in
 if (userIsLoggedIn) {
   window.addEventListener('lce:actions.checkout_opened', () => {
-    window.elements.actions.checkout.updateCustomerInfo({
+    window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
       firstName: currentUser.firstName,
       lastName: currentUser.lastName,
       email: currentUser.email,
@@ -637,10 +637,10 @@ checkout: {
 
 ### Checkout Not Opening
 
-1. Verify cart has items: `window.elements.actions.cart.getDetails()`
+1. Verify cart has items: `window.LiquidCommerce.elements.actions.cart.getDetails()`
 2. Check for JavaScript errors in console
-3. Ensure SDK is initialized: `window.elements`
-4. Try manually: `window.elements.actions.checkout.openCheckout()`
+3. Ensure SDK is initialized: `window.LiquidCommerce.elements`
+4. Try manually: `window.LiquidCommerce.elements.actions.checkout.openCheckout()`
 
 ### Payment Form Not Loading
 

package/docs/v1/guides/product-component.md

@@ -212,7 +212,7 @@ Programmatically interact with products:
 Retrieve product information:
 
 ```javascript
-const productData = window.elements.actions.product.getDetails('00619947000020');
+const productData = window.LiquidCommerce.elements.actions.product.getDetails('00619947000020');
 
 console.log(productData);
 // {
@@ -388,10 +388,10 @@ Set address programmatically to skip prompting:
 
 ```javascript
 // Using Google Places ID
-await window.elements.actions.address.setAddressByPlacesId('ChIJ...');
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJ...');
 
 // Or manually
-await window.elements.actions.address.setAddressManually(
+await window.LiquidCommerce.elements.actions.address.setAddressManually(
   {
     one: '123 Main St',
     two: 'Apt 4',
@@ -423,7 +423,7 @@ Presale products are handled automatically; no special configuration needed.
 Force a product to reload and rerender:
 
 ```javascript
-const components = window.elements.getInjectedComponents();
+const components = window.LiquidCommerce.elements.getInjectedComponents();
 const productComponent = components.get('product-1');
 
 if (productComponent) {
@@ -656,7 +656,7 @@ document.querySelectorAll('.product-placeholder').forEach(el => {
 1. Check browser console for errors
 2. Verify container ID exists in the DOM
 3. Confirm product identifier is valid
-4. Check that SDK is initialized (`window.elements` exists)
+4. Check that SDK is initialized (`window.LiquidCommerce.elements` exists)
 
 ### Wrong Pricing
 

package/docs/v1/integration/nextjs.md

@@ -1,6 +1,6 @@
 # Next.js Integration
 
-Use a client component (App Router) or `useEffect` in a client-only page (Pages Router). Initialize the SDK on the client.
+The SDK is SSR-safe out of the box. When imported on the server, a lightweight stub is resolved automatically via the `node` export condition — no dynamic imports or special configuration required. The real SDK activates on the client.
 
 ## App Router (Client Component)
 
@@ -48,9 +48,18 @@ export default function ProductPage() {
 }
 ```
 
+## SSR Behavior
+
+When the module is evaluated during SSR (server components, `getServerSideProps`, middleware, etc.):
+
+- All **types and enums** are available — TypeScript works identically.
+- `Elements()` and `ElementsBuilder()` return `null` and log a warning.
+- No browser APIs (`window`, `document`, `navigator`) are accessed.
+
+You do **not** need `next/dynamic`, conditional `import()`, or `typeof window` guards in your own code.
+
 ## Notes
 
-- Do not initialize server-side (Window/Document required).
 - For ad blocker mitigation, configure the proxy (see [Proxy Setup](./proxy-setup.md)).
 
 ## Related Docs

package/docs/v1/integration/react.md

@@ -44,8 +44,8 @@ import { useEffect } from 'react';
 
 export default function CartButton() {
   useEffect(() => {
-    if (!window.elements) return;
-    window.elements.ui.cartButton('header-cart', true);
+    if (!window.LiquidCommerce.elements) return;
+    window.LiquidCommerce.elements.ui.cartButton('header-cart', true);
   }, []);
 
   return <div id="header-cart"></div>;
@@ -54,7 +54,7 @@ export default function CartButton() {
 
 ## Notes
 
-- Initialize only on the client; the SDK uses browser APIs.
+- The SDK is SSR-safe — importing it on the server resolves a no-op stub automatically. Initialize in `useEffect` to get the real client.
 - For multiple products, call `injectProductElement` with multiple entries.
 
 ## Related Docs

package/docs/v1/integration/vanilla-js.md

@@ -51,7 +51,7 @@ Use the CDN build for the fastest setup, or use NPM if you have a build step.
 
 <script>
 window.addEventListener('lce:actions.client_ready', async () => {
-  const client = window.elements;
+  const client = window.LiquidCommerce.elements;
   await client.injectProductElement([
     { containerId: 'product', identifier: '00619947000020' }
   ]);