Added handling for TV remote control

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [2.5.5] 26th Feb 2026 
+- Added support for remote interaction for Web Popups, Native Display and Inbox on TV platforms. 
+
 ## [2.5.4] 19th Feb 2026 
 - Added Clevertap Custom Id Support in On User Login. 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clevertap-web-sdk",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "description": "",
   "main": "clevertap.js",
   "scripts": {

rollup.config.js

@@ -5,7 +5,7 @@ import { eslint } from 'rollup-plugin-eslint'
 import { terser } from 'rollup-plugin-terser'
 import { version } from './package.json'
 import sourcemaps from 'rollup-plugin-sourcemaps'
-import commonjs from '@rollup/plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs'
 
 /**
  * Returns the input file path

src/clevertap.js

@@ -39,6 +39,7 @@ import {
   QUALIFIED_CAMPAIGNS,
   BLOCK_REQUEST_COOKIE,
   ISOLATE_COOKIE,
+  ENABLE_TV_CONTROLS,
   WZRK_GEO
 } from './util/constants'
 import { EMBED_ERROR } from './util/messages'
@@ -57,6 +58,7 @@ import encryption from './modules/security/Encryption'
 import { checkCustomHtmlNativeDisplayPreview } from './util/campaignRender/nativeDisplay'
 import { checkWebPopupPreview } from './util/campaignRender/webPopup'
 import { reconstructNestedObject, validateCustomCleverTapID } from './util/helpers'
+import TVNavigation from './modules/tvNavigation'
 
 export default class CleverTap {
   #logger
@@ -73,6 +75,7 @@ export default class CleverTap {
   #dismissSpamControl
   enablePersonalization
   #pageChangeTimeoutId
+  #tvNavigation
   #enableFetchApi
   #enableEncryptionInTransit
   #domainSpecification
@@ -147,7 +150,6 @@ export default class CleverTap {
     // Custom Guid will be set here
 
     const result = validateCustomCleverTapID(clevertap?.config?.customId)
-
     if (!result.isValid && clevertap?.config?.customId) {
       this.#logger.error(result.error)
     }
@@ -175,6 +177,7 @@ export default class CleverTap {
       session: this.#session,
       isPersonalisationActive: this._isPersonalisationActive
     })
+    this.#tvNavigation = new TVNavigation(this.#logger)
     this.enablePersonalization = clevertap.enablePersonalization || false
     this.event = new EventHandler({
       logger: this.#logger,
@@ -227,6 +230,11 @@ export default class CleverTap {
     this.spa = clevertap.spa
     this.dismissSpamControl = clevertap.dismissSpamControl ?? true
 
+    if (clevertap.config?.enableTVControls) {
+      StorageManager.saveToLSorCookie(ENABLE_TV_CONTROLS, true)
+    } else {
+      StorageManager.saveToLSorCookie(ENABLE_TV_CONTROLS, false)
+    }
     this.user = new User({
       isPersonalisationActive: this._isPersonalisationActive
     })
@@ -738,7 +746,13 @@ export default class CleverTap {
     }
   }
 
-  init (accountId, region, targetDomain, token, config = { antiFlicker: {}, customId: null, isolateSubdomain: false, domainSpecification: null }) {
+  init (accountId, region, targetDomain, token, config = {
+    antiFlicker: {},
+    customId: null,
+    isolateSubdomain: false,
+    enableTVControls: false,
+    domainSpecification: null
+  }) {
     if (config?.domainSpecification) {
       this.domainSpecification = config.domainSpecification
       this.#session.domainSpecification = config.domainSpecification
@@ -765,6 +779,15 @@ export default class CleverTap {
       encryption.key = accountId
     }
 
+    const enableControls = StorageManager.readFromLSorCookie(ENABLE_TV_CONTROLS) ?? false
+    if ((config?.enableTVControls) || enableControls) {
+      // CleverTap handles navigation
+      StorageManager.saveToLSorCookie(ENABLE_TV_CONTROLS, true)
+      this.#logger.debug('CleverTap TV Navigation Mode: CleverTap will handle all navigation')
+      // Initialize CleverTap TV navigation system
+      this.#tvNavigation.init()
+    }
+
     StorageManager.removeCookie('WZRK_P', window.location.hostname)
     if (!this.#account.id) {
       if (!accountId) {