Story - social.plus

UIKit Component: Story components are built on top of the social.plus SDK, providing ready-to-use story creation and viewing UI with full data management handled automatically.

Feature Overview

The Story feature in social.plus UIKit v4 enables users to create, share, and view ephemeral content, enhancing engagement and fostering community interaction. This suite of components provides a seamless experience for users to capture moments, share multimedia content, and engage with their communities through time-limited stories that disappear after 24 hours.

Key Features

Story Creation

Rich multimedia story creation

Camera integration with image and video capture
Media picker for existing content selection
Story composer with editing tools and hyperlinks
Audience targeting and content customization

Story Viewing

Immersive story viewing experience

Full-screen story viewer with navigation controls
Story ring indicators and progress tracking
Auto-play and manual navigation options
Interactive engagement features

Story Management

Story lifecycle and content management

Story drafting and preview capabilities
24-hour automatic expiration handling
Story deletion and editing controls
Analytics and engagement tracking

Audience Targeting

Flexible content distribution options

Community-specific story sharing
Personal timeline story creation
Target selection workflows
Privacy and visibility controls

Platform Support

Feature	iOS	Android	Web	Flutter	React Native
Story Target Tab Component	✅	✅	✅	✅	✅
Story Creation	✅	✅	-	✅	✅
Story Viewing	✅	✅	✅	✅	✅
Story Target Selection	✅	✅	-	✅	-
Story Drafting	✅	✅	✅	✅	✅

Implementation Guide

Story Target Tab Component
Story Creation
Story Viewing
Story Target Selection

Story ring display and navigation componentThe Story Target Tab Component enables users to view and navigate story collections through circular ring indicators. This component provides seamless story discovery and creation workflows for both community and global feeds.

Story Target Tab Component

The Story Target Tab Component is a dynamic feature that enhances the application page by allowing users to discover, view, and create stories. This component provides visual indicators for story availability and enables quick access to story creation and viewing workflows.

Features

Feature	Description
Story Ring Indicators	Visual circular progress indicators showing available stories
Community Story Targets	Access to community-specific story collections
Global Story Feed	Browse stories from all accessible communities
Creation Shortcuts	Quick access to story creation workflows

Required Properties

Property	Type	Description
`type`	`AmityStoryTabComponentType`	Type of story feed (community or global)

Customization Options

Config ID	Type	Description
`/story_tab_component/`	Component	Customize component theme and styling
`*/story_tab_component/story_ring`	Element	Customize ring colors with `progress_color` and `background_color`
`*/story_tab_component/create_new_story_button`	Element	Customize creation button with `create_new_story_icon` and `background_color`

Code Examples

// Community Feed Story Tab
let storyTabComponent = AmityStoryTabComponent(type: .communityFeed("<community-id>"))
let viewController = AmitySwiftUIHostingController(rootView: storyTabComponent)
navigationController?.pushViewController(viewController, animated: true)

// Global Feed Story Tab
let globalStoryTabComponent = AmityStoryTabComponent(type: .globalFeed)
let globalViewController = AmitySwiftUIHostingController(rootView: globalStoryTabComponent)
navigationController?.pushViewController(globalViewController, animated: true)

class CustomStoryTabComponentBehaviour: AmityStoryTabComponentBehaviour {
    override init() {
        super.init()
    }
    
    override func goToViewStoryPage(context: AmityStoryTabComponentBehaviour.Context) {
        // Navigate to story viewing page
        let viewStoryPage = AmityViewStoryPage(type: .communityFeed(context.targetId))
        let viewController = AmitySwiftUIHostingController(rootView: viewStoryPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
    
    override func goToCreateStoryPage(context: AmityStoryTabComponentBehaviour.Context) {
        // Navigate to story creation page
        let createStoryPage = AmityCreateStoryPage(targetId: context.targetId, targetType: context.targetType)
        let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setStoryTabComponentBehaviour() {
    let customStoryTabComponentBehaviour = CustomStoryTabComponentBehaviour()
    AmityUIKit4Manager.behaviour.storyTabComponentBehaviour = customStoryTabComponentBehaviour
}

Story creation and multimedia captureStory Creation components enable users to create rich multimedia stories with camera integration, media selection, and content editing capabilities before publishing to their selected audience.

Story Creation Page

The Story Creation Page provides comprehensive camera functionality and media selection capabilities for creating engaging story content. Users can capture new content or select from existing media to create stories with customizable features and targeting options.

Features

Feature	Description
Camera Integration	Real-time camera view for capturing images and videos
Media Selection	Access to device gallery for selecting existing content
Content Preview	Live preview of captured or selected content
Recording Controls	Video recording with duration controls and quality settings

Required Properties

Property	Type	Description
`targetId`	`String`	The ID of the target (community ID or user ID)
`targetType`	`AmityStory.TargetType`	Type of target (community or user)

Customization Options

Config ID	Type	Description
`camera_page//`	Page	Customize camera page theme and styling
`camera_page/*/close_button`	Element	Customize close button with `close_icon` and `background_color`
`camera_page/*/capture_button`	Element	Customize capture button styling and behavior
`camera_page/*/switch_camera_button`	Element	Customize camera switching controls

Code Examples

// Create story for community
let createStoryPage = AmityCreateStoryPage(
    targetId: "<community-id>", 
    targetType: .community
)
let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
navigationController?.pushViewController(viewController, animated: true)

// Create story for user timeline
let userStoryPage = AmityCreateStoryPage(
    targetId: "<user-id>", 
    targetType: .user
)
let userViewController = AmitySwiftUIHostingController(rootView: userStoryPage)
navigationController?.pushViewController(userViewController, animated: true)

Story Drafting Page

The Story Draft Page enables users to preview, edit, and customize their story content before publishing. This component provides comprehensive editing tools including hyperlink addition, aspect ratio adjustment, and content finalization.

Features

Feature	Description
Content Preview	Full preview of story content before publishing
Hyperlink Integration	Add clickable links with customizable text
Aspect Ratio Control	Adjust story dimensions and presentation
Publishing Controls	Final review and story publishing options

Required Properties

Property	Type	Description
`targetId`	`String`	The ID of the target (community ID or user ID)
`targetType`	`AmityStory.TargetType`	Type of target (community or user)
`mediaType`	`AmityStoryMediaType`	Type and source of media content

Customization Options

Config ID	Type	Description
`create_story_page//`	Page	Customize drafting page theme and styling
`create_story_page/*/back_button`	Element	Customize back navigation with `back_icon` and `background_color`
`create_story_page/*/aspect_ratio_button`	Element	Customize aspect ratio controls
`create_story_page/*/story_hyperlink_button`	Element	Customize hyperlink button styling
`create_story_page/*/share_story_button`	Element	Customize publish button with `share_icon` and `background_color`

Code Examples

// Draft Image Story
let draftImageStoryPage = AmityDraftStoryPage(
    targetId: "<community-id>", 
    targetType: .community, 
    mediaType: .image(previewImageURL)
)
let viewController = AmitySwiftUIHostingController(rootView: draftImageStoryPage)
navigationController?.pushViewController(viewController, animated: true)

// Draft Video Story
let draftVideoStoryPage = AmityDraftStoryPage(
    targetId: "<community-id>", 
    targetType: .community, 
    mediaType: .video(previewVideoURL)
)
let videoViewController = AmitySwiftUIHostingController(rootView: draftVideoStoryPage)
navigationController?.pushViewController(videoViewController, animated: true)

class CustomCreateStoryPageBehaviour: AmityCreateStoryPageBehaviour {
    override init() {
        super.init()
    }
    
    override func goToDraftStoryPage(context: AmityCreateStoryPageBehaviour.Context) {
        // Navigate to story draft page
        let draftPage = AmityDraftStoryPage(
            targetId: context.targetId,
            targetType: context.targetType,
            mediaType: context.mediaType
        )
        let viewController = AmitySwiftUIHostingController(rootView: draftPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setCreateStoryPageBehaviour() {
    let customCreateStoryPageBehaviour = CustomCreateStoryPageBehaviour()
    AmityUIKit4Manager.behaviour.createStoryPageBehaviour = customCreateStoryPageBehaviour
}

Story viewing and engagement interfaceStory Viewing components provide immersive full-screen story consumption with navigation controls, engagement features, and seamless story progression for enhanced user experience.

Story Viewing Page

The Story Viewing Page provides an immersive full-screen interface for consuming story content. Users can navigate through story collections, engage with content through reactions and comments, and seamlessly progress through multiple stories with intuitive controls.

Features

Feature	Description
Full-Screen Viewing	Immersive story consumption with optimized media display
Progress Indicators	Visual progress tracking across story collections
Navigation Controls	Tap to advance, hold to pause, swipe gestures
Engagement Features	React, comment, and interact with story content
Audio Controls	Mute/unmute story audio with visual indicators

Required Properties

Property	Type	Description
`type`	`AmityViewStoryPageType`	Type of story view (community feed or global feed)

Customization Options

Config ID	Type	Description
`story_page//`	Page	Customize story viewing page theme and styling
`story_page/*/progress_bar`	Element	Customize progress indicators with `progress_color` and `background_color`
`story_page/*/overflow_menu`	Element	Customize options menu with `overflow_menu_icon`
`story_page/*/close_button`	Element	Customize close navigation with `close_icon`
`story_page/*/story_impression_button`	Element	Customize impression tracking with `impression_icon`
`story_page/*/story_comment_button`	Element	Customize comment interaction
`story_page/*/story_reaction_button`	Element	Customize reaction controls
`story_page/*/speaker_button`	Element	Customize audio controls with `mute_icon` and `unmute_icon`

Code Examples

// Community Feed Story Viewing
let viewStoryPage = AmityViewStoryPage(type: .communityFeed("<community-id>"))
let viewController = AmitySwiftUIHostingController(rootView: viewStoryPage)
navigationController?.pushViewController(viewController, animated: true)

// Global Feed Story Viewing
// Specify communityId to start from specific community in global feed
let globalViewStoryPage = AmityViewStoryPage(type: .globalFeed("<start-community-id>"))
let globalViewController = AmitySwiftUIHostingController(rootView: globalViewStoryPage)
navigationController?.pushViewController(globalViewController, animated: true)

class CustomViewStoryPageBehaviour: AmityViewStoryPageBehaviour {
    override init() {
        super.init()
    }
    
    override func goToCreateStoryPage(context: AmityViewStoryPageBehaviour.Context) {
        // Navigate to story creation
        let createStoryPage = AmityCreateStoryPage(
            targetId: context.targetId,
            targetType: context.targetType
        )
        let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
    
    func handleStoryEnd() {
        // Handle story viewing completion
        navigationController?.popViewController(animated: true)
    }
    
    func handleStoryError(error: Error) {
        // Handle story viewing errors
        showErrorAlert(error: error)
    }
}

// Setup custom behavior
func setViewStoryPageBehaviour() {
    let customViewStoryPageBehaviour = CustomViewStoryPageBehaviour()
    AmityUIKit4Manager.behaviour.viewStoryPageBehaviour = customViewStoryPageBehaviour
}

Audience and target selection for story distributionStory Target Selection components provide users with flexible options to choose where their stories will be visible, enabling precise audience control and content distribution.

Story Target Selection Page

The Story Target Selection Page streamlines the process of choosing target audiences for story sharing. Users can select specific communities, target their personal timeline, or broadcast to multiple audiences with comprehensive visibility controls.

Features

Feature	Description
Community Selection	Browse and select specific communities for story distribution
Personal Timeline	Option to share stories on personal user timeline
Audience Preview	Preview potential reach and engagement for selected targets
Multi-Target Support	Select multiple communities or distribution channels

Required Properties

Property	Type	Description
None	-	Page requires no mandatory properties for basic functionality

Customization Options

Config ID	Type	Description
`select_story_target_page//`	Page	Customize target selection page theme and styling
`select_story_target_page/*/close_button`	Element	Customize close navigation with custom `image`
`select_story_target_page/*/title`	Element	Customize page title with custom `text`
`select_story_target_page/*/community_list`	Component	Customize community selection interface

Code Examples

let storyTargetSelectionPage = AmityStoryTargetSelectionPage()
let viewController = AmitySwiftUIHostingController(rootView: storyTargetSelectionPage)
navigationController?.pushViewController(viewController, animated: true)

class CustomStoryTargetSelectionPageBehaviour: AmityStoryTargetSelectionPageBehaviour {
    override init() {
        super.init()
    }
    
    override func goToCreateStoryPage(context: AmityStoryTargetSelectionPageBehaviour.Context) {
        // Navigate to story creation with selected target
        let createStoryPage = AmityCreateStoryPage(
            targetId: context.targetId,
            targetType: context.targetType
        )
        let viewController = AmitySwiftUIHostingController(rootView: createStoryPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setStoryTargetSelectionPageBehaviour() {
    let customStoryTargetSelectionPageBehaviour = CustomStoryTargetSelectionPageBehaviour()
    AmityUIKit4Manager.behaviour.storyTargetSelectionPageBehaviour = customStoryTargetSelectionPageBehaviour
}

Posts & Media

Post Components Permanent content creation and media management for lasting social content

Social Feeds

Feed Components Story integration within social feeds and timeline displays

Communities

Community Features Community-based story sharing and audience targeting

Users & Profiles

User Management User profile integration with story content and viewing history

Comments & Reactions

Interaction Components Story engagement through comments, reactions, and impressions

Livestream

Live Content Real-time video broadcasting and live story alternatives

Implementation Strategy: Begin with the Story Target Tab Component to establish story discovery workflows, then implement Story Creation for capturing and drafting content. Add Story Viewing for consumption experiences and ensure proper target selection with the Selection Page. Remember that stories are ephemeral content with 24-hour expiration - implement proper cleanup mechanisms and user notifications. Focus on smooth media transitions, responsive controls, and seamless navigation between story creation, viewing, and engagement features.

Powered by

Getting Started

Customization

Components

Release Notes

Support

​Feature Overview

​Key Features

Story Creation

Story Viewing

Story Management

Audience Targeting

​Platform Support

​Implementation Guide

​Story Target Tab Component

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Story Creation Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Story Drafting Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Story Viewing Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Story Target Selection Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Related Components

Posts & Media

Social Feeds

Communities

Users & Profiles

Comments & Reactions

Livestream

Feature Overview

Key Features

Platform Support

Implementation Guide

Story Target Tab Component

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Story Creation Page

Features

Required Properties

Customization Options

Code Examples

Story Drafting Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Story Viewing Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Story Target Selection Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Related Components