Stories

CleverPush Story Widget

You can also implement CleverPush Stories into your application. For this, please set up a Story Widget in your CleverPush account. You can access stories via generated Widget Id and by following usage guide

Story View

1. For a Round-Shaped Story Widget

2. For a Rectangular-Shaped Story Widget

3. For a Rectangular-Shaped Story Widget with Shadow

4. For Displaying the Unread Count in the Story Widget

5. For Displaying Only 3 Items in the Story Widget According to Screen Width

6. For Displaying the Unread Count and Only 3 Items in the Story Widget According to Screen Width

Story Player

How to use

1. For a Round-Shaped Story Widget

Swift

Objective-C

//Using a CPStoryView with frame
import CleverPush

let storyView = CPStoryView(
            frame: CGRect(x: 15, y: 0, width: self.view.frame.size.width - 30, height: 100),
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 35,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

        self.view.addSubview(storyView!)

//Using a CPStoryView with autolayout
storyView.configure(
            withFrame:storyView.frame,
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 35,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

//Using a CPStoryView with frame
#import <CleverPush/CPStoryView.h>

CPStoryView *storyView = [[CPStoryView alloc] 
        initWithFrame:CGRectMake(15, 0, self.viewBG.frame.size.width - 30, 100) 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:35 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

[self.view addSubview:storyView];

//Using a CPStoryView with autolayout
[self.storyView configureWithFrame:self.storyView.frame
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:35 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

2. For a Rectangular-Shaped Story Widget

Swift

Objective-C

//Using a CPStoryView with frame
import CleverPush

let storyView = CPStoryView(
            frame: CGRect(x: 15, y: 0, width: self.view.frame.size.width - 30, height: 100),
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 10,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

        self.view.addSubview(storyView!)

//Using a CPStoryView with autolayout
storyView.configure(
            withFrame:storyView.frame,
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 10,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

//Using a CPStoryView with frame
#import <CleverPush/CPStoryView.h>

CPStoryView *storyView = [[CPStoryView alloc] 
        initWithFrame:CGRectMake(15, 0, self.viewBG.frame.size.width - 30, 100) 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:10 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

[self.view addSubview:storyView];

//Using a CPStoryView with autolayout
[self.storyView configureWithFrame:self.storyView.frame
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:10 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

3. For a Rectangular-Shaped Story Widget with Shadow

Swift

Objective-C

//Using a CPStoryView with frame
import CleverPush

let storyView = CPStoryView(
            frame: CGRect(x: 15, y: 0, width: self.view.frame.size.width - 30, height: 100),
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 10,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: true,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

        self.view.addSubview(storyView!)

//Using a CPStoryView with autolayout
storyView.configure(
            withFrame:storyView.frame,
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 10,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: true,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

//Using a CPStoryView with frame
#import <CleverPush/CPStoryView.h>

CPStoryView *storyView = [[CPStoryView alloc] 
        initWithFrame:CGRectMake(15, 0, self.viewBG.frame.size.width - 30, 100) 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:10 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:true 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES 
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

[self.view addSubview:storyView];

//Using a CPStoryView with autolayout
[self.storyView configureWithFrame:self.storyView.frame 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:10 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:true 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES 
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

4. For Displaying the Unread Count in the Story Widget

Swift

Objective-C

//Using a CPStoryView with frame
import CleverPush

let storyView = CPStoryView(
            frame: CGRect(x: 15, y: 0, width: self.view.frame.size.width - 30, height: 100),
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 10,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: true,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: true,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

        self.view.addSubview(storyView!)

//Using a CPStoryView with autolayout
storyView.configure(
            withFrame:storyView.frame,
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 10,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: true,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: true,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

//Using a CPStoryView with frame
#import <CleverPush/CPStoryView.h>

CPStoryView *storyView = [[CPStoryView alloc] 
        initWithFrame:CGRectMake(15, 0, self.viewBG.frame.size.width - 30, 100) 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:10 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:true 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:YES 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES 
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

[self.view addSubview:storyView];

//Using a CPStoryView with autolayout
[self.storyView configureWithFrame:self.storyView.frame 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:10 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:true 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:YES 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES 
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

5. For Displaying Only 3 Items in the Story Widget According to Screen Width

Note: Set storyRestrictToItems value in integer, and then the story view icon's width will be dynamic based on the device's width and number of stories will be displayed based on that integer value.

Swift

Objective-C

//Using a CPStoryView with frame
import CleverPush

let storyView = CPStoryView(
            frame: CGRect(x: 15, y: 0, width: self.view.frame.size.width - 30, height: 100),
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 35,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

        self.view.addSubview(storyView!)

//Using a CPStoryView with autolayout
storyView.configure(
            withFrame:storyView.frame,
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 35,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: false,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

//Using a CPStoryView with frame
#import <CleverPush/CPStoryView.h>

CPStoryView *storyView = [[CPStoryView alloc] 
        initWithFrame:CGRectMake(15, 0, self.viewBG.frame.size.width - 30, 100) 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:35 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES 
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

[self.view addSubview:storyView];

//Using a CPStoryView with autolayout
[self.storyView configureWithFrame:self.storyView.frame 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:35 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems:3 
        unreadStoryCountVisibility:NO 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES 
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

6. For Displaying the Unread Count and Only 3 Items in the Story Widget According to Screen Width

Note: Set storyRestrictToItems value in integer, and then the story view icon's width will be dynamic based on the device's width and number of stories will be displayed based on that integer value.

Swift

Objective-C

//Using a CPStoryView with frame
import CleverPush

let storyView = CPStoryView(
            frame: CGRect(x: 15, y: 0, width: self.view.frame.size.width - 30, height: 100),
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 35,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: true,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

        self.view.addSubview(storyView!)

//Using a CPStoryView with autolayout
storyView.configure(
            withFrame:storyView.frame,
            backgroundColor: .clear,
            textColor: .black,
            fontFamily: "AppleSDGothicNeo-Bold",
            borderColor: .yellow,
            titleVisibility: true,
            titleTextSize: 10,
            storyIconHeight: 70,
            storyIconWidth: 70,
            storyIconCornerRadius: 35,
            storyIconSpacing: 0,
            storyIconBorderVisibility: true,
            storyIconBorderMargin: 0,
            storyIconBorderWidth: 2,
            storyIconShadow: false,
            storyRestrictToItems: 3,
            unreadStoryCountVisibility: true,
            unreadStoryCountBackgroundColor: .red,
            unreadStoryCountTextColor: .white,
            storyViewCloseButtonPosition: .leftSide,
            storyViewTextPosition: .insideBottom,
            storyWidgetShareButtonVisibility: false,
            sortToLastIndex: true,
            allowAutoRotation: true,
            widgetId: "CyELm3daayQGuSGTD"
        )

//Using a CPStoryView with frame
#import <CleverPush/CPStoryView.h>

CPStoryView *storyView = [[CPStoryView alloc] 
        initWithFrame:CGRectMake(15, 0, self.viewBG.frame.size.width - 30, 100) 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:35 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems: 3
        unreadStoryCountVisibility:YES 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

[self.view addSubview:storyView];

//Using a CPStoryView with autolayout
[self.storyView configureWithFrame:self.storyView.frame 
        backgroundColor:[UIColor clearColor] 
        textColor:[UIColor blackColor] 
        fontFamily:@"AppleSDGothicNeo-Bold" 
        borderColor:[UIColor yellowColor] 
        titleVisibility:YES 
        titleTextSize:10 
        storyIconHeight:70 
        storyIconWidth:70 
        storyIconCornerRadius:35 
        storyIconSpacing:0 
        storyIconBorderVisibility:YES 
        storyIconBorderMargin:0 
        storyIconBorderWidth:2.5 
        storyIconShadow:NO 
        storyRestrictToItems: 3
        unreadStoryCountVisibility:YES 
        unreadStoryCountBackgroundColor:[UIColor redColor] 
        unreadStoryCountTextColor:[UIColor whiteColor] 
        storyViewCloseButtonPosition:CPStoryWidgetCloseButtonPositionLeftSide 
        storyViewTextPosition:CPStoryWidgetTextPositionInsideBottom 
        storyWidgetShareButtonVisibility:NO 
        sortToLastIndex:YES
        allowAutoRotation:YES
        widgetId:@"CyELm3daayQGuSGTD"];

Handle opened URLs in stories:

Swift

Objective-C

 storyView?.setOpenedCallback({ url in
    print("URL OPENED = ", url)
})

 [storyView setOpenedCallback:^(NSURL *url) {
    NSLog(@"URL OPENED = %@", url);
}];

Customizing StoryView

You can customize the experience of StoryView using these attributes:

• widgetId: Specifies the ID of the story widget.
• borderColor: Defines the color of the border around the story.
• storyIconBorderVisibility: Controls the visibility of the border around the story.
• storyIconBorderMargin: Sets the margin between border and story icon.
• storyIconBorderWidth: Defines the width of the border around the story.
• backgroundColor: Sets the background color of the story view.
• textColor: Specifies the color of the story title of story view.
• fontFamily: Sets the font family for the story title.
• titleVisibility: Controls the visibility of the story title.
• titleTextSize: Sets the size of the story title text.
• storyViewTextPosition: Defines the position of the title, with options like position_default, position_inside_bottom, or position_inside_top.
• storyIconHeight: Defines the height of the story icon.
• storyIconWidth: Defines the width of the story icon.
• storyIconCornerRadius: Sets the corner radius of the story icon.
• storyIconSpacing: Specifies the space between individual stories. (Minimum spacing is 2.5)
• storyIconShadow: Enables or disables a shadow around the story icon (boolean).
• unreadStoryCountVisibility: Controls the visibility of the unread count for sub-stories.
• unreadStoryCountBackgroundColor: Sets the background color of the sub-story unread count badge.
• unreadStoryCountTextColor: Specifies the text color of the sub-story unread count badge.
• storyRestrictToItems: Restricts the story view to display number of items (integer value).
• storyViewCloseButtonPosition: Sets the position of the close button, either left or right.
• sortToLastIndex: Determines whether seen stories are moved to the end of the list (position_end) or remain in their default position (position_default).
• storyWidgetShareButtonVisibility: Controls the visibility of the share button for sub-stories.
• allowAutoRotation: Controls the support of giving device orientation layout change support.