Experience Management
      Back to home
      1. Creatable Support
      2. Guide for Developers
      3. Experience Management

      PDP Implementation for Mobile Apps

      Adding Creatable to your native mobile application is easy using our Content API in accordance with the guidance provided below.

      Content API: Videos, Photos & Products

      Using our Content API, you can create a custom, robust experience inside your mobile app. The API provides access to all data about videos, photos and products.

      The following Content API query will retrieve all the parameters needed in order to create the experiences outlined in this article. Links to the complete Content API documentation can be found below.

      {
        content {
          items {
            content_id
            title
            description
            reference_id
            modified_date
            creation_date
            products {
              reference_id
              title
              link
              image
              price
            }
            asset {
              asset_type
              photo {
                sources {
                  height
                  width
                  url
                }
              }
              video {
                sources {
                  hls
                  dash
                  mp4 {
                    height
                    width
                    url
                  }
                }
                thumbnails {
                  height
                  width
                  url
                }
                cc {
                  label
                  lang
                  url
                  default
                }
                transcript
              }
            }
          }
        }
      }

       

      Documentation:

      Components of a Mobile App PDP Experience

      Carousel

      The carousel concept allows a user to browse multiple pieces of content in a seamless experience. Carousels typically swipe 1 item at a time, one “page” of items or a smooth endless scrolling experience with or without snap-to functionality. The grid concept allows a user to browse content arranged in a grid fashion, on mobile devices this is typically 3 items wide, by X rows long and may or may not provide a “load more” or paging structure.

      Implementation:

      1. Make an initial API call to the Content API to fetch data. Since this is a carousel, you’ll want to fetch an initial set of data and then implement paging logic to get additional content based on the user’s needs.
      2. Iterate over the data result data into a set of carousel cards. Typically a carousel contains a thumbnail image or live video playback, URLs to those values can be found in the API response:
        item.asset.video.thumbnails[x].url
        item.asset.video.sources.hls
      3. Tapping a carousel item opens the video in a fullscreen takeover for the best viewing experience.

      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 Thumbnail

      The video thumbnail lets you display one or more previews of video content before the user has chosen which one they want to watch. This is typically grouped as a list or carousel but could also be displayed as a grid.

      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 thumbnail.
      2. The API returns an array of differently sized video thumbnails, allowing you to choose the appropriately sized image for the UI you are building
      3. Thumbnail array format: item.asset.video.thumbnails[x].url
      4. The images are provided in JPG format.

      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 & Metadata

      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.

      Product CTA / Add to bag

      This element is crucial to getting shoppers farther down the funnel. When a user has decided they want one or more products, an “add to cart/bag” button or direct CTA to the product page alongside the products featured in a video gives the user a frictionless path to purchase.

      Implementation:

      1. Using product information from the implementation of a product images/metadata, you can extend this functionality to call “add to cart/bag” elements already present in your mobile app.
      2. When a user taps on a product, you can immediately display a “Quick shop” or “Add to bag” type display that is already present in your mobile app, giving the user the ability to select a quantity and/or variant of an item they want to purchase.
      3. This functionality leverages capabilities likely already available in your mobile app to create a seamless shopping experience for the user watching video.

      Mobile app analytics & conversion tracking

      Please read this article in order to implement tracking in your mobile app.

      If you have further questions about how to integrate Creatable with your mobile app, please feel free to reach out to support@creatable.io and our team will be happy to assist you.