Home > widget-integration > RecommendationWidgetController > connect
RecommendationWidgetController.connect() method
Initializes the recommendation widget and sets up viewport observation for lazy loading.
This is the main entry point for widget initialization. It loads the widget template, sets up an IntersectionObserver to detect when the widget enters the viewport, and triggers rendering only when visible for optimal performance.
Signature:
connect(props: RecommendationWidgetControllerProps, parent: HTMLElement): Promise<void>;
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
props |
Configuration properties for the widget | |
|
parent |
HTMLElement |
The parent HTML element where the widget will be rendered |
Returns:
Promise<void>
Exceptions
{Error} When template loading fails or parent element is invalid
Remarks
The widget uses lazy loading strategy - it won't fetch data or render until the parent element is visible in the viewport. This improves initial page load performance.
Example
Basic usage:
const controller = container.resolve(RecommendationWidgetController);
const widgetElement = document.querySelector('#recommendation-widget');
await controller.connect({ widgetId: 'homepage-recommendations' }, widgetElement);