Kigo TOP SDK Component Placement Configuration

The Component Placement Context allows partners to define a custom rendering order for key features on specific pages within the Kigo TOP SDK. This system provides granular control over how homepage components are arranged—ensuring a more personalized and relevant user experience per program or hosted site.

Overview

Component placement is controlled via the componentPlacement key in the KigoContext. The SDK checks this configuration and dynamically arranges supported feature components based on the pageScope and layoutSortPlacement.

Example Configuration

componentPlacement: {
  enabled: true,
  sdkScope: 'kigo-top-sdk',
  pageConfigs: [
    {
      pageScope: 'homepage-with-location',
      componentPlacementOrder: [
        { featureName: 'national-deals', layoutSortPlacement: 1 },
        { featureName: 'banner-advertisements', layoutSortPlacement: 2 }
      ]
    }
  ]
}

In this example:

• The SDK scope is limited to kigo-top-sdk.
• For the homepage-with-location page, national-deals is rendered first, followed by banner-advertisements.

Context Type Definition

type KigoComponentPlacementContext = {
  enabled: boolean;
  sdkScope: string; // e.g. 'kigo-top-sdk'
  pageConfigs: Array<{
    pageScope: string; // e.g. 'homepage-with-location'
    componentPlacementOrder: Array<{
      featureName: string;
      layoutSortPlacement: number;
    }>;
  }>;
};

Supported featureName Options

Below is a list of current supported components that can be arranged using the component placement system:

How It Works

• The SDK reads the componentPlacement config on initialization.
• Each pageConfig targets a specific route/page by its pageScope.
• Components are rendered based on the layoutSortPlacement (ascending order).
• Unconfigured components fall back to default placement.

Best Practices

• Use unique layoutSortPlacement values per page to avoid sorting ambiguity.
• Define a clear sdkScope to avoid applying placement globally if unnecessary.
• Only include components relevant to your program’s needs and UI strategy.

Example Use Case

If a partner wants to ensure that banner ads are always shown at the top of the homepage, followed by national deals, the following config applies:

componentPlacement: {
  enabled: true,
  sdkScope: 'kigo-top-sdk',
  pageConfigs: [
    {
      pageScope: 'homepage-with-location',
      componentPlacementOrder: [
        { featureName: 'banner-advertisements', layoutSortPlacement: 1 },
        { featureName: 'national-deals', layoutSortPlacement: 2 }
      ]
    }
  ]
}

Summary

• Purpose: Enables precise ordering of homepage components per page type.
• Location: Defined in KigoContext > componentPlacement.
• Supported Features: Includes offers, maps, banners, trending sections, and more.
• Customization: Ideal for tailoring user experiences per partner/program.

The component placement system is essential for hosted site flexibility, ensuring your homepage UI meets both functional and branding goals across all Kigo TOP SDK deployments.