Customize the Genuin video player

Set the size, tile layout, profile menu, onboarding prompts, and deep-link behaviour of Genuin carousels, standard walls, and full-screen feeds on every SDK.

Every Genuin view plays video in the same player. A carousel or grid plays it inline, and tapping a tile opens the full-screen view, where members react, comment, share, and follow link-outs. In the Android and iOS SDKs, a standard wall or a full-screen feed starts in that full-screen view.

You control the player in two places. Options you set in code apply to the one view you configure. Settings in Brand Control Center apply to every view of your brand on the platforms that read them.

This page covers Android SDK 2.1.5, iOS SDK 2.1.5, Web SDK 2.0.6, React Native 3.0.3, and Flutter 1.0.1. React Native 3.0.3 wraps the 2.1.5 native SDKs. Flutter 1.0.1 wraps the older native SDKs, Android 1.1.9.3 and iOS 1.1.9, so a few options behave differently there.

Where each setting lives

The rest of this page documents the code options, plus the onboarding settings, because those change what the SDK shows inside your app.

Options by platform

A dash means the platform has no such option.

On Android you pass the per-view options to GenuinEmbedView.setEmbedParams or FeedEmbedFragment.newInstance. On iOS they're properties of EmbedConfiguration, or PlacementConfiguration for placements. React Native takes them as component props and Flutter as widget parameters. The Web SDK reads its options from window.genuin.init and from container data attributes, as listed in Embed the Genuin Web SDK on your website.

Sizing and layout

Carousels and grids render inside a container you size. Standard walls and full-screen feeds fill their container, so give that container the whole screen.

Tile aspect ratio and scroll direction aren't code options in the 2.x SDKs. They come from the embed's layout in Brand Control Center.

Full setup code for each platform is in Integrate the Genuin Android SDK, Integrate the Genuin iOS SDK, Integrate the Genuin SDK with React Native apps, and Initialize the Genuin SDK and load a feed in Flutter.

Profile menu

isShowProfileEnabled (boolean, default false) puts the signed-in member's profile picture in the top-right corner of the full-screen view. Tapping the picture opens a menu where the member views their profile, opens account settings, or signs out of Genuin.

• Signed-in members only: Guests never see the picture. It appears once the member signs in, for example through the ssoToken you pass to the view.
• Full-screen view: The option applies to the full-screen view your view opens, including the one a carousel tile opens.
• Placements: On Android, setPlacementParams has no profile parameter. On iOS, PlacementConfiguration has isShowProfileEnabled.
• Web: The Web SDK has no profile menu.

Signing out from this menu ends the Genuin session only; your app's session continues. To keep the two in step, see Sign members out and handle expired sessions.

Navigation bar (iOS)

showNavigationBar (Bool, default false) adds a navigation bar with a back button above a full-screen feed or standard wall. It applies to views created with initializeEmbedFeed, initializeStandardWall, or getStandardWallController. No other SDK has an equivalent.

Deep-link behaviour

By default, every interaction in the full-screen view stays inside the SDK. A reaction is recorded, the comments sheet opens, and a community tap opens the community screen. Three options send the member out of the SDK instead.

These interactions redirect: reactions, comments, shares, reposts, the more-options menu, and creating a post. So do joining a community or group, link-outs and their buttons, and taps on a profile, mention, community, or group. Playback controls such as pause, mute, scrubbing, and captions stay in the SDK.

Android 2.1.5 handles interactionDeepLink in four steps:

1. If the value has no http:// or https:// prefix, the SDK adds https://.
2. It checks the result against a web-address pattern: a lowercase host, a top-level domain of 2 to 6 letters, and an optional path. A custom scheme such as myapp://, a port, or uppercase letters fail the check.
3. If the member is signed in, it appends token=<access token>.
4. It opens the URL with an ACTION_VIEW intent. If your app claims the domain with Android App Links, Android routes the URL to your app.

If the URL fails the check, the interaction has no effect. The SDK doesn't fall back to its own flow.

To receive these links in your app and pass them to the SDK, see Handle Genuin deep links in your app.

Examples

Each example opens a full-screen feed with the profile menu on and interactions sent to your app.

Android

import com.begenuin.core.ui.fragment.FeedEmbedFragment

val fragment = FeedEmbedFragment.newInstance(
  embedId = "{{EMBED_ID}}",
  uniqueId = "{{UNIQUE_ID}}",
  ssoToken = "{{SSO_TOKEN}}",                  // signs the member in, so the profile picture can show
  isShowProfileEnabled = true,
  isDirectDeepLinkWithLoginEnabled = true      // also turns on isDirectDeepLinkEnabled
)
supportFragmentManager.beginTransaction()
  .add(R.id.frameLayout, fragment)
  .commit()

For a carousel, pass the same values to GenuinEmbedView.setEmbedParams(embedId, uniqueId, interactionDeepLink, isDirectDeepLinkEnabled, isShowProfileEnabled, isDirectDeepLinkWithLoginEnabled).

iOS

import GenuinCore

let configuration = EmbedConfiguration()
configuration.isShowProfileEnabled = true
configuration.showNavigationBar = true
configuration.isDirectDeepLinkWithLoginEnabled = true   // also sets isDirectDeepLinkEnabled

GenuinSDK.shared.initializeEmbedFeed(
    embedId: "{{EMBED_ID}}",
    containerView: view,
    viewConroller: self,          // the API spells the label this way
    ssoToken: "{{SSO_TOKEN}}",
    embedConfiguration: configuration
)

React Native

import React from 'react';
import { Feed } from 'genuin-react-native';

export default function FeedScreen() {
  return (
    <Feed
      style={{ height: '100%', width: '100%' }}
      embedId="{{EMBED_ID}}"
      ssoToken="{{SSO_TOKEN}}"
      isShowProfileEnabled
      isDirectDeepLinkEnabled
    />
  );
}

Flutter

import 'package:flutter/material.dart';
import 'package:genuin_sdk/genuin_feed_embed_view.dart';

class FeedScreen extends StatelessWidget {
  const FeedScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Feed(
        embedId: '{{EMBED_ID}}',
        interactionDeepLink: 'https://www.example.com/join', // opened on any interaction
        isShowProfileEnabled: true,
      ),
    );
  }
}

Web

The Web SDK has no profile or redirect options. Its player options are the theme, gesture scrolling, and the video to open on load:

window.genuin.init({
  embed_id: "{{EMBED_ID}}",
  api_key: "<<YOUR_API_KEY>>",
  theme: "dark",                      // "light" by default
  allow_gesture_scroll: false,        // turns off swipe and drag between tiles
  start_video_slug: "{{VIDEO_SLUG}}", // opens this video in the expand view on load
});

Onboarding and sign-in prompts

Brand Control Center calls these guided onboarding controls. They're popups the SDK shows while a member swipes through videos, asking them to sign in, pick interests, choose a username, or complete their profile. No SDK parameter controls them. You turn each one on in Settings > Guided Onboarding Controls. The Mobile App tab applies to the Android and iOS SDKs, and the Web tab to the Web SDK.

The SDK shows the first popup that applies, in the order of the table, once the member reaches the swipe count. A member who has finished a step doesn't see its popup again. Gestures shows one-time hints for the swipe and tap gestures in the full-screen view.

The popups appear only in standard walls:

• Android and iOS: In a standard wall whose feed source is Brand Feed. On Android they also appear in the home feed that React Native's HomeFeed renders and the deprecated GenuinSDK.loadSDK opens. Carousels, grids, full-screen feed embeds, and community or group standard walls don't show them.
• Web: In standard wall embeds. Carousel, grid, feed, and expand-only embeds don't show them.

Hand the sign-in popup to your app

On Android and iOS, the sign-in popup uses the same path as a guest tapping an action that needs an account. If you registered a sign-in callback, the SDK calls it instead of opening Genuin's sign-in sheet:

• Android: GenuinSDK.registerInterface with GenuinInterface.onLogin(activity).
• iOS: GenuinSDK.shared.delegate with presentLoginViewController(baseViewController:).
• React Native: registerCallback(), which emits NavigateToScreen with Login.

Run your sign-in flow in the callback, then pass the token to ssoLogin. The setup is in Choose how members sign in to the Genuin SDK.

On the web, the sign-in popup never opens on its own in a standard wall. Sign-in starts when a visitor taps an action, and the embed sends them to window.genuinAuth, your auth_info.signInUrl, or your white-labelled community site.

Flutter 1.0.1 has no sign-in callback, and its native 1.1.9 SDKs have no registerInterface or GenuinDelegate, so Genuin's own sign-in sheet always opens there.

Earlier names

Options and views that were renamed or removed, and what to use now.

Troubleshooting

Limitations

• Two option sets: Android, iOS, React Native, and Flutter share one set of per-view options. The Web SDK has its own and supports neither the profile menu nor the redirect options.
• iOS has no interaction URL: interactionDeepLink exists on Android 2.1.5 and Flutter only. React Native forwards it on Android only.
• React Native on iOS forwards fewer props: interactionDeepLink and isDirectDeepLinkWithLoginEnabled don't reach the native view.
• Flutter runs the 1.1.9 natives: Flutter 1.0.1 has no tile layout options and no sign-in callback.
• Onboarding popups are standard-wall only: They never appear in carousels, grids, or full-screen feed embeds.
• Direct deep links need a white-labelled domain: The share URL opens your app only when your app claims that domain.
• Player Controls aren't instant: A change under Settings > Player Controls can take up to 15 minutes to reach views.

See also

• Handle Genuin deep links in your app
• Choose how members sign in to the Genuin SDK
• Integrate the Genuin Android SDK
• Integrate the Genuin iOS SDK
• Embed the Genuin Web SDK on your website
• Search in the Genuin SDK