Introduction
GluedIn provides a set of pre-built widgets that can be seamlessly integrated into new or existing applications with minimal coding. These widgets require almost no development experience and are simple to use. Below is an overview of the available widgets and the steps to integrate them into your application:
Available Widgets
- Profile (Top Profiles): Displays a curated list of user profiles.
- Videos (Fresh Arrival Videos): Shows the latest video content.
- Hashtags: Presents trending hashtags.
Pre-Requisites
Ensure that you have followed the pre-requisites outlined in the Getting Started section of the GluedIn documentation before proceeding with the integration.
Steps to Integrate Widgets
1. Fetching Data for the Widgets
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const curatedContentModuleResponse = await curatedContentModule.getRailById("");
if (curatedContentModuleResponse.status === 200) {
setData(curatedContentModuleResponse.data.result || []);
}
} catch (error) {
console.error("Error fetching rail data:", error);
}
}
fetchData();
}, []);
Explanation:
-
getRailById(""):Fetches data for the specified rail by ID.
-
setData:Updates the state with the fetched data to render the widget.
2. Rendering the Widgets
a. Rendering the Profile Rail Component
return (
<>
{data && }
);
b. Rendering the Video Rail Component
return (
<>
{data && }
);
c. Rendering the Hashtag Rail Component
return (
<>
{data && }
);
Explanation:
-
<UserRail>, <VideoRail>, and <HashtagRail> are the GluedIn widgets for rendering profiles, videos, and hashtags respectively.
-
The data prop provides the fetched data to the widget.
-
key={data.id}: Ensures React correctly identifies each component instance for optimal rendering.
