VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, we provide you with VPKPreview, a subclass of UIImageView. Your image is now interactive, and your team can manage the journey and gain analytical insight. If the image is a placeholder for a video, VPKit provides an interactive video player as a replacement for AVPlayerViewController

A VEEP is a metadata object providing interactive hotspots in images and video, with a built-in browser to follow those links whilst remaining inside the host app.

The SDK can be downloaded from our Github repository

A complete class reference is avaialble here

For installation help: sdk_support@veepio.com

About the SDK

VPKit is supplied as a pre-compiled dynamic xcframework. It is ready for drag-and-drop use in your Swift or Objective-C iOS project or can be installed using Cocoapods. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews. The Veep icon indicates that the preview image has associated veep metadata.

• Tapping a VPKPreview with a veep-enabled image launches the VPKVeepViewer view controller with veep image viewer.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Viewing a VEEP video

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping a VPKPreview with a veep-enabled video preview image launches the VPKVeepViewer view controller with veep video player.
• Interactive areas of videos are marked by veep track borders.
• Color bars on the video timeline indicate locations of veep tracks in the video.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating VEEP’d media

Refer to the VPKitMaker SDK for creating VEEP meda meatadata.
(Forthcoming: contact us for more information and bespoke solutions)

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.xcframework binary into your XCode project

Ensure the framework is included in “Frameworks, Libraries and Embedded Content” in the general tab of your target settings. Select embed and sign.

Build Phases Tab

Ensure the framework appears in both “Link Binary with Libraries” and “Embed Frameworks” sections. This should be correct if you have added the framework correctly in the General Tab. The signing box should be checked.

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

App registration

Your app will need to be registered with VEEPIO before you can create or consume VEEP metadata. This process can be completed on the VEEPIO developer portal. Each app that you create will be assigned an appID (name), clientID, clientSecret.

Initialization in your App Delegate

You will need to identify your app to the VPKit SDK in order to successfully request VEEP metadata. The App Delegate is a good location for this. You will need to have first obtained your appID (name), clientID, clientSecret from the the VEEPIO developer portal. For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for testing and development without polluting your live data.

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

See VPKStyles in our SDK reference for all available properties

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement subclass of UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with optional Veep identifier properties.
• It provides a VEEP icon overlay to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview pass-through delegate

VPKPreview handles presenting and dismissing of its viewer controllers, and it also has an optional pass-through delegate if your app needs user interaction feedback.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate:

• if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (when there is no associated veep content with the view).
• if your host app needs to handle additional tap gesture behaviour when the preview object launches a VeepViewer in response to veep content.

There are two passThroughDelegate methods. Their purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if a users taps on a VPKPreview and there is no veep content associated with it.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              handledTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              handledTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if the user taps on veep content, and the VPKPreview will launch a VeepViewer, but the host app needs to augment the tap behaviour.

The VPKPreview also exposes a UITouchGestureRecognizer as a read-only property for more fine-grained control

VPKPreviewDelegate (deprecated)

If the delegate property is set on VPKPreview the host app is responsible for presenting and dismissing the VeepViewer. This is not recommended and the property is deprecated. See earlier versions of this tutorial for more information.

Creating veep content

Refer to the separate VPKitMaker SDK for creating Veep Content. The SDK will be available for public download soon. Please contact us for more information and bespoke solutions.

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

See VPKStyles in our SDK reference for all available properties

Event notifications

A number of event messages are available to intercept as NSNotification objects. For details refer to:

VPKPublicEventConstants

The notification objects include a userInfo dictionary with a single VPKIdentifierKey entry. If a mediaIdentifier string is set on the VPKPreview's VPKImage, this will be returned as the value. The identifier may aid in ensuring that the correct media events are handled.

Reference

A complete class reference is avaialble here.

Support

For installation help and more information: sdk_support@veepio.com

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, we provide you with VPKPreview, a subclass of UIImageView. Your image is now interactive, and your team can manage the journey and gain analytical insight. If the image is a placeholder for a video, VPKit provides an interactive video player as a replacement for AVPlayerViewController

A VEEP is a metadata object providing interactive hotspots in images and video, with a built-in browser to follow those links whilst remaining inside the host app.

The SDK can be downloaded from our Github repository

A complete class reference is avaialble here

For installation help: sdk_support@veepio.com

About the SDK

VPKit is supplied as a pre-compiled dynamic xcframework. It is ready for drag-and-drop use in your Swift or Objective-C iOS project or can be installed using Cocoapods. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews. The Veep icon indicates that the preview image has associated veep metadata.

• Tapping a VPKPreview with a veep-enabled image launches the VPKVeepViewer view controller with veep image viewer.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Viewing a VEEP video

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping a VPKPreview with a veep-enabled video preview image launches the VPKVeepViewer view controller with veep video player.
• Interactive areas of videos are marked by veep track borders.
• Color bars on the video timeline indicate locations of veep tracks in the video.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating VEEP’d media

Refer to the VPKitMaker SDK for creating VEEP meda meatadata.
(Forthcoming: contact us for more information and bespoke solutions)

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.xcframework binary into your XCode project

Ensure the framework is included in “Frameworks, Libraries and Embedded Content” in the general tab of your target settings. Select embed and sign.

Build Phases Tab

Ensure the framework appears in both “Link Binary with Libraries” and “Embed Frameworks” sections. This should be correct if you have added the framework correctly in the General Tab. The signing box should be checked.

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10+; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

App registration

Your app will need to be registered with VEEPIO before you can create or consume VEEP metadata. This process can be completed on the VEEPIO developer portal. Each app that you create will be assigned an appID (name), clientID, clientSecret.

Initialization in your App Delegate

You will need to identify your app to the VPKit SDK in order to successfully request VEEP metadata. The App Delegate is a good location for this. You will need to have first obtained your appID (name), clientID, clientSecret from the the VEEPIO developer portal. For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for testing and development without polluting your live data.

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

See VPKStyles in our SDK reference for all available properties

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement subclass of UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with optional Veep identifier properties.
• It provides a VEEP icon overlay to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview pass-through delegate

VPKPreview handles presenting and dismissing of its viewer controllers, and it also has an optional pass-through delegate if your app needs user interaction feedback.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate:

• if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (when there is no associated veep content with the view).
• if your host app needs to handle additional tap gesture behaviour when the preview object launches a VeepViewer in response to veep content.

There are two passThroughDelegate methods. Their purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if a users taps on a VPKPreview and there is no veep content associated with it.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              handledTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              handledTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if the user taps on veep content, and the VPKPreview will launch a VeepViewer, but the host app needs to augment the tap behaviour.

The VPKPreview also exposes a UITouchGestureRecognizer as a read-only property for more fine-grained control

VPKPreviewDelegate (deprecated)

If the delegate property is set on VPKPreview the host app is responsible for presenting and dismissing the VeepViewer. This is not recommended and the property is deprecated. See earlier versions of this tutorial for more information.

Creating veep content

Refer to the separate VPKitMaker SDK for creating Veep Content. The SDK will be available for public download soon. Please contact us for more information and bespoke solutions.

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

See VPKStyles in our SDK reference for all available properties

Event notifications

A number of event messages are available to intercept as NSNotification objects. For details refer to:

VPKPublicEventConstants

The notification objects include a userInfo dictionary with a single VPKIdentifierKey entry. If a mediaIdentifier string is set on the VPKPreview's VPKImage, this will be returned as the value. The identifier may aid in ensuring that the correct media events are handled.

Reference

A complete class reference is avaialble here.

Support

For installation help and more information: sdk_support@veepio.com

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, we provide you with VPKPreview, a subclass of UIImageView. Your image is now interactive, and your team can manage the journey and gain analytical insight. If the image is a placeholder for a video, VPKit provides an interactive video player as a replacement for AVPlayerViewController

A VEEP is a metadata object providing interactive hotspots in images and video, with a built-in browser to follow those links whilst remaining inside the host app.

The SDK can be downloaded from our Github repository

A complete class reference is avaialble here

For installation help: sdk_support@veepio.com

About the SDK

VPKit is supplied as a pre-compiled static framework. It is ready for drag-and-drop use in your Swift or Objective-C iOS project or can be installed using Cocoapods. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Viewing a VEEP video

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of videos are marked by veep track borders.
• Color bars on the video timeline indicate locations of veep tracks in the video.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating VEEP’d media

Refer to the VPKitMaker SDK for creating VEEP meda meatadata.
(Forthcoming: contact us for more information and bespoke solutions)

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

General Tab - XCode 10
Ensure the framework is included in both “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

General Tab - XCode 11+
Ensure the framework is included in “Frameworks, Libraries and Embedded Content” in the general tab of your target settings. Select embed without signing.

Build Phases Tab

Ensure the framework appears in both “Link Binary with Libraries” and “Embed Frameworks” sections. This should be correct if you have added the framework correctly in the General Tab. The signing box can be unchecked.

VPKit.framework is a univerrsal static framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"
  The demo projects show the use of a build script phase.

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10+; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

App registration

Your app will need to be registered with VEEPIO before you can create or consume VEEP metadata. This process can be completed on the VEEPIO developer portal. Each app that you create will be assigned an appID (name), clientID, clientSecret.

Initialization in your App Delegate

You will need to identify your app to the VPKit SDK in order to successfully request VEEP metadata. The App Delegate is a good location for this. You will need to have first obtained your appID (name), clientID, clientSecret from the the VEEPIO developer portal. For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for testing and development without polluting your live data.

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

See VPKStyles in our SDK reference for all available properties

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement subclass of UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with optional Veep identifier properties.
• It provides a VEEP icon overlay to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview pass-through delegate

VPKPreview handles presenting and dismissing of its viewer controllers, and it also has an optional pass-through delegate if your app needs user interaction feedback.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate:

• if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (when there is no associated veep content with the view).
• if your host app needs to handle additional tap gesture behaviour when the preview object launches a VeepViewer in response to veep content.

There are two passThroughDelegate methods. Their purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if a users taps on a VPKPreview and there is no veep content associated with it.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              handledTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              handledTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if the user taps on veep content, and the VPKPreview will launch a VeepViewer, but the host app needs to augment the tap behaviour.

The VPKPreview also exposes a UITouchGestureRecognizer as a read-only property for more fine-grained control

VPKPreviewDelegate (deprecated)

If the delegate property is set on VPKPreview the host app is responsible for presenting and dismissing the VeepViewer. This is not recommended and the property is deprecated. See earlier versions of this tutorial for more information.

Creating veep content

Refer to the separate VPKitMaker SDK for creating Veep Content. The SDK will be available for public download soon. Please contact us for more information and bespoke solutions.

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

See VPKStyles in our SDK reference for all available properties

Event notifications

A number of event messages are available to intercept as NSNotification objects. For details refer to:

VPKPublicEventConstants

The notification objects include a userInfo dictionary with a single VPKIdentifierKey entry. If a mediaIdentifier string is set on the VPKPreview's VPKImage, this will be returned as the value. The identifier may aid in ensuring that the correct media events are handled.

Reference

A complete class reference is avaialble here.

Support

For installation help and more information: sdk_support@veepio.com

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, we provide you with VPKPreview, a subclass of UIImageView. Your image is now interactive, and your team can manage the journey and gain analytical insight. If the image is a placeholder for a video, VPKit provides an interactive video player as a replacement for AVPlayerViewController

A VEEP is a metadata object providing interactive hotspots in images and video, with a built-in browser to follow those links whilst remaining inside the host app.

The SDK can be downloaded from our Github repository

A complete class reference is avaialble here

For installation help: sdk_support@veepio.com

About the SDK

VPKit is supplied as a pre-compiled static framework. It is ready for drag-and-drop use in your Swift or Objective-C iOS project or can be installed using Cocoapods. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Viewing a VEEP video

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of videos are marked by veep track borders.
• Color bars on the video timeline indicate locations of veep tracks in the video.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating VEEP’d media

Refer to the VPKitMaker SDK for creating VEEP meda meatadata.
(Forthcoming: contact us for more information and bespoke solutions)

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

General Tab - XCode 10
Ensure the framework is included in both “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

General Tab - XCode 11+
Ensure the framework is included in “Frameworks, Libraries and Embedded Content” in the general tab of your target settings. Select embed without signing.

Build Phases Tab

Ensure the framework appears in both “Link Binary with Libraries” and “Embed Frameworks” sections. This should be correct if you have added the framework correctly in the General Tab. The signing box can be unchecked.

VPKit.framework is a univerrsal static framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"
  The demo projects show the use of a build script phase.

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10+; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

App registration

Your app will need to be registered with VEEPIO before you can create or consume VEEP metadata. This process can be completed on the VEEPIO developer portal. Each app that you create will be assigned an appID (name), clientID, clientSecret.

Initialization in your App Delegate

You will need to identify your app to the VPKit SDK in order to successfully request VEEP metadata. The App Delegate is a good location for this. You will need to have first obtained your appID (name), clientID, clientSecret from the the VEEPIO developer portal. For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for testing and development without polluting your live data.

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

See VPKStyles in our SDK reference for all available properties

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement subclass of UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with optional Veep identifier properties.
• It provides a VEEP icon overlay to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview pass-through delegate

VPKPreview handles presenting and dismissing of its viewer controllers, and it also has an optional pass-through delegate if your app needs user interaction feedback.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate:

• if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (when there is no associated veep content with the view).
• if your host app needs to handle additional tap gesture behaviour when the preview object launches a VeepViewer in response to veep content.

There are two passThroughDelegate methods. Their purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if a users taps on a VPKPreview and there is no veep content associated with it.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              handledTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              handledTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if the user taps on veep content, and the VPKPreview will launch a VeepViewer, but the host app needs to augment the tap behaviour.

The VPKPreview also exposes a UITouchGestureRecognizer as a read-only property for more fine-grained control

VPKPreviewDelegate (deprecated)

If the delegate property is set on VPKPreview the host app is responsible for presenting and dismissing the VeepViewer. This is not recommended and the property is deprecated. See earlier versions of this tutorial for more information.

Creating veep content

Refer to the separate VPKitMaker SDK for creating Veep Content. The SDK will be available for public download soon. Please contact us for more information and bespoke solutions.

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

See VPKStyles in our SDK reference for all available properties

Event notifications

A number of event messages are available to intercept as NSNotification objects. For details refer to:

VPKPublicEventConstants

The notification objects include a userInfo dictionary with a single VPKIdentifierKey entry. If a mediaIdentifier string is set on the VPKPreview's VPKImage, this will be returned as the value. The identifier may aid in ensuring that the correct media events are handled.

Reference

A complete class reference is avaialble here.

Support

For installation help and more information: sdk_support@veepio.com

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, you might decide to replace a UIImageView with a VPKPreview. Your image is now interactive, and your team can manage the journey and gain analytical insight. If the image is a placeholder for a video, VPKit provides an interactive video player as a replacement for AVPlayerViewController

A VEEP is a metadata object defining the transition from an image or video in a social feed to an e-commerce experience or a URL.

The SDK can be downloaded from our Github repository

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

A complete class reference is avaialble here

A little more about the SDK

VPKit is supplied as a pre-compiled dynamic framework ready for drag-and-drop use in your Swift or Objective-C iOS project. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Viewing a VEEP video

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of videos are marked by veep track borders.
• Color bars on the video timeline indicate locations of veep tracks in the video.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating a VEEP image

The demo app includes a CREATE image to show how veep content is originated.

• Tapping the CREATE image launches the VPKVeepEditor view controller.
• The user may add veep tracks by tapping an area of interest in the image.
• Each track can be moved and reshaped by manipulating its bounding box.
• Each track can also be associated with a URL using the Google and Amazon search pages.
• After defining one or more veep tracks, the user can publish the veep.
• This will send the Veep metadata to Veepio’s hosting servers and return a VeepID for you to store in your app.

The VEEP metadata can in turn be consumed using a VPKPreview object as mentioned above.

Creating a VEEP video

Video create is not yet avaialable via the VPKit public SDK but is on the roadmap for future release.

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

Ensure the framework is included in “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

VPKit.framework is a univerrsal dynamic framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

create veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

Initialization in your App Delegate

Firstly, you’ll need to introduce your application to VEEPIO. The App Delegate is a good location for this. A triplet of unique strings identify your app to the Veepio SDK: appID, clientID and clientSecret. To obtain these identifiers, contact skd_support@veepio.com.

For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];*------/

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for development

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement for a UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with added VeepID property.
• It provides an animated VEEP icon to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview delegates

VPKPreview has two optional delegates. If neither of these delegates is set, the VPKPreview object will handle presenting and dismissing the SDK view controllers. Only set these delegates if your host app requires more control.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate:

• if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (when there is no associated veep content with the view).
• if your host app needs to handle additional tap gesture behaviour when the preview object launches a VeepViewer in response to veep content.

There are two passThroughDelegate methods. Their purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if a users taps on a VPKPreview and there is no veep content associated with it.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              handledTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              handledTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if the user taps on veep content, and the VPKPreview will launch a VeepViewer, but the host app needs to augment the tap behaviour.

id <VPKPreviewDelegate> delegate

When this delegate is set, the host app is responsible for the entire process of presenting and dismissing the VPKVeepViewer and (or) VPKVeepEditor View Controllers as described below. The host app only needs to implement VPKVeepViewer and VPKVeepEditor handling code if this delegate is set.

VPKVeepViewer

The VPKVeepViewer view Controller is initialized with a VPKImage and its associated VPKPreview. These methods are delegate callbacks from the VPKPreview on receiving a use touch event:

//swift
func vpkPreviewTouched(_ preview:VPKPreview, image:VPKImage){
	guard let viewer = VPKit.viewer(with: image, from: preview) else {return}
    viewer.delegate = self
    viewer.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
    preview.hideIcon()
    self.present(viewer, animated: true, completion: nil)
}

//objective-c
- (void)vpkPreviewTouched:(VPKPreview *)preview image:(VPKImage*)image {
    self.vpViewer = [VPKit viewerWithImage:image
                                  fromView:preview];
    self.vpViewer.delegate = self;
    self.vpViewer.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [preview hideIcon];
    [self presentViewController:self.vpViewer animated:YES completion:nil];
}

(NB: If you don’t set a delegate on VPKPreview, these methods can be omitted and similar behaviour is provided by default from the VPKPreview object itself)

Creating veep content

If you want to allow your users to VEEP their own user generated content from within your app, you can open the VEEP editor:

//swift
guard let vpEditor = VPKit.editor(with: image, from: self.imageButton) else {return}
vpEditor.useVeepLogo = false
vpEditor.delegate = self
vpEditor.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
self.present(vpEditor, animated: true, completion: nil)

//objective-C
self.vpEditor = [VPKit editorWithImage:self.imageButton.image
                              fromView:self.imageButton];
self.vpEditor.useVeepLogo = NO;
if (self.vpEditor) {
    self.vpEditor.delegate = self;
    self.vpEditor.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [self presentViewController:self.vpEditor animated:YES completion:nil];
}

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

Event notifications

A number of event messages are available to intercept as NSNotification objects. For details refer to:

VPKPublicEventConstants

The notification objects include a userInfo dictionary with a single VPKIdentifierKey entry. If a mediaIdentifier string is set on the VPKPreview's VPKImage, this will be returned as the value. The identifier may aid in ensuring that the correct media events are handled.

Reference

A complete class reference is avaialble here

Support

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, you might decide to replace a UIImageView with a VPKPreview. Your image is now interactive, and your team can manage the journey and gain analytical insight. If the image is a placeholder for a video, VPKit provides an interactive video player as a replacement for AVPlayerViewController

A VEEP is a metadata object defining the transition from an image or video in a social feed to an e-commerce experience or a URL.

The SDK can be downloaded from our Github repository

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

A complete class reference is avaialble here

A little more about the SDK

VPKit is supplied as a pre-compiled dynamic framework ready for drag-and-drop use in your Swift or Objective-C iOS project. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Viewing a VEEP video

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of videos are marked by veep track borders.
• Color bars on the video timeline indicate locations of veep tracks in the video.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating a VEEP image

The demo app includes a CREATE image to show how veep content is originated.

• Tapping the CREATE image launches the VPKVeepEditor view controller.
• The user may add veep tracks by tapping an area of interest in the image.
• Each track can be moved and reshaped by manipulating its bounding box.
• Each track can also be associated with a URL using the Google and Amazon search pages.
• After defining one or more veep tracks, the user can publish the veep.
• This will send the Veep metadata to Veepio’s hosting servers and return a VeepID for you to store in your app.

The VEEP metadata can in turn be consumed using a VPKPreview object as mentioned above.

Creating a VEEP video

Video create is not yet avaialable via the VPKit public SDK but is on the roadmap for future release.

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

Ensure the framework is included in “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

VPKit.framework is a univerrsal dynamic framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

create veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

Initialization in your App Delegate

Firstly, you’ll need to introduce your application to VEEPIO. The App Delegate is a good location for this. A triplet of unique strings identify your app to the Veepio SDK: appID, clientID and clientSecret. To obtain these identifiers, contact skd_support@veepio.com.

For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];*------/

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for development

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement for a UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with added VeepID property.
• It provides an animated VEEP icon to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview delegates

VPKPreview has two optional delegates. If neither of these delegates is set, the VPKPreview object will handle presenting and dismissing the SDK view controllers. Only set these delegates if your host app requires more control.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate:

• if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (when there is no associated veep content with the view).
• if your host app needs to handle additional tap gesture behaviour when the preview object launches a VeepViewer in response to veep content.

There are two passThroughDelegate methods. Their purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if a users taps on a VPKPreview and there is no veep content associated with it.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              handledTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              handledTap tapGestureRecognizer: UITapGestureRecognizer)

Sent if the user taps on veep content, and the VPKPreview will launch a VeepViewer, but the host app needs to augment the tap behaviour.

id <VPKPreviewDelegate> delegate

When this delegate is set, the host app is responsible for the entire process of presenting and dismissing the VPKVeepViewer and (or) VPKVeepEditor View Controllers as described below. The host app only needs to implement VPKVeepViewer and VPKVeepEditor handling code if this delegate is set.

VPKVeepViewer

The VPKVeepViewer view Controller is initialized with a VPKImage and its associated VPKPreview. These methods are delegate callbacks from the VPKPreview on receiving a use touch event:

//swift
func vpkPreviewTouched(_ preview:VPKPreview, image:VPKImage){
	guard let viewer = VPKit.viewer(with: image, from: preview) else {return}
    viewer.delegate = self
    viewer.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
    preview.hideIcon()
    self.present(viewer, animated: true, completion: nil)
}

//objective-c
- (void)vpkPreviewTouched:(VPKPreview *)preview image:(VPKImage*)image {
    self.vpViewer = [VPKit viewerWithImage:image
                                  fromView:preview];
    self.vpViewer.delegate = self;
    self.vpViewer.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [preview hideIcon];
    [self presentViewController:self.vpViewer animated:YES completion:nil];
}

(NB: If you don’t set a delegate on VPKPreview, these methods can be omitted and similar behaviour is provided by default from the VPKPreview object itself)

Creating veep content

If you want to allow your users to VEEP their own user generated content from within your app, you can open the VEEP editor:

//swift
guard let vpEditor = VPKit.editor(with: image, from: self.imageButton) else {return}
vpEditor.useVeepLogo = false
vpEditor.delegate = self
vpEditor.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
self.present(vpEditor, animated: true, completion: nil)

//objective-C
self.vpEditor = [VPKit editorWithImage:self.imageButton.image
                              fromView:self.imageButton];
self.vpEditor.useVeepLogo = NO;
if (self.vpEditor) {
    self.vpEditor.delegate = self;
    self.vpEditor.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [self presentViewController:self.vpEditor animated:YES completion:nil];
}

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

Event notifications

A number of event messages are available to intercept as NSNotification objects. For details refer to:

VPKPublicEventConstants

The notification objects include a userInfo dictionary with a single VPKIdentifierKey entry. If a mediaIdentifier string is set on the VPKPreview's VPKImage, this will be returned as the value. The identifier may aid in ensuring that the correct media events are handled.

Reference

A complete class reference is avaialble here

Support

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, you might decide to replace a UIImageView with a VPKPreview. Your image is now interactive, and your team can manage the journey and gain analytical insight.

A VEEP is a metadata object defining the transition from an image or video in a social feed to an e-commerce experience or a URL.

The SDK can be downloaded from our Github repository

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

A little more about the SDK

VPKit is supplied as a pre-compiled dynamic framework ready for drag-and-drop use in your Swift or Objective-C iOS project. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating a VEEP image

The demo app includes a CREATE image to show how veep content is originated.

• Tapping the CREATE image launches the VPKVeepEditor view controller.
• The user may add veep tracks by tapping an area of interest in the image.
• Each track can be moved and reshaped by manipulating its bounding box.
• Each track can also be associated with a URL using the Google and Amazon search pages.
• After defining one or more veep tracks, the user can publish the veep.
• This will send the Veep metadata to Veepio’s hosting servers and return a VeepID for you to store in your app.

The VEEP metadata can in turn be consumed using a VPKPreview object as mentioned above.

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

Ensure the framework is included in “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

VPKit.framework is a univerrsal dynamic framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

create veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

Initialization in your App Delegate

Firstly, you’ll need to introduce your application to VEEPIO. The App Delegate is a good location for this. A triplet of unique strings identify your app to the Veepio SDK: appID, clientID and clientSecret. To obtain these identifiers, contact skd_support@veepio.com.

For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];*------/

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for development

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement for a UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with added VeepID property.
• It provides an animated VEEP icon to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.view.addSubview(self.preview)

VPKPreview delegates

VPKPreview has two optional delegates. If neither of these delegates is set, the VPKPreview object will handle presenting and dismissing the SDK view controllers. Only set these delegates if your host app requires more control.

id <VPKPreviewPassThroughDelegate> passThroughDelegate

Set the passThroughDelegate if your host app needs to handle tap gestures on the VPKPreview when the preview object has nothing to do (that is, when there is no associated veep content with the view).

There is one passThroughDelegate method. It will only be called if there is no veep content associated with a Preview object. It’s purpose is to forward the tapGestureRecognizer when taps are received.

//objective-C
-vpkPreview:(VPKPreview*)preview 
              passedThroughTap:(UITapGestureRecognizer*)tapGestureRecognizer

//swift
public func vpkPreview(_ preview: VPKPreview, 
              passedThroughTap tapGestureRecognizer: UITapGestureRecognizer)

id <VPKPreviewDelegate> delegate

When this delegate is set, the host app is responsible for the entire process of presenting and dismissing the VPKVeepViewer and (or) VPKVeepEditor View Controllers as described below. The host app only needs to implement VPKVeepViewer and VPKVeepEditor handling code if this delegate is set.

VPKVeepViewer

The VPKVeepViewer view Controller is initialized with a VPKImage and its associated VPKPreview. These methods are delegate callbacks from the VPKPreview on receiving a use touch event:

//swift
func vpkPreviewTouched(_ preview:VPKPreview, image:VPKImage){
	guard let viewer = VPKit.viewer(with: image, from: preview) else {return}
    viewer.delegate = self
    viewer.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
    preview.hideIcon()
    self.present(viewer, animated: true, completion: nil)
}

//objective-c
- (void)vpkPreviewTouched:(VPKPreview *)preview image:(VPKImage*)image {
    self.vpViewer = [VPKit viewerWithImage:image
                                  fromView:preview];
    self.vpViewer.delegate = self;
    self.vpViewer.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [preview hideIcon];
    [self presentViewController:self.vpViewer animated:YES completion:nil];
}

(NB: If you don’t set a delegate on VPKPreview, these methods can be omitted and similar behaviour is provided by default from the VPKPreview object itself)

Creating veep content

If you want to allow your users to VEEP their own user generated content from within your app, you can open the VEEP editor:

//swift
guard let vpEditor = VPKit.editor(with: image, from: self.imageButton) else {return}
vpEditor.useVeepLogo = false
vpEditor.delegate = self
vpEditor.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
self.present(vpEditor, animated: true, completion: nil)

//objective-C
self.vpEditor = [VPKit editorWithImage:self.imageButton.image
                              fromView:self.imageButton];
self.vpEditor.useVeepLogo = NO;
if (self.vpEditor) {
    self.vpEditor.delegate = self;
    self.vpEditor.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [self presentViewController:self.vpEditor animated:YES completion:nil];
}

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

Reference

VPKImage : UIImage

@property (nonnull, nonatomic, strong, readonly) NSString* veepId;

- (nonnull instancetype)initWithImage:(nonnull UIImage*)image
                               veepID:(nullable NSString*)veepId;
                               
- (nonnull instancetype)initWithImage:(nonnull UIImage*)image
                               url:(nullable NSURL*)imageURL;
                               
/*
If VPKImage is initialised with null veepId or imageURL it will behave as a standard UIImage
/*

VPKPreview : UIImage

VPKPublicVeep : NSObject

@property (nonnull, nonatomic, strong) NSString* veepID;
@property (nullable, nonatomic, strong) NSString* title;
@property (nullable, nonatomic, strong) NSString* descriptionString;
@property (nullable, nonatomic, strong) NSURL* originalContentURI;

VPKitClass methods

Initializing VPKit

+ (void)setApplicationId:(nonnull NSString*)appId
            clientId:(nullable NSString*)clientId
              clientSecret:(nullable NSString*)secret;

Consume Veep’d content

+ (nullable VPKVeepViewer*)viewerWithImage:(VPKImage*)image
                                  fromView:(UIView*)fromView

Create Veep’d content

+ (nullable VPKVeepEditor*)editorWithImage:(UIImage*)image
                                  fromView:(UIView*)fromView`

Fetch a VPKPublicVeep

+ (void) requestVeep:(NSString*)veepID
    completionBlock:^(VPKPublicVeep* _Nullable veep,
                      NSError* _Nullable error) completion;

Controlling appearance

VPKStyles

@property (nonatomic, assign) CGFloat lineWidth;
@property (nonatomic, assign) CGFloat margin;

VPKFontStyles

@property (nonatomic, strong) UIFont* barButtonItemFontDisabled;
@property (nonatomic, strong) UIFont* barButtonItemFontEnabled;
@property (nonatomic, strong) UIFont* barButtonItemFont;
@property (nonatomic, strong) UIFont* navBarFont;
@property (nonatomic, strong) UIFont* cellNavBarFont;
@property (nonatomic, strong) UIFont* cellLabelFont;
@property (nonatomic, strong) UIFont* cellTextViewFont;
@property (nonatomic, strong) UIFont* bigLabelFont;

VPKColorStyles

@property (nonatomic, strong) UIColor* navBar;
@property (nonatomic, strong) UIColor* navBarText;

@property (nonatomic, strong) UIColor* navBarLight;
@property (nonatomic, strong) UIColor* navBarDark;
@property (nonatomic, strong) UIColor* cellNavBar;
@property (nonatomic, strong) UIColor* cellMidGrey;

Support

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, you might decide to replace a UIImageView with a VPKPreview. Your image is now interactive, and your team can manage the journey and gain analytical insight.

A VEEP is a metadata object defining the transition from an image or video in a social feed to an e-commerce experience or a URL.

The SDK can be downloaded from our Github repository

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

A little more about the SDK

VPKit is supplied as a pre-compiled dynamic framework ready for drag-and-drop use in your Swift or Objective-C iOS project. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating a VEEP image

The demo app includes a CREATE image to show how veep content is originated.

• Tapping the CREATE image launches the VPKVeepEditor view controller.
• The user may add veep tracks by tapping an area of interest in the image.
• Each track can be moved and reshaped by manipulating its bounding box.
• Each track can also be associated with a URL using the Google and Amazon search pages.
• After defining one or more veep tracks, the user can publish the veep.
• This will send the Veep metadata to Veepio’s hosting servers and return a VeepID for you to store in your app.

The VEEP metadata can in turn be consumed using a VPKPreview object as mentioned above.

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

Ensure the framework is included in “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

VPKit.framework is a univerrsal dynamic framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

create veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

Initialization in your App Delegate

Firstly, you’ll need to introduce your application to VEEPIO. The App Delegate is a good location for this. A triplet of unique strings identify your app to the Veepio SDK: appID, clientID and clientSecret. To obtain these identifiers, contact skd_support@veepio.com.

For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];*------/

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for development

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement for a UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with added VeepID property.
• It provides an animated VEEP icon to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.preview.delegate = self
self.view.addSubview(self.preview)

VPKVeepViewer

The VPKVeepViewer view Controller is initialized with a VPKImage and its associated VPKPreview. These methods are delegate callbacks from the VPKPreview on receiving a use touch event:

//swift
func vpkPreviewTouched(_ preview:VPKPreview, image:VPKImage){
	guard let viewer = VPKit.viewer(with: image, from: preview) else {return}
    viewer.delegate = self
    viewer.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
    preview.hideIcon()
    self.present(viewer, animated: true, completion: nil)
}

//objective-c
- (void)vpkPreviewTouched:(VPKPreview *)preview image:(VPKImage*)image {
    self.vpViewer = [VPKit viewerWithImage:image
                                  fromView:preview];
    self.vpViewer.delegate = self;
    self.vpViewer.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [preview hideIcon];
    [self presentViewController:self.vpViewer animated:YES completion:nil];
}

(NB: If you don’t set a delegate on VPKPreview, these methods can be omitted and similar behaviour is provided by default from the VPKPreview object itself)

Creating veep content

If you want to allow your users to VEEP their own user generated content from within your app, you can open the VEEP editor:

//swift
guard let vpEditor = VPKit.editor(with: image, from: self.imageButton) else {return}
vpEditor.useVeepLogo = false
vpEditor.delegate = self
vpEditor.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
self.present(vpEditor, animated: true, completion: nil)

//objective-C
self.vpEditor = [VPKit editorWithImage:self.imageButton.image
                              fromView:self.imageButton];
self.vpEditor.useVeepLogo = NO;
if (self.vpEditor) {
    self.vpEditor.delegate = self;
    self.vpEditor.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [self presentViewController:self.vpEditor animated:YES completion:nil];
}

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

Reference

VPKImage : UIImage

@property (nonnull, nonatomic, strong, readonly) NSString* veepId;

- (nonnull instancetype)initWithImage:(nonnull UIImage*)image
                               veepID:(nullable NSString*)veepId;
                               
- (nonnull instancetype)initWithImage:(nonnull UIImage*)image
                               url:(nullable NSURL*)imageURL;
                               
/*
If VPKImage is initialised with null veepId or imageURL it will behave as a standard UIImage
/*

VPKPreview : UIImage

VPKPublicVeep : NSObject

@property (nonnull, nonatomic, strong) NSString* veepID;
@property (nullable, nonatomic, strong) NSString* title;
@property (nullable, nonatomic, strong) NSString* descriptionString;
@property (nullable, nonatomic, strong) NSURL* originalContentURI;

VPKitClass methods

Initializing VPKit

+ (void)setApplicationId:(nonnull NSString*)appId
            clientId:(nullable NSString*)clientId
              clientSecret:(nullable NSString*)secret;

Consume Veep’d content

+ (nullable VPKVeepViewer*)viewerWithImage:(VPKImage*)image
                                  fromView:(UIView*)fromView

Create Veep’d content

+ (nullable VPKVeepEditor*)editorWithImage:(UIImage*)image
                                  fromView:(UIView*)fromView`

Fetch a VPKPublicVeep

+ (void) requestVeep:(NSString*)veepID
    completionBlock:^(VPKPublicVeep* _Nullable veep,
                      NSError* _Nullable error) completion;

Controlling appearance

VPKStyles

@property (nonatomic, assign) CGFloat lineWidth;
@property (nonatomic, assign) CGFloat margin;

VPKFontStyles

@property (nonatomic, strong) UIFont* barButtonItemFontDisabled;
@property (nonatomic, strong) UIFont* barButtonItemFontEnabled;
@property (nonatomic, strong) UIFont* barButtonItemFont;
@property (nonatomic, strong) UIFont* navBarFont;
@property (nonatomic, strong) UIFont* cellNavBarFont;
@property (nonatomic, strong) UIFont* cellLabelFont;
@property (nonatomic, strong) UIFont* cellTextViewFont;
@property (nonatomic, strong) UIFont* bigLabelFont;

VPKColorStyles

@property (nonatomic, strong) UIColor* navBar;
@property (nonatomic, strong) UIColor* navBarText;

@property (nonatomic, strong) UIColor* navBarLight;
@property (nonatomic, strong) UIColor* navBarDark;
@property (nonatomic, strong) UIColor* cellNavBar;
@property (nonatomic, strong) UIColor* cellMidGrey;

Support

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, you might decide to replace a UIImageView with a VPKPreview. Your image is now interactive, and your team can manage the journey and gain analytical insight.

A VEEP is a metadata object defining the transition from an image or video in a social feed to an e-commerce experience or a URL.

The SDK can be downloaded from our Github repository

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

A little more about the SDK

VPKit is supplied as a pre-compiled dynamic framework ready for drag-and-drop use in your Swift or Objective-C iOS project. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating a VEEP image

The demo app includes a CREATE image to show how veep content is originated.

• Tapping the CREATE image launches the VPKVeepEditor view controller.
• The user may add veep tracks by tapping an area of interest in the image.
• Each track can be moved and reshaped by manipulating its bounding box.
• Each track can also be associated with a URL using the Google and Amazon search pages.
• After defining one or more veep tracks, the user can publish the veep.
• This will send the Veep metadata to Veepio’s hosting servers and return a VeepID for you to store in your app.

The VEEP metadata can in turn be consumed using a VPKPreview object as mentioned above.

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

Ensure the framework is included in “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

VPKit.framework is a univerrsal dynamic framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

create veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

Initialization in your App Delegate

Firstly, you’ll need to introduce your application to VEEPIO. The App Delegate is a good location for this. A triplet of unique strings identify your app to the Veepio SDK: appID, clientID and clientSecret. To obtain these identifiers, contact skd_support@veepio.com.

For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];*------/

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for development

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement for a UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with added VeepID property.
• It provides an animated VEEP icon to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.preview.delegate = self
self.view.addSubview(self.preview)

VPKVeepViewer

The VPKVeepViewer view Controller is initialized with a VPKImage and its associated VPKPreview. These methods are delegate callbacks from the VPKPreview on receiving a use touch event:

//swift
func vpkPreviewTouched(_ preview:VPKPreview, image:VPKImage){
	guard let viewer = VPKit.viewer(with: image, from: preview) else {return}
    viewer.delegate = self
    viewer.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
    preview.hideIcon()
    self.present(viewer, animated: true, completion: nil)
}

//objective-c
- (void)vpkPreviewTouched:(VPKPreview *)preview image:(VPKImage*)image {
    self.vpViewer = [VPKit viewerWithImage:image
                                  fromView:preview];
    self.vpViewer.delegate = self;
    self.vpViewer.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [preview hideIcon];
    [self presentViewController:self.vpViewer animated:YES completion:nil];
}

(NB: If you don’t set a delegate on VPKPreview, these methods can be omitted and similar behaviour is provided by default from the VPKPreview object itself)

Creating veep content

If you want to allow your users to VEEP their own user generated content from within your app, you can open the VEEP editor:

//swift
guard let vpEditor = VPKit.editor(with: image, from: self.imageButton) else {return}
vpEditor.useVeepLogo = false
vpEditor.delegate = self
vpEditor.modalPresentationStyle = UIModalPresentationStyle.overFullScreen
self.present(vpEditor, animated: true, completion: nil)

//objective-C
self.vpEditor = [VPKit editorWithImage:self.imageButton.image
                              fromView:self.imageButton];
self.vpEditor.useVeepLogo = NO;
if (self.vpEditor) {
    self.vpEditor.delegate = self;
    self.vpEditor.modalPresentationStyle = UIModalPresentationOverFullScreen;
    [self presentViewController:self.vpEditor animated:YES completion:nil];
}

Customization

All UI in VPKit is customizable to fit in with your app UI design.

The following example makes the navigation bar red:

//swift
VPKit.styles().color.navbar = UIColor.red()

//objective-c
VPKit.styles.color.navbar = [UIColor red]

Reference

VPKImage : UIImage

@property (nonnull, nonatomic, strong, readonly) NSString* veepId;

- (nonnull instancetype)initWithImage:(nonnull UIImage*)image
                               veepID:(nullable NSString*)veepId;
                               
- (nonnull instancetype)initWithImage:(nonnull UIImage*)image
                               url:(nullable NSURL*)imageURL;
                               
/*
If VPKImage is initialised with null veepId or imageURL it will behave as a standard UIImage
/*

VPKPreview : UIImage

VPKPublicVeep : NSObject

@property (nonnull, nonatomic, strong) NSString* veepID;
@property (nullable, nonatomic, strong) NSString* title;
@property (nullable, nonatomic, strong) NSString* descriptionString;
@property (nullable, nonatomic, strong) NSURL* originalContentURI;

VPKitClass methods

Initializing VPKit

+ (void)setApplicationId:(nonnull NSString*)appId
            clientId:(nullable NSString*)clientId
              clientSecret:(nullable NSString*)secret;

Consume Veep’d content

+ (nullable VPKVeepViewer*)viewerWithImage:(VPKImage*)image
                                  fromView:(UIView*)fromView

Create Veep’d content

+ (nullable VPKVeepEditor*)editorWithImage:(UIImage*)image
                                  fromView:(UIView*)fromView`

Fetch a VPKPublicVeep

+ (void) requestVeep:(NSString*)veepID
    completionBlock:^(VPKPublicVeep* _Nullable veep,
                      NSError* _Nullable error) completion;

Controlling appearance

VPKStyles

@property (nonatomic, assign) CGFloat lineWidth;
@property (nonatomic, assign) CGFloat margin;

VPKFontStyles

@property (nonatomic, strong) UIFont* barButtonItemFontDisabled;
@property (nonatomic, strong) UIFont* barButtonItemFontEnabled;
@property (nonatomic, strong) UIFont* barButtonItemFont;
@property (nonatomic, strong) UIFont* navBarFont;
@property (nonatomic, strong) UIFont* cellNavBarFont;
@property (nonatomic, strong) UIFont* cellLabelFont;
@property (nonatomic, strong) UIFont* cellTextViewFont;
@property (nonatomic, strong) UIFont* bigLabelFont;

VPKColorStyles

@property (nonatomic, strong) UIColor* navBar;
@property (nonatomic, strong) UIColor* navBarText;

@property (nonatomic, strong) UIColor* navBarLight;
@property (nonatomic, strong) UIColor* navBarDark;
@property (nonatomic, strong) UIColor* cellNavBar;
@property (nonatomic, strong) UIColor* cellMidGrey;

Support

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

VPKit is an iOS SDK for generating interactive media which provides a seamless transition from a social feed to an e-commerce experience.

To use VPKit, you might decide to replace a UIImageView with a VPKPreview. Your image is now interactive, and your team can manage the journey and gain analytical insight.

A VEEP is a metadata object defining the transition from an image or video in a social feed to an e-commerce experience or a URL.

The SDK can be downloaded from our Github repository

For installation help and more information: sdk_support@veepio.com or use the VPKitDemo issue tracker

A little more about the SDK

VPKit is supplied as a pre-compiled dynamic framework ready for drag-and-drop use in your Swift or Objective-C iOS project. A demo app is provided in each language showing how to incorporate and use the SDK.

Viewing a VEEP image

VEEPIO interactive media are identified by the Veep icon overlay in VPKPreview imageViews.

• Tapping the CONSUME image (a VPKPreview) launches the VPKVeepViewer view controller.
• Interactive areas of images are marked by veep track borders.
• Click on veep track to view linked web content below the media.
• Click the expand icon “ ^ “ to view the webview in full screen mode.
• Click “X” icon to exit full screen web view.
• Swipe the image to dismiss the VPKVeepViewer and return to your place in the hosting app.

Creating a VEEP image

The demo app includes a CREATE image to show how veep content is originated.

• Tapping the CREATE image launches the VPKVeepEditor view controller.
• The user may add veep tracks by tapping an area of interest in the image.
• Each track can be moved and reshaped by manipulating its bounding box.
• Each track can also be associated with a URL using the Google and Amazon search pages.
• After defining one or more veep tracks, the user can publish the veep.
• This will send the Veep metadata to Veepio’s hosting servers and return a VeepID for you to store in your app.

The VEEP metadata can in turn be consumed using a VPKPreview object as mentioned above.

Integrating the framework

Integrate manually or using cocoapods. In both cases, add App Transport Security settings to your info.plist file.

Manual integration

The pre-compiled binary with demo integrations is available on github

Drag and drop the VPKit.framework binary into your XCode project

Ensure the framework is included in “Embedded Binaries” and “Linked Frameworks and Libraries” in the general tab of your target settings.

VPKit.framework is a univerrsal dynamic framework and will run in the simulator and on the device. Due to an App Store submission bug, you must strip x86 (simulator) code before uploading to Apple. We provide two options to help with this exercise:

• Device-only binary
  The file VPKit_framework_iphoneos.zip is a device-only build of the framework. Replace the universal with this version before submitting to the app store.

• Build script
  VPKit.framework includes a script to strip non-valid binaries when building. Run it from a “Run Script” build phase, which should be positioned after the “Embed Frameworks” phase.
  bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/VPKit.framework/strip-frameworks.sh"

Cocoapods integration

Cocoapods manages builds of valid binaries for you so this is the preferred integration option.

Refer to https://cocoapods.org/#getstarted to get started with a Cocopods podfile.

Add this line to your podfile

pod 'VPKit'

Run pod install from the commandline

Info.plist settings

• Add the App Transport Security Settings key to your project’s info.plist, with sub-keys:
  • Allow Arbitrary Loads : YES
  • Allow Arbitrary Loads in Web Content : YES

NSAllowsArbitraryLoadsInWebContent is the correct key for iOS 10; NSAllowsArbitraryLoads is the fallback setting for iOS 9 and is ignored if the former key is available for iOS 10.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

This will ensure the correct app permissions are set in order for the web view to appear. Apple have indicated that setting these to ‘YES’ will require justification when submitting to the app store - although this restriction has not been implemented yet.

VPKit demo apps

Demo apps are hosted on Github with pre-compiled binary VPKit Framework github.com/veepionyc/VPKitDemo

You will find detailed usage and integration notes in the App Delegate and ViewController files:

view veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

create veeps

objective-c
AppDelegate.m
ViewController.m

swift
AppDelegate.swift
ViewController.swift

Usage

Initialization in your App Delegate

Firstly, you’ll need to introduce your application to VEEPIO. The App Delegate is a good location for this. A triplet of unique strings identify your app to the Veepio SDK: appID, clientID and clientSecret. To obtain these identifiers, contact skd_support@veepio.com.

For testing purposes you can use the identifiers for the Veepio test app:

//swift
let appID = "VEEPIO_test_app_id"
let clientID = "VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53"
let clientSecret = "OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF"
        
VPKit.setApplicationId(appID,
             clientId: clientID,
         clientSecret: clientSecret)

//objective-c

NSString* appID = @"VEEPIO_test_app_id";
NSString* clientID = @"VsRIkxIfTtkFJhw1ABItnO50B6fSW23NhIRnST53";
NSString* clientSecret = @"OdWbCaP9i1I2AV2yZUzwfDFE4gU04RDX1HdubnTEg8oWw8F9yWQwjX179zHRXLUad5vrsOo5B7UtFq2utsrWbkjVus5aJKxW8wXTvDknqdgeowunL9yeEN8selNpTOJF";
	    
[VPKit setApplicationId:appID
               clientId:clientID
           clientSecret:clientSecret];*------/

Other settings to consider at initialization:

Production status

//swift  
VPKit.setProduction(_:Bool)  

//objective-c
[VPKit setProduction:(BOOL)]  

Production ON - your live production database: use for publishing
Production OFF - your sandbox database: use for development

IDFA support - optional

(optional) send IDFA for Veep tracking

This requires host app linking to AdSupport.framework (“link binary with libarires” section of project Build Phases)

Setting this option to YES entails additional reporting requirements when submitting to the app store

//swift  
VPKit.sendIDFA(_:Bool)  

//objective-c
[VPKit sendIDFA:(BOOL)]  

UI styling - optional

This is also a good place to add any custom fonts and colours to the veep viewer. Examples in the demo apps:

//swift
VPKit.styles().margin = 12
VPKit.styles().color.navBar = UIColor.init(white: 0.1, alpha: 1.0)
VPKit.styles().font.navBarFont = UIFont .systemFont(ofSize: 18, weight: UIFontWeightHeavy);
VPKit.styles().font.cellNavBarFont = UIFont .systemFont(ofSize: 14, weight: UIFontWeightBold);

//objecive-C
[VPKit styles].margin = 12;
VPKit.styles.color.navBar = [UIColor colorWithWhite:0.1 alpha:1.0];
VPKit.styles.font.navBarFont = [UIFont systemFontOfSize:18 weight:UIFontWeightHeavy];
VPKit.styles.font.cellNavBarFont = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];

Viewing

VPKPreview

The easiest way to use the VEEPIO functionality is to use a VPKPreview in your UI.

• VPKPreview is a drop-in replacement for a UIImageView.
• It is initialized with a VPKImage - which is a UIImage subclass with added VeepID property.
• It provides an animated VEEP icon to indicate that an image is interactive.

//objective-C
self.vpkPreview = [[VPKPreview alloc] init];
[self.view addSubview:self.vpkPreview];
UIImage* image = [UIImage imageNamed:@"KrispyGlas"];
image = [[VPKImage alloc] initWithImage:image veepID:@"658"];
self.vpkPreview.image = image;

//swift
let preview = VPKPreview()
guard let image = UIImage.init(named: "KrispyGlas") else {return}
let previewImage: VPKImage = VPKImage(image: image, veepID:"658")
self.preview.image = previewImage;
self.preview.delegate = self
self.view.addSubview(self.preview)