GluedIn | AI enabled short video SDK

Introduction

The GluedIn SDK simplifies the process of incorporating the Shorts in-app community platform seamlessly into your application. It offers a prebuilt UI SDK that comes equipped with comprehensive built-in business logic, providing developers with extensive customization options for the UI's appearance and functionality. With minimal effort, developers can even control the placement of buttons and achieve a tailor-made user experience.

On this page, we provide a concise guide on integrating a high-quality, low-latency short video community platform into your app while retaining full control over its customizable UI features.

Integration Steps to launch GluedInSDK

Step 1: Console setup and get Keys:

Follow onboarding steps on console
Create your project in the dashboard and get the API Key and Secret key.

Follow the steps on console and copy and use the API and secret key into your application.

A. Integrating with React

1. Set up a React project: Create a React project using create-react-app:

npx create-react-app my-app
cd my-app

2. Install the GluedIn SDK: Add the GluedIn SDK to your project:

npm install gluedin-shorts-js

3. Import and initialize the SDK in your application: Open src/App.js (or your main component file) and include the following code:

import React, { useEffect } from 'react';
import gluedin from 'gluedin-shorts-js';

function App() {
  useEffect(() => {
    const gluedinSDKInit = new gluedin.GluedInSDKInitilize();
    gluedinSDKInit.initialize({
      apiKey: 'GeneratedAPIKey',    // Replace with your actual API key
      secretKey: 'GeneratedSecretKey' // Replace with your actual secret key
    });
    console.log('GluedIn SDK initialized successfully');
  }, []);

  return (
    <div className="App">
      <h1>Welcome to GluedIn Integration</h1>
    </div>
  );
}

export default App;

B. Integrating with HTML5 and JavaScript

1. Add the SDK via a CDN: Include the CDN link in the <head> or before the closing </body> tag in your HTML file:

<script type="module" src="https://cdn.example.gluedin-shorts-js.js"></script>

2. Initialize the SDK: Add the following initialization script to your HTML file:

<script>
  function initializeSDK() {
    const GluedInSDKObject = window.GluedIn;
    const GluedInSDKInitilizeObj = new GluedInSDKObject.GluedInSDKInitilize();

    GluedInSDKInitilizeObj.initialize({
      apiKey: 'GeneratedAPIKey',    // Replace with your actual API key
      secretKey: 'GeneratedSecretKey' // Replace with your actual secret key
    });
    console.log('GluedIn SDK initialized successfully');
  }

  // Run the function to initialize the SDK
  initializeSDK();
</script>

Note: Make sure to replace placeholder values (GeneratedAPIKey, GeneratedSecretKey) with the actual details provided by your SDK provider.

The GluedIn SDK supports two types of feed formats for content integration in your application:

1. Vertical Type Feed

1. Card Type Feed

Follow the detailed instructions below to enable these feed types.

Vertical Type Feed

To integrate a Vertical Type Feed, navigate to the VerticalPlayer component:

src/components/VerticalPlayer

Add the following code snippet to display videos in a vertical scrolling format:

<div
ref={verticalPlayerRef}
id="vertical-player"
className="player_wrapper"
>
{videos.map((video: any, index: number) => (
<VideoItem
    ref={videoRefs.current[index]}
    video={video}
    key={video.id}
    setVideos={setVideos}
    setCurrentVideoIndex={setCurrentVideoIndex}
    allVideoRefs={videoRefs}
/>
))}
</div>

Explanation:

verticalPlayerRef:A reference to the main container for the vertical player.rd and get the API Key and Secret key.
videos:The array of video data used to render each video item.
VideoItem Component:
- video: Data for each video.
- setVideos: Function to update the video array state.
- setCurrentVideoIndex: Function to set the index of the currently active video.
- allVideoRefs: Collection of references to all video elements for better control.

This structure enables users to scroll through videos in a vertically formatted feed.

Card Type Feed

For the Card Type Feed, integration, navigate to the Feed component:

src/components/Feed

Use the following code snippet to integrate card-style content display:

return (
  <>
    {data.map((contentInfo: any) => (
      
    ))}
  
);

Explanation:

data:The array containing content information used to display each feed item.
FeedTopic Component:
- contentInfo: Contains detailed information for each feed item.
- videoLikedByUser: Function or state indicating if the video has been liked by the user.

This structure enables card-type formatting for showcasing content in a layout that supports a more modular and grid-like view.

Callbacks method

The activityTimelineModule in GluedIn SDK provides a set of methods to handle user interactions with content, such as liking, unliking, viewing, adding, and deleting comments. Below are detailed code snippets and explanations for implementing these callback methods.

Initializing the Activity Timeline Module

Start by importing the gluedin library and creating an instance of GluedInActivityTimeline:

import gluedin from "gluedin-shorts-js";
const activityTimelineModule = new gluedin.GluedInActivityTimeline();

1. Liking a Video

To handle the "like" action, use the activityTimelineLike method:

activityTimelineModule.activityTimelineLike({ assetId: videoId })
  .then((res) => {
    console.log(res);
    // Your code for post-like handling
  })
  .catch((err) => {
    console.log(err);
    // Your error handling code
});

Explanation:

assetId:The unique ID of the video to be liked.

2. Unliking a Video

To handle the "unlike" action on a video, use the activityTimelineUnLike method:

activityTimelineModule.activityTimelineUnLike({ assetId: videoId })
  .then((res) => {
    console.log(res);
    // Your code for post-unlike handling
  })
  .catch((err) => {
    console.log(err);
    // Your error handling code
});

Explanation:

assetId:The unique ID of the video to be unlike.

3. Viewing a Video

To track when a video is viewed, use the activityTimelineView method:

activityTimelineModule.activityTimelineUnLike({ assetId: videoId })
  .then((res) => {
    console.log(res);
    // Your code for post-unlike handling
  })
  .catch((err) => {
    console.log(err);
    // Your error handling code
});

Explanation:

assetId:The unique ID of the viewed video.

4. Adding a Comment

To add a comment to a video, use the activityTimelineAddComment method:

activityTimelineModule.activityTimelineAddComment({
  assetId: video.videoId,
  description: comment,
  postId: "",
})
  .then((res) => {
    console.log(res);
    // Your code for post-comment handling
  })
  .catch((err) => {
    console.log(err);
    // Your error handling code
});

Explanation:

assetId:The unique ID of the video.
description:The text content of the comment.
postId:Optional parameter; if left empty, a new comment is added.

5. Deleting a Comment

To delete a comment from a video, use the activityTimelineDeleteComment method:

activityTimelineModule.activityTimelineDeleteComment({
  assetId: video.videoId,
  ...(id ? { postId: id } : { commentRefId: refId }),
})
  .then((res) => {
    console.log(res);
    // Your code for post-delete handling
  })
  .catch((err) => {
    console.log(err);
    // Your error handling code
});

Explanation:

assetId:The unique ID of the video.
postId:ID of the post to delete (optional).
commentRefId:Reference ID for the comment if postId is not provided.

Summary:

activityTimelineUnLike:Handles unliking of a video.
activityTimelineLike:Handles liking of a video.
activityTimelineView:Tracks video views.
activityTimelineAddComment:Adds a comment to a video.
activityTimelineDeleteComment:Deletes a comment from a video.

These methods provide a robust set of callbacks to manage user interactions with video content within the GluedIn SDK.

Step 4: Run the app:

After all these settings run the app and app should look like the below image based on UGC or PGC use case:

selected title