# Embed your social experience on your website
Create an embed in your Business Account, choose its feed and style, and paste the generated code into any web page to show those videos there.
An embed is a saved player configuration: which feed it shows, how it looks, and what visitors can do in it. You build it once under **Grow** > **On Site** and paste a few lines of code where you want it. The Genuin Web SDK renders the feed in that spot, inside your page.
Visitors watch vertical video, react to posts, follow member discussions, and discover products and brand stories without leaving your site. Changes you save later apply the next time the page loads, so you never paste the code again.
Embeds are part of Onsite. To see how they fit with placements and players, read [Onsite: what it does and where to start](https://begenuin.com/developers/browse-by-products/onsite/onsite-what-it-does-and-where-to-start). For a feed that changes with the page a visitor is on, use a placement instead. Learn more in [Build a placement with styles, sections, and variables](https://begenuin.com/developers/browse-by-products/onsite/how-a-brand-can-get-started-with-placements-in-business-account).
## Create an embed
You need at least one community or group with approved posts. An embed of an empty feed renders an empty player.
1. In your Business Account, go to **Grow** > **On Site** and click **Embed**.
*Step 1: The Embed tab, with the embed list on the left and analytics on the right.*
2. Click **+ New** to open the embed builder.
3. Enter a unique **Embed Name**, so you can tell embeds apart when you run several across pages or campaigns.
4. Choose the **Embed Type** to set which feed the embed shows. The feed types are compared in the next section.
*Step 4: The Embed Type sets which feed the embed shows.*
5. Choose the **Embed Style** to set the layout. The styles are compared after the feed types.
*Step 5: The Embed Style sets the layout.*
6. Set the options in the sections on the right. The preview updates as you change them. Each option is described under Set the embed options.
7. Select the **Expand View** tab to set the same kinds of options for the full-screen player that opens when a visitor taps a video. By default, the pop-up view is on.
8. Select **Mark as Active** to label the embed **Active** in the list, then click **Create**.
### Choose the feed
| Embed Type | What it shows | Works well for |
| --- | --- | --- |
| Brand Feed | Everything published across your brand, by the brand and its members | Homepage highlights, product discovery sections, and showcases of your social experience |
| Community Feed | Member-driven content from the communities you pick | User-generated content, discussions, and member engagement |
| Group Feed | Content from the groups you pick | Niche topics such as product discussions, brand ambassador groups, and customer support groups |
You can pick several communities for a Community Feed, or several groups for a Group Feed. Learn more about the brand-wide option in [Set up a brand feed as an Onsite embed](https://begenuin.com/developers/browse-by-products/onsite/what-is-the-brand-feed).
### Choose the style
| Embed Style | Layout | Best for |
| --- | --- | --- |
| Standard Wall | A grid of video tiles, like a content gallery, with optional navigation arrows | Galleries and visual content walls |
| Feed | A continuous vertical scroll, like a social feed, with a headline, sub headline, and button above it | Storytelling and product discovery sections |
| Carousel | A horizontal row of videos that visitors swipe or scroll through, with the same header elements as Feed | Featured products, campaign highlights, and mobile pages |
## Set the embed options
The builder groups options into sections. Title and Button apply to the Feed and Carousel styles; Standard Wall has neither.
### Title and button
- **Headline** and **Sub Headline**: contextual titles above the embed, up to 50 characters each, each with its own text color. By default, both are empty, with colors #212529 and #6C757D.
- **Add Button**: a call-to-action button that links to another page. Set **Button Text** (up to 24 characters), **Button URL**, the button color, and the text color. By default, the button is off.
### View settings
- **Embed Size**: the width and height in pixels, to fit your page layout. By default, it's 1080×800 px.
- **Show Header** and **Show Side Panel**: by default, both are on.
- **Show Header** displays the top navigation bar, and **Show Side Panel** displays the side menu.
- **Show Navigation**: navigation arrows on a Standard Wall.
- **Video Cell Aspect Ratio**: 1:1, 2:3, 3:2, 9:16, 16:9, 4:3, 3:4, 3:5, or 2:1. By default, it's 9:16.
- **Padding**: 8, 16, 24, or 32 px.
- **Adaptive Video Display**: resizes content to the container. By default, it's on.
- **Enable Expand view**: by default, it's off.
- **Enable Floating View**: keeps the player on screen after a visitor closes a post. By default, it's off.
### Engagement details
- **Enable Engagement Tools**: shows **Repost**, **Spark**, **Comment**, **Share**, and **Intelligence** on each video. By default, the tools are on.
- **Show Username**: the name of the video's creator. By default, it's off.
- **Show View Count**: by default, it's off.
- **Show Social Interaction Data**: social interaction metrics on each video. By default, it's on.
- **Show Join Community Button** and **Show Community Share Button**: by default, both are on.
- **Enable Redirection**: sends a tap to the **Community**, **Group**, or **User** page.
- Each engagement tool and each redirection destination has its own toggle.
To control the overlays and buttons on each video in more detail, see [Control what viewers see and can do on embedded videos](https://begenuin.com/developers/browse-by-products/onsite/how-can-brands-manage-overlay-components-and-controls-for-embedded-content).
### Links and media play
- **Show Links**: shows the links added to videos, with **Link Position** set to **Outside** the video or **Overlay**. By default, links are off and the position is Overlay.
- **Autoplay Video**: plays videos in the feed without a tap. By default, it's on.
- **Loop Video**: replays a video until another one starts. By default, it's off.
- **Carousel Style**: **Default** or **Focus View**, for the Carousel style. By default, it's set to Default.
- **Feed Display Preference**: **Default** or **Pinned Post First**. By default, it's set to Default.
## Add the code to your page
You need access to your page's HTML. Any site that lets you add HTML works, including WordPress, Shopify, and Wix custom code blocks.
1. In the embed builder, click **View Embed Code**. A panel opens with the generated code and a tab for each platform.
2. Select the **Web** tab and copy the code.
3. Paste the container and the two scripts into your page where the feed belongs, and the stylesheet link into the page head.
4. Set the container's width and height to the size you chose, or use `width: 100%` to fill the column.
5. Publish the page. The feed appears in that spot on the next load.
The **Web** tab gives you a complete page. On your own site, you need these three parts of it:
```html title="Embed code"
```
Copy the code from the panel rather than retyping it. It carries your embed ID, your API key, and the SDK version Genuin serves today. Use your production key on your live site and the test key on staging.
To place several embeds on one page, give each container the `gen-sdk-class` class with `data-embed-id` and `data-api-key` attributes, and call `window.genuin.init()` once. To pass page context, add `contextualParams` with `page_context`, `url`, and `geo` to the init call. Learn more in [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).
For every Web SDK option, see [Embed the Genuin Web SDK on your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-embed-and-configure-the-genuin-web-sdk-on-your-website). The parameters each SDK accepts are listed in the [embed configuration reference](https://begenuin.com/developers/get-started/any-business/embed-configuration-reference).
## Embeds on mobile
Embeds adapt to mobile screens. The Carousel style, for example, becomes a horizontal row that visitors swipe through on a smartphone, which suits mobile-first websites.
The **iOS**, **Android**, **React Native**, **Flutter**, and **Angular** tabs in the code panel give the equivalent call for each SDK. To show the same embed in an app, see [Integrate the Genuin Android SDK](https://begenuin.com/developers/developer-resources/sdk/how-to-integrate-and-power-your-brand-community-in-android-apps) or [Integrate the Genuin iOS SDK](https://begenuin.com/developers/developer-resources/sdk/developer/genuin-sdk/native-compatibility/ios/how-to-integrate-and-power-your-brand-community-in-ios-apps).
## Measure embed performance
The **Embed** tab lists every embed with its type and style. Search by name, or download the list as a CSV with the download icon.
Select **Global Analytics** for all embeds, or a single card for one embed. Pick a date range and click **Apply**. By default, the range is the last week.
**Embed Analytics** reports these metrics:
| Metric | What it counts |
| --- | --- |
| Unique users | Visitors who interacted with the embed |
| Embed Impressions | Times the embed was displayed |
| Video impressions | Times videos were displayed |
| Video watch duration | Total time visitors spent watching videos |
| Video completion rate | Percentage of viewers who watched a video to the end |
**QR Analytics** reports scans of the embed's QR code. **Definition of Metrics** on the panel explains each figure. Filters let you narrow any report to a segment of the data.
## Edit or delete an embed
1. In the embed list, open the card's **...** menu.
*Step 1: The card's menu lets you edit the embed, copy its ID, or delete it.*
2. Click **Edit Embed** to change the style, settings, headlines, buttons, or size. Pages pick up the change the next time they load.
3. Click **Copy Embed ID** to copy the embed's ID, the `embed_id` value in the code.
4. Click **Delete Embed** to remove an embed you no longer need.
Deleting an embed removes it from the list, and it stops rendering on your website. The code stays in your page and renders nothing, so remove it from the page too.
## Limitations
- **One feed type and one style per embed.** Create a second embed for a second layout.
- **50 characters** for the headline and the sub headline, and **24** for the button text.
- **Edits are live.** Saving changes what every page using the embed shows at its next load. A saved embed has no draft or preview URL.
- **No undo for delete.** The embed and its analytics are gone, and the pasted code stops rendering.
- **The SDK version is pinned in the code.** Copy the code again to move to a newer SDK.
## See also
- [How Genuin embeds work](https://begenuin.com/developers/browse-by-products/onsite/how-can-you-embed-your-brand-community-on-your-website-using-genuin-embeds)
- [Generate an embed code in your Business Account](https://begenuin.com/developers/browse-by-products/onsite/how-do-brands-generate-embed-codes-from-business-account)
- [Control what viewers see and can do on embedded videos](https://begenuin.com/developers/browse-by-products/onsite/how-can-brands-manage-overlay-components-and-controls-for-embedded-content)
- [Embed the Genuin Web SDK on your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-embed-and-configure-the-genuin-web-sdk-on-your-website)
- [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)