From b52fb7e9755f13b563cfa9e56a1b034615042805 Mon Sep 17 00:00:00 2001 From: "Ketan (CometChat)" Date: Sat, 22 Aug 2026 21:16:12 +0530 Subject: [PATCH 1/3] feat(docs): add "Create a support ticket" to the page feedback toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mintlify's page feedback toolbar only offers "Suggest edits" and "Raise issue", both hard-wired to the GitHub repo. Readers without a GitHub account (or unwilling to fork the repo to propose a one-line change) have no way to report a docs problem. Add a third option that links to the Help Center request form. The toolbar is not configurable — docs.json has no feedback settings and the built-in toggles live in the Mintlify dashboard — so the link is injected client-side, following the existing assets/*.js pattern. It inherits the sibling buttons' classes so styling and dark mode stay in sync, and re-injects on client-side navigation. Co-Authored-By: Claude Opus 5 --- assets/feedback-support-ticket.js | 95 +++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 assets/feedback-support-ticket.js diff --git a/assets/feedback-support-ticket.js b/assets/feedback-support-ticket.js new file mode 100644 index 000000000..1d81c40f5 --- /dev/null +++ b/assets/feedback-support-ticket.js @@ -0,0 +1,95 @@ +/* ------------------------------------------------------------------ */ +/* Support-ticket option in the page feedback toolbar */ +/* */ +/* Adds a third option — "Create a support ticket" — next to */ +/* Mintlify's built-in "Suggest edits" and "Raise issue" buttons. */ +/* */ +/* Both built-in buttons are hard-wired to the GitHub repo and are */ +/* not configurable (docs.json has no feedback settings; the toggles */ +/* live in the Mintlify dashboard), so readers without a GitHub */ +/* account have no way to report a docs problem. This adds that path */ +/* client-side. Mintlify loads every .js file in the content */ +/* directory on every page: */ +/* https://www.mintlify.com/docs/customize/custom-scripts */ +/* ------------------------------------------------------------------ */ +(function initFeedbackSupportLink() { + try { + if (window.__ccFeedbackSupportLinkInitialized__) return; + window.__ccFeedbackSupportLinkInitialized__ = true; + } catch (_) {} + + const SUPPORT_URL = 'https://help.cometchat.com/hc/en-us/requests/new'; + const LINK_ID = 'feedback-support-ticket'; + const LABEL = 'Create a support ticket'; + + // Matches the 18x18 outline icons Mintlify uses for the sibling buttons. + const ICON = [ + '' + ].join(''); + + function buildLink(styleSource) { + const link = document.createElement('a'); + link.id = LINK_ID; + // Inherit the sibling's classes so the button keeps matching the + // theme (including dark mode) even if Mintlify restyles the toolbar. + if (styleSource) { + link.className = styleSource.className; + } + link.href = SUPPORT_URL; + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + link.innerHTML = ICON + '' + LABEL + ''; + return link; + } + + function inject() { + const toolbar = document.querySelector('.feedback-toolbar'); + if (!toolbar || toolbar.querySelector('#' + LINK_ID)) return; + + const githubLinks = toolbar.querySelectorAll('a[href*="github.com"]'); + const lastGithubLink = githubLinks[githubLinks.length - 1]; + + if (lastGithubLink && lastGithubLink.parentElement) { + lastGithubLink.parentElement.appendChild(buildLink(lastGithubLink)); + return; + } + + // Fallback: "Suggest edits" and "Raise issue" are switched off in the + // Mintlify dashboard, so there is no link row to append to. Build one + // alongside the thumbs buttons. + const thumbsDown = toolbar.querySelector('#feedback-thumbs-down'); + if (!thumbsDown || !thumbsDown.parentElement || !thumbsDown.parentElement.parentElement) return; + + const row = document.createElement('div'); + row.className = 'flex gap-3'; + row.appendChild(buildLink(thumbsDown)); + thumbsDown.parentElement.parentElement.appendChild(row); + } + + let pending = false; + function schedule() { + if (pending) return; + pending = true; + setTimeout(function () { + pending = false; + try { inject(); } catch (_) {} + }, 100); + } + + schedule(); + + // The docs are a single-page app: the toolbar is re-rendered on every + // client-side navigation, so re-inject whenever the DOM changes. + if (document.body) { + new MutationObserver(schedule).observe(document.body, { + childList: true, + subtree: true + }); + } +})(); From c4faf44af20b285694149d47e270146c9f41ff43 Mon Sep 17 00:00:00 2001 From: "Ketan (CometChat)" Date: Sat, 22 Aug 2026 21:41:54 +0530 Subject: [PATCH 2/3] fix(docs): keep the feedback toolbar on one line and off the horizontal scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mintlify groups the feedback toolbar as [question] [[thumbs] [links]], where each inner group is an unbreakable flex item. Adding a third link pushed that group past the available width, so the question, the thumbs and the links each ended up on a line of their own — and at 375px the link group was 508px wide, overflowing the viewport and giving every docs page a horizontal scrollbar on mobile. Drop the two wrapper divs out of the layout with `display: contents` so each button wraps individually. The thumbs keep their own wrapper and stay beside "Was this page helpful?"; the links wrap only when they run out of room. Measured on the branch preview: 375px goes from 528px of horizontal overflow to none, and 820px/1440px go from three lines to two with the thumbs back beside the question. Co-Authored-By: Claude Opus 5 --- assets/feedback-support-ticket.css | 32 ++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 assets/feedback-support-ticket.css diff --git a/assets/feedback-support-ticket.css b/assets/feedback-support-ticket.css new file mode 100644 index 000000000..8a3a99626 --- /dev/null +++ b/assets/feedback-support-ticket.css @@ -0,0 +1,32 @@ +/* ------------------------------------------------------------------ */ +/* Page feedback toolbar layout */ +/* */ +/* Pairs with feedback-support-ticket.js. Mintlify nests the toolbar */ +/* as: [question] [ [thumbs] [links] ]. The two inner groups are */ +/* unbreakable flex items, so once a third link is added the whole */ +/* group no longer fits beside the question: the question is pushed */ +/* onto its own line, the thumbs onto a second, the links onto a */ +/* third — and on phones the link group overflows the viewport and */ +/* the page scrolls sideways. */ +/* */ +/* `display: contents` drops the two wrapper divs out of the layout */ +/* so every button becomes a direct flex child of the toolbar row. */ +/* They then wrap one at a time: the thumbs stay beside "Was this */ +/* page helpful?", and the links flow onto the next line only when */ +/* they genuinely run out of room. */ +/* ------------------------------------------------------------------ */ + +/* The toolbar row. Pack left: with the wrappers gone, `justify-between` + would spread the buttons across the full width. */ +.feedback-toolbar > div:has(#feedback-thumbs-up) { + justify-content: flex-start; + gap: 0.75rem; +} + +/* The thumbs + links wrapper, and the link row inside it. The thumbs + keep their own wrapper so "Yes" and "No" never split apart. */ +.feedback-toolbar > div > div:has(#feedback-thumbs-up), +.feedback-toolbar > div > div > div:has(> a[href*="github.com"]), +.feedback-toolbar > div > div > div:has(> #feedback-support-ticket) { + display: contents; +} From 832fb3c8d643d48b354b1f244ceeb4ddb7f97740 Mon Sep 17 00:00:00 2001 From: "Ketan (CometChat)" Date: Mon, 24 Aug 2026 13:09:34 +0530 Subject: [PATCH 3/3] fix(docs): group the feedback toolbar buttons by what they answer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous rule gave all five buttons the same 12px gap, which read as one undifferentiated row. "Yes" and "No" answer "Was this page helpful?" and belong with the question; suggesting an edit, raising an issue or opening a ticket are independent of that answer, and production's justify-between layout separated them. Keep the links as one group (so they wrap together instead of trailing after the thumbs one at a time) and put 36px between the two groups when they share a line. The group wraps internally rather than overflowing, so the mobile horizontal scrollbar stays fixed. Below 640px the margin is dropped — there the links always wrap to their own line, and the extra 24px only pushed the question off the thumbs' line. Measured on the branch preview: - 960px toolbar: one line, gaps 12 / 12 / 36 / 12 / 12 - 664px toolbar: question + thumbs, then the three links as a group - 375px viewport: no horizontal overflow Co-Authored-By: Claude Opus 5 --- assets/feedback-support-ticket.css | 47 +++++++++++++++++++----------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/assets/feedback-support-ticket.css b/assets/feedback-support-ticket.css index 8a3a99626..dc33b166d 100644 --- a/assets/feedback-support-ticket.css +++ b/assets/feedback-support-ticket.css @@ -2,31 +2,44 @@ /* Page feedback toolbar layout */ /* */ /* Pairs with feedback-support-ticket.js. Mintlify nests the toolbar */ -/* as: [question] [ [thumbs] [links] ]. The two inner groups are */ -/* unbreakable flex items, so once a third link is added the whole */ -/* group no longer fits beside the question: the question is pushed */ -/* onto its own line, the thumbs onto a second, the links onto a */ -/* third — and on phones the link group overflows the viewport and */ -/* the page scrolls sideways. */ +/* as: [question] [ [thumbs] [links] ]. Both inner groups are */ +/* unbreakable flex items, so once a third link is added the group no */ +/* longer fits beside the question: the question is pushed onto its */ +/* own line, the thumbs onto a second, the links onto a third — and */ +/* on phones the link group overflows the viewport and the page */ +/* scrolls sideways. */ /* */ -/* `display: contents` drops the two wrapper divs out of the layout */ -/* so every button becomes a direct flex child of the toolbar row. */ -/* They then wrap one at a time: the thumbs stay beside "Was this */ -/* page helpful?", and the links flow onto the next line only when */ -/* they genuinely run out of room. */ +/* Two groups, and the layout should say so. "Yes" and "No" answer */ +/* "Was this page helpful?" and belong with it; edits, issues and */ +/* tickets are independent of that answer. */ /* ------------------------------------------------------------------ */ -/* The toolbar row. Pack left: with the wrappers gone, `justify-between` - would spread the buttons across the full width. */ +/* Drop the thumbs/links wrapper out of the layout so the thumbs sit + beside the question. Pack left: with the wrapper gone, + `justify-between` would spread the buttons across the full width. */ .feedback-toolbar > div:has(#feedback-thumbs-up) { justify-content: flex-start; gap: 0.75rem; } -/* The thumbs + links wrapper, and the link row inside it. The thumbs - keep their own wrapper so "Yes" and "No" never split apart. */ -.feedback-toolbar > div > div:has(#feedback-thumbs-up), +.feedback-toolbar > div > div:has(#feedback-thumbs-up) { + display: contents; +} + +/* The links stay one group, so they wrap together rather than + trailing after the thumbs one at a time. Wrapping inside the group + keeps it from overflowing the viewport on a phone. */ .feedback-toolbar > div > div > div:has(> a[href*="github.com"]), .feedback-toolbar > div > div > div:has(> #feedback-support-ticket) { - display: contents; + flex-wrap: wrap; +} + +/* Separate the two groups when they share a line — three times the + 12px gap used within a group. Below 640px the links always wrap to + their own line, where the extra margin would only push the question + off the thumbs' line. */ +@media (min-width: 640px) { + .feedback-toolbar #feedback-thumbs-down { + margin-right: 1.5rem; + } }