This page documents all configuration options available when initializing the shortkit SDK.
Initialization parameters
Your organization’s publishable API key. Starts with pk_live_ or pk_test_.
Configuration object defining feed layout, controls, and behavior. See sections below.
environment
string
default:"production"
Target environment. One of production, staging, or development. Controls API endpoint and logging verbosity.
Cache TTL for remote configuration overlay, in seconds.
Timeout for remote config fetch, in milliseconds. If exceeded, falls back to cached or code-level config.
Feed layout
Primary scroll direction of the feed.| Value | Description |
|---|
vertical | Swipe up/down between videos (TikTok-style) |
horizontal | Swipe left/right between videos |
feedHeight
string | object
default:"fullscreen"
Height of the feed view.| Value | Description |
|---|
fullscreen | Occupies entire screen minus safe areas |
{ percentage: 0.85 } | Percentage of container (e.g., 85%) |
contentTypes
string[]
default:"[\"video\"]"
Types of content the feed can display.| Value | Description |
|---|
video | Video content (default) |
photoSet | Swipeable photo carousels |
Additional feeds accessible by horizontal swipe from the primary feed. Each can have its own filters and ranking.
entryWidget
EntryWidgetConfig | null
default:"null"
Configuration for embeddable mini-player widgets. See Entry widget. Example
const config = {
feedOrientation: 'vertical',
feedHeight: 'fullscreen',
contentTypes: ['video'],
adjacentFeeds: [
{
name: 'Sports',
filter: { tags: ['sports'] }
},
{
name: 'Politics',
filter: { tags: ['politics'] }
}
]
};
Video controls
Each control can be independently enabled or disabled.
Tap-to-pause/play overlay.
Progress bar / seek scrubber. Position configurable via scrubberPosition.
controls.scrubberPosition
Position of the scrubber. One of bottom or below (below video for non-fullscreen).
Playback speed selector configuration.
Whether to show the speed selector.
options
number[]
default:"[1.0, 1.25, 1.5, 2.0]"
Available speed options.
Caption/subtitle configuration.
Whether to show the caption toggle.
Whether captions are on by default.
Caption styling options. See Theming. Whether videos start muted. Unmute state persists across videos in the session.
controls.resolutionSelector
Manual resolution override. When disabled, resolution is managed automatically via ABR (recommended).
controls.pictureInPicture
Picture-in-Picture mode support. Requires platform configuration.
AirPlay casting support (iOS only).
Chromecast support. Requires Google Cast SDK.
Share button configuration.
Whether to show the share button.
Domain for generated share URLs. Falls back to organization settings.
Path template with {contentId} placeholder. Example: /watch/{contentId}
controls.autoHideControls
Auto-hide behavior for control overlays.
Whether controls auto-hide after inactivity.
Milliseconds of inactivity before hiding.
Example
const config = {
controls: {
playPause: true,
scrubber: true,
playbackSpeed: {
enabled: true,
options: [0.5, 1.0, 1.5, 2.0]
},
captions: {
enabled: true,
defaultOn: false
},
volume: true,
muteOnStart: true,
share: {
enabled: true,
deepLinkPathTemplate: '/watch/{contentId}'
},
autoHideControls: {
enabled: true,
delayMs: 4000
}
}
};
Custom actions
Configure custom action buttons in the control overlay:
actions
ActionConfig[]
default:"[]"
Array of custom action button configurations.
Unique identifier for the action, passed to callbacks.
Icon name or URL. Supports Font Awesome icons or custom image URLs.
Accessibility label for the button.
Position in the overlay: left, right, or bottom.
const config = {
actions: [
{
id: 'bookmark',
icon: 'bookmark',
label: 'Save',
position: 'right'
},
{
id: 'readMore',
icon: 'newspaper',
label: 'Read Article',
position: 'bottom'
}
]
};
Entry widget configuration
Configure mini-player widgets for embedding in other screens:
entryWidget.style
string
default:"thumbnailRow"
Widget display style.| Value | Description |
|---|
thumbnailRow | Horizontal row of thumbnail previews |
thumbnailGrid | Grid of thumbnail previews |
carousel | Horizontal carousel with larger previews |
Number of content items to display.
Whether to auto-play preview animations on hover/focus.
entryWidget.previewType
string
default:"thumbnail"
Preview content type.| Value | Description |
|---|
thumbnail | Static first-frame thumbnail |
gif | Animated preview GIF (first 2-3 seconds) |
const config = {
entryWidget: {
style: 'thumbnailRow',
itemCount: 5,
autoPlay: true,
previewType: 'gif'
}
};
Feed filters
Filter content displayed in the feed:
Only show content with at least one of these tags.
Exclude content with any of these tags.
Only show specific content IDs (useful for curated playlists).
Only show content published within the last N days.
const config = {
filter: {
tags: ['breaking-news', 'politics'],
excludeTags: ['opinion'],
maxAgeDays: 7
}
};
performance.prefetchCount
Number of upcoming videos to pre-buffer.
performance.thumbnailPrefetchCount
Number of upcoming thumbnails to prefetch.
performance.initialBufferMs
Target buffer before starting playback, in milliseconds.
Whether to reduce quality when device is in low-power mode.
Whether to prefer AV1 codec when hardware decode is available. AV1 offers better quality at lower bitrate.
const config = {
performance: {
prefetchCount: 2,
thumbnailPrefetchCount: 4,
initialBufferMs: 1500,
lowPowerMode: true,
preferAV1: true
}
};
Complete example
import { shortkit } from '@shortkit/web';
shortkit.initialize({
apiKey: 'pk_live_your_publishable_key',
environment: 'production',
remoteConfigTTL: 300,
remoteConfigTimeout: 2000,
config: {
// Layout
feedOrientation: 'vertical',
feedHeight: 'fullscreen',
contentTypes: ['video'],
// Controls
controls: {
playPause: true,
scrubber: true,
playbackSpeed: {
enabled: true,
options: [1.0, 1.25, 1.5, 2.0]
},
captions: {
enabled: true,
defaultOn: false
},
volume: true,
muteOnStart: true,
pictureInPicture: true,
share: {
enabled: true,
deepLinkPathTemplate: '/watch/{contentId}'
},
autoHideControls: {
enabled: true,
delayMs: 3000
}
},
// Custom actions
actions: [
{ id: 'bookmark', icon: 'bookmark', label: 'Save' }
],
// Theming (see Theming page for full options)
theme: {
primaryColor: '#FF6600',
controlsTint: '#FFFFFF',
backgroundColor: '#000000'
},
// Performance
performance: {
prefetchCount: 3,
thumbnailPrefetchCount: 6,
preferAV1: true
},
// Filters
filter: {
excludeTags: ['draft']
}
}
});
Next steps
