# Build a placement with styles, sections, and variables

Set up a reusable placement in your Business Account, from styles, sections, and personalization to layout, feed type, implementation, and variables for generative sections.

A placement is a configurable container that defines what content appears, how it's structured, and where it shows across your website or mobile app. Instead of creating an embed for each page or context, you create one placement in your Business Account and reuse it anywhere by referencing its Placement ID. One placement can serve your homepage, product listing pages (PLPs), search pages, and apps.

A placement controls four things:

- **Layout**: grid, carousel, feed, or dynamic.
- **Content structure**: styles and sections.
- **Personalization rules**: context, journey, category, and behavior.
- **Engagement features**: reactions, comments, and redirection.

Placements are part of Onsite, which grows your O&O with video. For the product as a whole, see [How Onsite works](https://begenuin.com/developers/browse-by-products/onsite/onsite-what-it-does-and-where-to-start).

## Open placements

1. In your Business Account, go to **Grow** > **On Site** > **Placement**.
   ![The Placements list on the Placement tab in your Business Account, with the + button highlighted and a placement's menu open on Edit Style, Edit Configuration, Duplicate Placement, Copy Placement ID, and Delete Placement.](https://cdn.sanity.io/images/lnrtvsvr/development/acd239e603ec2e00cf0db96a1f172b58349f86c7-940x464.jpg)
   *Step 1: The Placements list, with each placement's quick actions and analytics.*

The list shows your placements, most recent first, with each one's status: active or inactive. Each placement's quick actions let you edit it, duplicate it, copy its Placement ID, view its analytics, and delete it. Placement analytics mirror embed analytics.

## Define a style

A style defines how content is grouped, titled, and personalized within a placement. A placement can have more than one style, and you can switch between styles at implementation time.

1. Click **+** to create a placement. The placement opens on its style.
2. Enter a **Title** for the style. The title is required.
3. (Optional) Select **Add Subtitle** to show a subtitle.

To add another style to the placement, click **+ Add Style**.

### Add sections

Sections group videos logically, such as Featured, Trending, and How-To. Sections are optional: a placement also works without them. You can add up to 10 sections to a style.

1. Click **+ Add Section**.
2. Enter a **Section Title**. The title is required.
3. (Optional) Enter a **Meta Description** for the section.
4. Drag the sections to reorder them.
   ![The Style step of a placement in your Business Account, with the + Add Style button and a style's Title, Add Subtitle switch, and a section titled BMW with its Meta Description highlighted.](https://cdn.sanity.io/images/lnrtvsvr/development/0b24d2966dda251e4fc508fbad92b1684b1a32a5-1600x777.jpg)
   *Step 4: A style with its title, subtitle switch, and first section.*

### Personalize the style

Use the **Style Personalization** panel on the right to refine which videos the style shows.

1. Open **Map to Consumer Journey** and select the stages the placement serves. Journeys help you maximize visibility, sales, and Customer Lifetime Value (CLV), and they feed analytics and reporting:
   - Pre-Purchase: research and consideration.
   - Post-Purchase: engagement right after a sale.
   - Discovery: introducing the brand.
   - Loyalty: retention and advocacy.
     ![The Map to Consumer Journey dropdown open in Style Personalization, showing Pre-Purchase on PDP plus four more, with At Purchase Checkout, Post-Purchase Thank You, Re-Engagement & Loyalty, and Discovery ticked.](https://cdn.sanity.io/images/lnrtvsvr/development/64960bc25f4c108a1834d95c47be14ffa0d54e96-1600x776.jpg)
     *Step 1: Map the style to the consumer journey stages it serves.*
2. Under **Tie to Categories**, select the categories, topics, and keywords the style draws from. Learn more about [brand categories and topics](https://begenuin.com/developers/get-started/business-account/how-do-i-set-up-brand-categories-and-topics).
   ![Tie to Categories in Style Personalization: the category Taxation and Compliance with 8 topics and a + Add Topic button, and a topic named new gst expanded to show the keywords gst and newgst.](https://cdn.sanity.io/images/lnrtvsvr/development/dedc08ca529871553c13e88bfd59003a49db7caf-1600x779.jpg)
   *Step 2: Tie the style to categories, topics, and keywords.*
3. Under **Restrict Video Content to**, select the restrictions to apply:
   - **Pinned Videos** shows only pinned videos.
   - **Same Page URL Linkout** shows only videos whose link-out is the same page.
   - **Same Brand Videos** shows only videos from the same brand.
   - **Videos from Recommendation Engine** uses videos from the recommendation engine.
     ![The Restrict Video Content to section in Style Personalization with Pinned Videos, Same Page URL Linkout, Same Brand Videos, and Videos from Recommendation Engine all ticked.](https://cdn.sanity.io/images/lnrtvsvr/development/8f9e2dd5f603163f8c90ce63981722c2854c25b4-1600x777.jpg)
     *Step 3: Restrict which videos the style can show.*
4. Under **Content Mapping**, select the mapping rules:
   - **Map Unique Videos to Sections in Style** shows each video in only its one best-matched section.
   - **Map Unique Linkout Videos Only** stops duplicate product or link-out videos.
     ![The Content Mapping section with Map Unique Videos to Sections in Style and Map Unique Linkout Videos Only ticked, above a second style named New Style with zero sections and its own ID.](https://cdn.sanity.io/images/lnrtvsvr/development/ebfe925c90699b06c8ff04249e48d54c0a950b82-1600x778.jpg)
     *Step 4: Content mapping keeps videos and link-outs from repeating across sections.*
5. Click **Next** to save the styles and move to the placement configuration.

## Configure the placement

1. Enter a **Placement Name**. The name is required and identifies the placement.
2. Choose a **Placement layout**. The layout sets how the placement displays to shoppers, which shapes their experience and your merchandising:
   - **Grid**: a uniform matrix of rows and columns. Best for broad categories, visual hierarchy, and quick comparison.
   - **Carousel**: a horizontal scrolling component for a limited set of items. Best for trending items, new arrivals, or promotions in a constrained space.
   - **Feed**: a continuously scrolling vertical list of content and product items. Best for an immersive, discovery-focused shopping experience with rich content blocks and a deep catalog.
- The **Feed** layout adds one setting, **Feed Scrolling Behavior**. **Free Scroll** lets viewers scroll freely through cards. **Single Video Swipe** moves one card at a time with a swipe up or down.
- **Dynamic**: you can also choose this layout. As the **Placement layout** tooltip in your Business Account says, the layout renders based on the content available.
  ![The Configuration step of a placement in your Business Account, with Placement Name highlighted and the Placement layout dropdown open on Carousel, Feed, and Grid, while Dynamic and Standard Wall are greyed out.](https://cdn.sanity.io/images/lnrtvsvr/development/ed9a47330d1819e1f21f9e05fa3f18093651fc79-1600x782.jpg)
  *Step 2: Name the placement and choose its layout.*
3. Choose a **Feed Type**. The feed type decides where content comes from and who sees it, so it's the foundational decision for the whole placement:
   - **Brand Feed** targets your brand's primary feed. Use it for high-impact visibility, major announcements, and direct communication to followers.
   - **Community Feed** targets broader communities or interest groups. Use it to expand reach, drive consideration, and join topical discussions.
   - **Group Feed** targets closed, specialized groups. Use it for targeted, contextually relevant messages to dedicated segments, such as collecting feedback or exclusive offers.
     ![The Feed Type dropdown open on the Configuration step with the options Brand Feed, Community Feed, and Group Feed, next to the Placement Name field.](https://cdn.sanity.io/images/lnrtvsvr/development/ec30f7a87a0b0ad59b96d8e2bc8f8e389ca11522-1600x791.jpg)
     *Step 3: Choose the feed the placement draws from.*
4. Choose an **Environment**: **Global**, or **Custom** with **Web** or **App**.
   ![The Environment dropdown open with Global and Custom, and Custom selected with the choice of Web or App.](https://cdn.sanity.io/images/lnrtvsvr/development/a2d410265fb36cded20eb3b7e0be793dae77e63b-1600x785.jpg)
   *Step 4: Set where the placement runs.*
5. Select **Mark as Active** to make the placement visible right away.

For more on the brand feed, see [Set up a Brand Feed as an onsite embed](https://begenuin.com/developers/browse-by-products/onsite/what-is-the-brand-feed).

### Set the view

On the **Configure View** tab, set how the placement looks:

1. Select **Show Style Details** to show the style's headline and subheadline.
2. Choose the **Style Title Color**.
3. Set the **Placement Size**, or select **Auto Fit Height**.
4. Set the **Grid layout** rows and columns, up to 3×3.
5. Select **Adaptive Video Display** to let videos adjust to the screen size. Turn it off to keep a fixed 9:16 aspect ratio. By default, it's on.
6. Under **Customize Section Layout**, choose the components shown at the top, at the bottom, and outside the bottom of each section.
7. Under **Media Play**, select **Autoplay Video** to play videos automatically.
8. Set **Auto-Advance Playback**, the delay before the next video plays. By default, it's 3 seconds.
9. Select **Loop Video** to replay the first video until another video plays.
   ![The Configure View tab with Show Style Details on, Style Title Color 000000, and Placement Settings showing a Placement Size of 300 by 600, Auto Fit Height, and a 3 by 3 Grid layout.](https://cdn.sanity.io/images/lnrtvsvr/development/536cc69a69e91346e23bcc2bddcb97d649054caa-1600x796.jpg)
   *Step 4: Style title, placement size, and grid layout.*

In **Grid layout**, only one of **Row** or **Column** can be set to **Auto** at a time.

For the player options a placement can carry, see [Player Controls and Feed Settings](https://begenuin.com/developers/browse-by-products/control/player-controls-and-feed-settings).

### Preview the placement

A live preview shows the placement in desktop and mobile frames, so you can validate layout and styling. Use it to:

- Switch between styles.
- Check section layouts.
- Validate grid, feed, or carousel behavior.

The preview doesn't affect the live configuration; it's only for validation.

![The placement preview with the desktop and mobile buttons highlighted, and on the right Adaptive Video Display and Autoplay Video switched on, with Customize Section Layout between them.](https://cdn.sanity.io/images/lnrtvsvr/development/9a1bbf72f363b79f0c67b642e2813134fa96e80d-1600x796.jpg)
*Preview the placement on desktop and mobile.*

![The preview's Style dropdown open on With Section and Without Section, with Without Section selected above a grid of video thumbnails.](https://cdn.sanity.io/images/lnrtvsvr/development/877cbdbd50f1e0a0f971b282040dbcf2dfe19c67-1600x785.jpg)
*Switch between styles in the preview.*

### Set the expanded view

The **Expand View** tab controls what viewers can do when a video opens full screen.

1. Under **Engagement Details**, select **Show Engagement Icons** to show **Repost**, **Reaction**, **Comment**, **Share**, and **Intelligence**.
2. Select **Enable Redirection** to let viewers go to community, group, or user pages.
3. Select **Enable Report** to let viewers report content as Inappropriate Content, Non-Professional Content, Spam, Threatening/Violent, or Other.
4. Under **Links**, select **Show Linkouts** to show the links you added to your videos.
   ![The Expand View tab with Show Engagement Icons and Enable Redirection switched on and their options ticked, Enable Report greyed out with five reasons ticked, and Show Linkouts under Links.](https://cdn.sanity.io/images/lnrtvsvr/development/d3902cbed9849ee3463aa2d2a6ffd8cd4bda6465-1600x804.jpg)
   *Step 4: Engagement, redirection, report, and link-out options for the expanded view.*

Each engagement icon has its own toggle, so you can show some icons and hide others.

Reports go to your moderation queue. Learn more about [moderation baselines and the queue](https://begenuin.com/developers/browse-by-products/control/moderation-baselines-and-queue). To manage the link-outs themselves, see [Manage and block video linkouts](https://begenuin.com/developers/browse-by-products/control/how-to-mentrally-manage-and-control-all-video-linkouts-in-brand-ecosystem).

## Implement the placement

The **Implementation Guide** tab gives your developers what they need to add the placement:

- The Placement ID, which every implementation requires.
- Ready-to-use code snippets.
- Feed Personalization Parameters.

Pass the Feed Personalization Parameters as part of the placement configuration. They refine the feed with real-time context, such as:

- `style_id`, which shows feed content relevant to the style ID you pass.
- Location, such as `geo`.
- Context or place.
- Time.
- User segment.
- Product details.
  ![The Implementation Guide tab of a placement with Style ID ticked, showing its objective, the parameter name style_id, and an example ID, and below it Location with the parameter name geo.](https://cdn.sanity.io/images/lnrtvsvr/development/1ac62afcc5461a3d6c881d1f6896cea22cffa312-1600x793.jpg)
  *Each parameter shows its objective, parameter name, and an example.*

For the code, see [Add a Genuin placement to your digital properties](https://begenuin.com/developers/developer-resources/sdk/how-do-you-configure-the-genuin-web-sdk-placement-on-your-website). For every parameter and its format, see [Deliver contextual feeds with page, user, and location context](https://begenuin.com/developers/developer-resources/sdk/contextual-embeds-how-they-work-and-how-to-configure-them).

The generated code is HTML. You can paste it into any website editor to show the placement on your site.

## Make a placement generative with variables

Variables make styles and sections generative: you reuse the same placement while its content updates from values passed at implementation time. Use them for podcasts, episodic content, shows, campaigns, or categories that change.

A variable is a placeholder inside a style or section, and its value arrives at implementation. Each variable has two names:

- The label brand users see in your Business Account, such as **Podcast Name**, which says what the variable represents.
- The macro developers pass, such as `@podcast_name` or `{{podcast_name}}`, which keeps the technical mapping consistent.

### Add a variable to a style

1. Go to **Grow** > **On Site** > **Placement** and click **+** to create a placement.
2. In the style's **Title** field, type `@` to open the variable list. The list shows default variables, which Genuin provides, and custom variables you created before.
   ![A style whose Title field holds the variable @podcast_name, with an Add Subtitle switch, an Add Section link, and Save and close buttons.](https://cdn.sanity.io/images/lnrtvsvr/development/26b238d272d8f9458a291abf5b74e84fa00ddecd-1600x780.jpg)
   *Step 2: A style title set to a variable.*
3. If the variable doesn't exist, type its name, such as `@podcast_name`.
4. Press Enter to create it.
   ![The Create Variable dialog with a Variable Name field holding Podcast at 7 of 25 characters, and Cancel and Submit buttons.](https://cdn.sanity.io/images/lnrtvsvr/development/fc96c2b1b288d72ae151b8a74dda18a99ec44a8d-1600x786.jpg)
   *Step 4: Create a custom variable.*

Variable names take up to 25 characters. Underscores are allowed; spaces aren't. Once added, a variable is available across styles and sections. It appears as **Podcast Name** in your Business Account and as `@podcast_name` on the **Implementation Guide** tab.

### Add a generative section

1. Click **+ Add Section**.
2. Enter a **Section Title** that uses a variable, such as `@podcast_name`.
3. (Optional) Enter a **Section Subtitle**. It can use variables.
4. Enter a **Meta Description** to improve contextual understanding and content generation.
5. Add a **Thumbnail**: upload a static thumbnail, or add a generative thumbnail that uses variables.
   ![A generative style named @Podcast with its Sub Title and Section Title both set to the variable @Description and a Meta Description reading Daily podcast.](https://cdn.sanity.io/images/lnrtvsvr/development/d935831b938efa71887082766211b54f569478b6-1600x777.jpg)
   *Step 5: A generative section built from variables.*

When any section in a style uses a variable, that style allows only one section, and the section becomes a generative section. Business Account stops you from adding more sections to it.

Business Account calls a style with variables a dynamic style, and a style without them a static style. If you use a variable in a style that already has more than one section, Business Account shows an error when you save.

### Add a section cover (Optional)

1. Open the section's menu and choose **Add Section Cover**.
2. Choose **Upload Cover** for a static cover, or **Add Generative Cover** to build the cover from variables.
   ![A generative section titled @place with its menu open on Add Section Cover, Add Thumbnail, and Delete Section, and the cover submenu offering Upload Cover and Add Generative Cover.](https://cdn.sanity.io/images/lnrtvsvr/development/78406a4262b35a996e570dfadbae37e52d4fe587-1600x776.jpg)
   *Step 2: Upload a static cover or build a generative one.*

In a style without sections, the existing section selection dropdown stays unchanged.

### Preview and map the variables

1. Switch between the **Web** and **App** environments. The preview updates automatically with the default variable values.
2. Open the **Implementation Guide** tab. It lists every variable used in the style and its sections, with each variable's name and usage count.

A generative placement shows a preview of one section only. Developers pass each variable's value by its macro name:

```json title="Variable mapping"
{
"podcast_name": "The Growth Show"
}
```

Here, **Podcast Name** is what the brand sees in your Business Account, and `@podcast_name` or `{{podcast_name}}` is what developers pass at implementation. The business-friendly label stays separate from the technical integration.

### What viewers see

The expanded view follows the same rules you set in the view settings.

![An annotated mock-up of a generative placement titled Your Morning Brief, labeling the style title, thumbnail, section title and subtitle, video duration, post date, post description, section video count, and social interaction counts.](https://cdn.sanity.io/images/lnrtvsvr/development/5360b16d12766791d8606b80629b2027cd1af541-1109x780.jpg)
*How a generative placement's parts appear to viewers.*

## Limitations

- **9:16 videos when Adaptive Video Display is off.** With it on, which is the default, videos adjust to the screen size.
- **10 sections per style.** Sections are optional.
- **3×3 grid.** The grid layout goes up to three rows and three columns.
- **One layout isn't available.** **Standard Wall** appears in the layout list but isn't enabled.
- **One generative style and one generative section per placement.** Dynamic sections use variables such as `@location` and `@brand_id`.
- **No mixed text.** A field can't mix static text and variables.
- **25-character variable names.** Underscores are allowed; spaces aren't.

## See also

- [Create a placement and map it to the shopper journey](https://begenuin.com/developers/browse-by-products/onsite/how-can-contextual-feed-placements-transform-the-consumer-journey-across-your-website-or-app)
- [Add a Genuin placement to your digital properties](https://begenuin.com/developers/developer-resources/sdk/how-do-you-configure-the-genuin-web-sdk-placement-on-your-website)
- [How Contextual Continuity embeds work](https://begenuin.com/developers/browse-by-products/onsite/what-are-contextual-continuity-embeds)
- [How Generative Contextual Continuity embeds work](https://begenuin.com/developers/browse-by-products/onsite/what-are-generative-contextual-continuity-embeds)
- [Onsite: contextual placements across homepage, category, and product pages](https://begenuin.com/developers/get-started/any-business/onsite-contextual-placements-across-homepage-category-and-product-pages)