Last updated

Attribution

The Attribution component displays affiliate attribution information, showing which rep/affiliate the customer is associated with.

Usage

<fluid-attribution></fluid-attribution>

Attributes

AttributeTypeDefaultDescription
hide-widgetbooleanfalseWhether to hide the component
class-namestringAdditional CSS classes
show-avatarbooleantrueShow affiliate avatar
show-namebooleantrueShow affiliate name
show-contactbooleanfalseShow contact information

Display Options

AttributeTypeDefaultDescription
layoutstring'horizontal'Layout: 'horizontal', 'vertical', 'compact'
fallback-textstringText to show when no attribution exists

Examples

Basic Attribution Display

<fluid-attribution></fluid-attribution>

Compact Layout

<fluid-attribution
  layout="compact"
  show-avatar="true"
  show-name="true"
></fluid-attribution>

With Contact Info

<fluid-attribution
  show-contact="true"
  layout="vertical"
></fluid-attribution>

With Fallback

<fluid-attribution
  fallback-text="Shop with our company"
></fluid-attribution>

JavaScript API

// Get current attribution data
const attribution = window.FairShareSDK.getAttribution();

console.log('Affiliate ID:', attribution.affiliate_id);
console.log('Affiliate Name:', attribution.name);
console.log('Attribution Source:', attribution.source);