Creator Flip Feed Implementation for Mobile Apps

There are two ways to implement a creator flip feed for mobile apps:

• Using a webview and accessing a customized web page via a URL provided by Creatable
• Natively deploying the applicable components provided by the Creatable Content API, following the guidelines below

Implementing with a webview

When implementing with a webview (WKWebView for iOS, WebView for Android), you are linking to an existing web url that serves the creator flip feed experience. This can greatly speed up delivery to production and provides a comparable experience to a native implementation.

Part of this implementation, because it uses a webview, ensures the Creatable analytics unique user identifier is passed from the mobile app context into the webview in order to track engagements and later relate those to purchases in the mobile app. Read more about analytics state management in the Mobile app analytics and conversion tracking article.

Creatable will provision the URL for the webview to load. Be sure to disable media playback upon transition to another screen by the user. For example, if the user taps on the product, stop playback and load the product details screen. Upon the user navigating back to the experience, re-enable playback. This keeps the media from continuing to play in the background.

Implementing natively

When implementing natively, you are able to build a precise experience tailored to your brand. Below is a summary of the UI components that make up the creator flip feed.

Filtering pills

Filtering pills allow the user to choose a filtered set of content to view. Tapping on a filter queries the Content API using a search_tag filter option, returning only content that has been tagged with that filter. The user can clear/reset that filter by tapping on the “All videos” filter which resets the query and reloads the content.

Implementation:

1. Filtering involves making a Content API query with a specific search_tag as a filter option.
2. To get a list of available search tags, query the Content API for Search Tags
3. Once data has been returned, render the content feed with the new set of content.
4. We recommend a spinner or loading state or skeleton to give the user feedback on their action.

Creator metadata

Displaying the picture, name and/or handle of the creator of the content is a great way to communicate the authentic nature of the video. You can display creator metadata as part of your native experience. We provide the creator’s picture, name, social handles and tier (as assigned in the platform).

Implementation:

1. Using data from the Content API you can display this creator metadata as an overlay on the video player, or create a tap to view for the user to see more details.
2. The following creator metadata values are provided:
   1. First name: item.creator.first_name
   2. Last name: item.creator.last_name
   3. Thumbnail image: item.creator.thumbnail
   4. Tier: item.creator.tier_name
   5. Socials
      1. Instagram handle: item.creator.social.instagram.handle
      2. Instagram URL: item.creator.social.instagram.url
      3. TikTok handle: item.creator.social.tiktok.handle
      4. TikTok URL: item.creator.social.tiktok.url
      5. YouTube handle: item.creator.social.youtube.handle
      6. YouTube URL: item.creator.social.youtube.url

Video player

The video player is a core component of a mobile app experience. The video player allows a user to consume video content and engage more deeply with your app experience. Typical features include play/pause, mute/unmute, closed captions and auto-next. Video playback often happens in a full-screen takeover mode that allows the user to close or swipe away when they are done watching.

Implementation:

1. You can either use data from a previous API call or make a fresh API call to fetch data for a particular asset in order to display a video player.
2. Utilize a native video player component and select the appropriate media from the data object for playback:
   1. iOS HLS: item.asset.video.sources.hls
   2. Android DASH: item.asset.video.sources.dash
   3. Generic MP4: item.asset.video.sources.mp4[x].url
3. Note: For MP4 playback, an array of assets are provided at various resolutions. Choose the best resolution for the UI you are building.

Video metadata

A video title and/or description provides even more context to the viewer of the content, giving them more insight into the video, the creator and the authentic nature of shoppable creator content.

Implementation:

1. You can either use data from a previous API call or make a fresh API call to fetch data for a particular asset in order to display video metadata.
2. The following pieces of metadata are available for use in the UI:
   1. Video title: item.title
   2. Video description: item.description
   3. Transcript: item.asset.video.transcript
   4. Closed captions (if spoken audio is in video): item.asset.video.cc[x].url

Product image / link

The product image is typically used as an overlay element during video playback. Multiple product images and product metadata can be displayed at the same time giving the user multiple shopping touchpoints while watching the video. A product title and/or price information can be displayed when a user wants to learn a little more about one or more products that are featured in a video.

Implementation:

1. You can either use data from a previous API call or make a fresh API call to fetch data for a particular asset in order to display a product image and/or metadata.
2. The following data keys are useful when displaying a product:
   1. ID: item.product[x].reference_id
   2. Title: item.product[x].title
   3. Link: item.product[x].link
   4. Image: item.product[x].image
   5. Price: item.product[x].price
3. Products are often displayed in their own carousel, often overlaid on top of a video so that a viewer can watch and interact with them. You can also have the user “tap to view products” and then display UI elements for them to navigate one or more products that are matched to a video.