Installation

Add the FairShare SDK to your website using a simple script tag.

Basic Setup

<script
  id="fluid-cdn-script"
  src="https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js"
  data-fluid-shop="your-shop-id"
></script>

The data-fluid-shop attribute is required and identifies your FairShare store.

Configuration Options

Configure the SDK using data attributes on the script tag:

Attribution Override Options

Override the automatic server-side attribution with specific values:

Attribution methods are checked in priority order: share-guid → fluid-rep-id → email → username → external-id.

Example Configurations

Basic Setup

<script
  id="fluid-cdn-script"
  src="https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js"
  data-fluid-shop="your-shop-id"
></script>

With Real-Time Updates

Enable Pusher for real-time cart synchronization across tabs:

<script
  id="fluid-cdn-script"
  src="https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js"
  data-fluid-shop="your-shop-id"
  data-pusher-enabled="true"
></script>

With Attribution Override

Override automatic attribution with a specific affiliate:

<script
  id="fluid-cdn-script"
  src="https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js"
  data-fluid-shop="your-shop-id"
  data-share-guid="your-affiliate-id"
></script>

Development/Testing

Point to a custom API endpoint for local development:

<script
  id="fluid-cdn-script"
  src="https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js"
  data-fluid-shop="your-shop-id"
  data-fluid-api-base-url="https://api.your-custom-endpoint.com"
  data-debug="true"
></script>

Server-Side Attribution

By default, attribution is calculated automatically based on the current page URL. The SDK:

• Detects page changes (including SPA navigation)
• Refreshes attribution data as needed
• Handles all tracking automatically

Use attribution override attributes only when you need to explicitly set attribution values.

Manual Initialization

For advanced use cases, you can initialize the SDK programmatically:

window.FairShareSDK.initializeFluid({
  fluidShop: "your-shop-id",
  debug: true,
});

This is typically not needed as the SDK initializes automatically from the script tag attributes.

Customizing Styles

Customize widget appearance using CSS variables:

:root {
  --company-color: #3461ff;  /* Primary brand color */
  --ff-body: "Your Custom Font", sans-serif;  /* Font family */
}

See individual widget documentation for more styling options.