Documentation

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]