PickFlick Widget SDK

Add the SDK script to your HTML page. This is the only script you need to load.

<script src="https://app.pickflick.xyz/developer/sdk/pickflick.js?key=demo"></script>

The SDK automatically registers all custom elements when loaded.

Here's a minimal example showing an IPTV source widget:

<pickflick-source-element orientation="horizontal">
  <pickflick-source-request 
    type="xtreme" 
    host="example.com" 
    username="user123" 
    password="pass123">
  </pickflick-source-request>
  <pickflick-source-all-content></pickflick-source-all-content>
</pickflick-source-element>

During beta, use key=demo in the script URL. Production API keys will be available soon.

The main container for displaying IPTV source information with QR code.

Attributes

Example

<pickflick-source-element orientation="vertical">
  <!-- Child elements go here -->
</pickflick-source-element>

Configures the source credentials. Must be a child of pickflick-source-element.

Attributes (Xtreme)

Attributes (URL)

Control which content is displayed in the source widget.

Shorthand Elements

• pickflick-source-all-content - Show all available content
• pickflick-source-standard-content - Show default content

Individual Elements

• pickflick-source-qr - QR code for scanning
• pickflick-source-status - Connection status
• pickflick-source-expiry - Expiration date
• pickflick-source-actions - Copy/share buttons
• pickflick-attribution - PickFlick attribution

Customize the appearance using CSS custom properties. All color values support light-dark() for automatic theme switching.

Example

pickflick-source-element {
  --pickflick-color-primary: light-dark(#7c3aed, #a78bfa);
  --pickflick-color-surface: light-dark(#faf5ff, #2e1065);
  --pickflick-qr-size: 120px;
}

For programmatic usage, use the importLibrary()method to lazily load specific components.

// Load the widgets library
const { SourceElement, MediaDetailElement } = await pickflick.importLibrary('widgets');

// Create element programmatically
const source = document.createElement('pickflick-source-element');
source.orientation = 'horizontal';
source.initFromXtreme({
  host: 'example.com',
  username: 'user123',
  password: 'pass123'
});

document.body.appendChild(source);

Display curated lists of movies and TV shows. Perfect for "Popular on Netflix" or custom collections.

Attributes

Example

<pickflick-media-list-element orientation="horizontal">
  <pickflick-media-keyword-search-request 
    query="Popular on Netflix"
    network="213">
  </pickflick-media-keyword-search-request>
</pickflick-media-list-element>

Configure the data source for the media list using one of these request elements.

pickflick-media-keyword-search-request

Fetch media by keyword search, optionally filtered by network.

pickflick-media-ids-request

Fetch specific media items by their TMDB IDs.

Common Network IDs

• 213 - Netflix
• 1024 - Amazon Prime Video
• 2552 - Apple TV+
• 453 - Hulu
• 2739 - Disney+

Listen to widget lifecycle events:

element.addEventListener('pickflick-load', () => {
  console.log('Widget loaded!');
});

element.addEventListener('pickflick-error', (e) => {
  console.error('Widget error:', e.detail.message);
});