Implement inline campaigns (Jetpack Compose)

Follow the instructions to implement Contextual Commerce inline campaigns in your Android application using Jetpack Compose. 

Step 1: Add the composable to the layout

1. Open the Composable where you want the inline view to appear. 
2. Locate the specific position within the UI (such as inside a LazyColumn) where you want the campaign to appear.
3. Insert the GranifyInlineComposable class into the layout:

LazyColumn {
    items(cartItems.intValue) { index ->
        val product = Cart.items.keys.elementAt(index)
        val quantity = Cart.items.values.elementAt(index)
        key(product.sku) {
          GranifyInlineComposable(
                GranifyInlineViewLabel(
                    "aboveCartItem",
                    product.productId,
                    product.sku
                )
            )
        }
        Card(product, quantity, context, { removeItem(product) })
    }
}

     4. Repeat this for every position on the page where an inline campaign is desired.

Step 2: Initialize the label

1. Initialize the GranifyInlineViewLabel parameter within the Composable.
2. Assign a name string to the label, for example:

GranifyInlineViewLabel(name = "aboveProductPhoto", ...)

      3. Ensure this name is unique for that specific page location.

Note: If an Activity is reused for several pages, the label only needs to be unique within the page itself.

Step 3: Configure product details

Product pages: 

1. Set the productId field. This is required for any inline campaign located on a Product Page. 
2. Set the sku field (optional). Use this if the location is specific to a variant . For example "Green Pants" .

Note: The productId is required if sku is used. However, a productId can be specified without a sku.

Multiple label example:

Column {
  GranifyInlineComposable(
    GranifyInlineViewLabel(
      "aboveProductPhoto",
      product.productId,
      product.sku
    )
  )
  ProductPhoto(...)
  GranifyInlineComposable(
    GranifyInlineViewLabel(
      "belowProductPhoto",
      product.productId,
      product.sku
    )
  )
  AddToCartButton(...)
  GranifyInlineComposable(
    GranifyInlineViewLabel(
      "belowAddToCartButton",
      product.productId,
      product.sku
    )
  )
}

Cart pages:

1.  Set the productId for any inline tied to a specific item. Include the sku if the product has multiple variants. 
2.  Use only the name field for areas not tied to a specific product (for example, top of the page). 

Step 4: Finalize integration

1. Compile a list of all GranifyInlineComposable locations you have added to the application.
2. Send this list to your Contextual Commerce account manager to create the campaigns.

Caution: Do not change these label names after this point without notifying your Contextual Commerce account manager, as doing so will break live campaigns.