Kigo TOP SDK Component Placement Configuration

The homepage of the Kigo TOP SDK is built from an ordered list of components (hero banners, offer carousels, category grids, maps, and more). By default, this layout is configured for your program by Kigo and loaded from the Kigo API. Contact your Kigo account manager to change your program's default layout.

To override or extend that layout from the client, use the uiuxOverride['page-configurations'] key in the KigoContext.

📘

Replaces componentPlacement

The previous componentPlacement context key (with sdkScope, pageConfigs, featureName, and layoutSortPlacement) has been removed and is ignored by the SDK. Use uiuxOverride['page-configurations'] instead.

Overview

The homepage has two variants, each configured separately:

For each page scope you can either leave the configured layout as-is (null), fully replace it, or inject components into it.

Example Configuration

window.Kigo.setContext({
  uiuxOverride: {
    'page-configurations': {
      'homepage-with-location': {
        mode: 'inject_at_index',
        components: [
          {
            title: 'Trending Merchants',
            component_code_type: 'component_trending_merchants',
            sorting_order: 1
          }
        ]
      },
      'homepage-no-location': null
    }
  }
});

In this example:

• On the homepage-with-location page, a Trending Merchants section is placed first and the configured components follow in their existing order.
• The homepage-no-location page keeps its configured layout.

Context Type Definition

type PageConfigurationsContext = {
  'homepage-with-location': PageConfigurationContext;
  'homepage-no-location': PageConfigurationContext;
};

type PageConfigurationContext = {
  mode: 'fully_override' | 'inject_at_index';
  components: Array<{
    title: string;                 // section title
    show_title?: boolean;          // default true
    component_code_type: string;   // see the table below
    sorting_order: number;         // 1-based position
    page_component_configuration_id?: string;
    generic_category_grid?: object;            // required for generic_category_grid
    generic_offer_carousel_metadata?: object;  // required for offer carousels
  }>;
} | null;

Modes

In inject_at_index mode, the hero components (component_hero_advertisement_carousel, component_premium_hero, component_standard_hero) can appear only once: if you inject one, the configured component of the same type is removed. Other types, such as generic_offer_carousel, can appear more than once.

Supported component_code_type Values

Offer carousels and category grids require a metadata payload (such as the saved offer query behind a carousel). Contact your Kigo account manager for the values to use for your program.

Best Practices

• Prefer the program layout configured by Kigo, and use context overrides only for client-specific changes.
• Use unique sorting_order values per page to avoid sorting ambiguity.
• Set a page scope to null to keep its configured layout.

Summary

• Purpose: Overrides or extends the homepage component layout per page variant.
• Location: Defined in KigoContext > uiuxOverride > 'page-configurations'.
• Modes: fully_override replaces the layout; inject_at_index inserts components at specific positions.
• Default: Without an override, the SDK renders the layout configured for your program.