> ## Documentation Index > Fetch the complete documentation index at: https://docs.sequenzy.com/llms.txt > Use this file to discover all available pages before exploring further. # In-App Placements > Show in-app content inline, in slots of your own app or website A placement is a named slot in your app or website, such as a home screen hero or a checkout upsell, that shows Sequenzy content inside your own layout instead of over it. You define the slot once, target it from in-app sequence steps, and drop a placement view into your screen. When a contact has nothing to show there, the view takes no space, so your layout looks the same as without it. ## How it works 1. **Define a placement** in **Settings > In-app > Placements**, or with the [API](https://docs.sequenzy.com/api-reference/in-app/create-placement.md), CLI or MCP. The key (`home_hero`) is what your app's code uses and never changes. Optional size hints tell whoever writes the content how much room the slot has; the editor previews at that width. 2. **Add an in-app step** to a sequence and choose the **Placement** format. Pick the placement and a layout, write the content (eyebrow, title, message, image, up to two buttons and app data) and set a priority. If the slot does not exist yet, choose **New placement...** in the placement list to create it without leaving the step. 3. **Each contact who reaches the step** gets the item in their in-app inbox. It stays until they dismiss it or it expires (placement items never expire unless the step sets an expiry). 4. **Your app asks for the placement** through the SDK view, which shows the contact's open item with the highest priority. Ties go to the newest item. A placement view asks for up to 10 placements in one request, refreshes after `identify`, `reset` and when the app comes back to the foreground, and reports `displayed` once per item per app session, `clicked` when a link button is used and `dismissed` for a dismiss button. After a dismissal the next item for that slot, if any, takes its place. Mobile views report `displayed` when the item is added to the screen's view tree, even below the fold of a scrolling screen; the web element waits until half of it is visible. ## Priority Every placement item has a priority: **High**, **Medium** (the default) or **Low**. When a contact has several open items for the same placement, from different sequences or repeated runs of one, the highest priority shows; ties go to the newest. Use High for time-limited offers and Low for evergreen content that fills the slot when nothing else applies. ## Layouts Every placement item is drawn with one of three layouts, in the step's colors, corners and font: | Layout | Looks like | Good for | | - | - | - | | **Card** (default) | An optional 2:1 image on top, then eyebrow, title, a message of up to four lines and up to two text buttons. | Announcements and tips that sit between your own content. | | **Banner** | A compact row: a square image thumbnail on the left, then eyebrow, title and a message of up to two lines, with a filled first button below. | Slim upsells and reminders in lists, settings or checkout. | | **Hero** | The image fills the slot with the eyebrow, title, message and a filled first button on top of it, over a dark gradient. Without an image it uses the background color. | Home screen heroes and seasonal offers. | The first button is the main action. Card draws it as a text link in the accent color; Banner and Hero draw it as a filled button in the button colors and corners from **Design**. The second button is always a text link. A light accent that would be hard to read is replaced by the muted text color, and on a Hero image a light button turns white, the same rules the in-app messages follow. Placement items have no unread dot, pin or close control. Add a **dismiss** button if contacts should be able to close the content. The view takes the full width your layout gives it and is as tall as its content (a Hero is at least half as tall as it is wide). To draw the content with your own components, read the item yourself (see each platform below) and report events with the SDK's report helpers. ## Add a placement view Every SDK needs the setup from [Mobile SDKs](https://docs.sequenzy.com/concepts/mobile-sdks.md) (publishable key, identify with an identity token). > [tab] SwiftUI and UIKit > > ```swift theme={null} > // SwiftUI > VStack { > SequenzyPlacement("home_hero") > RecentOrders() > } > > // UIKit: collapses inside a stack view while empty > let hero = SequenzyPlacementView(placementId: "home_hero") > stackView.addArrangedSubview(hero) > ``` > > Read items yourself with `SequenzyPlacements.shared.observe("home_hero") { item in ... }` and report with `logDisplayed(_:)`, `dismiss(_:)` and `Sequenzy.handleButtonTap(_:in:)`. > [tab] Android > > ```kotlin theme={null} > // Views (or in XML) > container.addView(SequenzyPlacementView(context, "home_hero")) > > // Jetpack Compose > AndroidView( > modifier = Modifier.fillMaxWidth(), > factory = { SequenzyPlacementView(it, "home_hero") }, > ) > ``` > > The view is `GONE` while empty. Read items yourself with `SequenzyPlacements.observe("home_hero") { item -> }`. > [tab] React Native and Expo > > ```tsx theme={null} > import { SequenzyPlacement, usePlacement } from "@sequenzy/react-native"; > > > > // Or draw it yourself > const { item, logDisplayed, dismiss } = usePlacement("home_hero"); > ``` > > Works in Expo Go; no native module is needed. > [tab] Flutter > > ```dart theme={null} > Column(children: [ > const SequenzyPlacement(placementId: 'home_hero'), > const RecentOrders(), > ]) > ``` > > Pass `builder` to draw the item yourself. > [tab] Web > > Add `data-sequenzy-placements` to the install snippet, then place the element where the content belongs: > > ```html theme={null} > > > > ``` > > The element is `hidden` while empty and reports `displayed` once at least half of it is on screen. With the npm package, call `createPlacements` and `definePlacementElement`, or `subscribe` to draw content with your own components. SDK versions that predate placements never receive placement items, because only the placements endpoint serves them. ## From your backend A server-rendered app can fetch placement content with an API key through [Get Placement Content](https://docs.sequenzy.com/api-reference/in-app/placement-content.md), draw it, and report events with [Record In-App Event](https://docs.sequenzy.com/api-reference/in-app/record-event.md). ## Stats **Settings > In-app > Placements** lists each placement with **Live** (contacts with open content), **Shown** and **Clicked** (contacts who saw or clicked their item) and the click rate. Each in-app step shows its own created, displayed, clicked and dismissed counts on the sequence canvas. The API returns the same numbers from [List Placements](https://docs.sequenzy.com/api-reference/in-app/list-placements.md) and [Get In-App Step Stats](https://docs.sequenzy.com/api-reference/in-app/step-stats.md). ## Deleting a placement Deleting a placement collapses its slots on the next refresh. In-app steps that target it skip contacts (the activity shows `placement_not_found`) until a placement with the same key exists again; the step editor flags the missing placement. Items already created stay in contact history, and never show again: a placement created later with the same key only shows items created after it. ## Limits | Limit | Value | | - | - | | Placements per workspace | 50 | | Placement keys per request | 10 | | Key | 1-64 lowercase letters, numbers, dots, dashes, underscores | | Priority | High, Medium (default) or Low | Placement content uses the native layout; custom HTML is available for in-app messages (see [Custom HTML Messages](https://docs.sequenzy.com/concepts/in-app-html-messages.md)). This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.