diff --git a/templates/zerver/integrations/index.html b/templates/zerver/integrations/index.html
index ec489017b5..9469f3ff3e 100644
--- a/templates/zerver/integrations/index.html
+++ b/templates/zerver/integrations/index.html
@@ -107,7 +107,7 @@
                                   class="integration-lozenge integration-{{ integration.name }} legacy"{% else %}
                                   class="integration-lozenge integration-{{ integration.name }}"
                                   {% endif %}
-                                  data-categories="{{ integration.categories }}"
+                                  data-categories='{{ integration.get_translated_categories()|tojson }}'
                                   data-name="{{ integration.name }}">
                                     <img class="integration-logo" src="{{ integration.logo_url }}"
                                       alt="{{ integration.display_name }} logo"/>
diff --git a/web/src/portico/integrations.js b/web/src/portico/integrations.js
index 97a75885ba..62aea827bc 100644
--- a/web/src/portico/integrations.js
+++ b/web/src/portico/integrations.js
@@ -118,7 +118,9 @@ const update_integrations = _.debounce(() => {
             const display_name = INTEGRATIONS.get($integration.attr("data-name"));
             const display =
                 common.phrase_match(state.query, display_name) &&
-                ($integration.attr("data-categories").includes(CATEGORIES.get(state.category)) ||
+                (JSON.parse($integration.attr("data-categories")).includes(
+                    CATEGORIES.get(state.category),
+                ) ||
                     state.category === "all");
 
             if (display) {
@@ -140,11 +142,9 @@ function hide_catalog_show_integration() {
     ).clone(false);
     $lozenge_icon.removeClass("legacy");
 
-    const categories = $(`.integration-${CSS.escape(state.integration)}`)
-        .attr("data-categories")
-        .slice(1, -1)
-        .split(",")
-        .map((category) => category.trim().slice(1, -1));
+    const categories = JSON.parse(
+        $(`.integration-${CSS.escape(state.integration)}`).attr("data-categories"),
+    );
 
     function show_integration(doc) {
         $("#integration-instructions-group .name").text(INTEGRATIONS.get(state.integration));
diff --git a/zerver/lib/integrations.py b/zerver/lib/integrations.py
index 9f19190db8..ad490b84e5 100644
--- a/zerver/lib/integrations.py
+++ b/zerver/lib/integrations.py
@@ -139,6 +139,9 @@ class Integration:
 
         return None
 
+    def get_translated_categories(self) -> list[str]:
+        return [str(category) for category in self.categories]
+
 
 class BotIntegration(Integration):
     DEFAULT_LOGO_STATIC_PATH_PNG = "generated/bots/{name}/logo.png"