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. 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.
Create an embed
You need at least one community or group with approved posts. An embed of an empty feed renders an empty player.
- In your Business Account, go to Grow > On Site and click Embed.
- Click + New to open the embed builder.
- Enter a unique Embed Name, so you can tell embeds apart when you run several across pages or campaigns.
- Choose the Embed Type to set which feed the embed shows. The feed types are compared in the next section.
- Choose the Embed Style to set the layout. The styles are compared after the feed types.
- 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.
- 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.
- 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.
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.
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.
- In the embed builder, click View Embed Code. A panel opens with the generated code and a tab for each platform.
- Select the Web tab and copy the code.
- Paste the container and the two scripts into your page where the feed belongs, and the stylesheet link into the page head.
- Set the container's width and height to the size you chose, or use
width: 100%to fill the column. - 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:
<div id="gen-sdk" class="gen-sdk-class" style="width: 1080px; height: 800px"></div>
<script src="https://media.begenuin.com/sdk/<<SDK_VERSION>>/gen_sdk.min.js"></script>
<script>
window.genuin.init({
embed_id: '{{EMBED_ID}}',
api_key: '<<YOUR_API_KEY>>',
})
</script>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.
For every Web SDK option, see Embed the Genuin Web SDK on your website. The parameters each SDK accepts are listed in the 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 or Integrate the Genuin iOS SDK.
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
- In the embed list, open the card's ... menu.
- Click Edit Embed to change the style, settings, headlines, buttons, or size. Pages pick up the change the next time they load.
- Click Copy Embed ID to copy the embed's ID, the
embed_idvalue in the code. - 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.
