//custom directive for table of contents async function renderTableOfContents(path) { try { await waitForElement("[data-table-of-contents]"); } catch (error) { return; } const extraTableOfContents = document.querySelectorAll( "[data-table-of-contents]" ); const tableOfContents = document.querySelector("#table-of-contents-content"); for (let i = 0; i < extraTableOfContents.length; i++) { const div = extraTableOfContents[i]; const pos = div.getAttribute("data-table-of-contents"); div.id = "table-of-contents-custom-" + i; const extraTableOfContentsClone = div.cloneNode(true); extraTableOfContentsClone.id = "table-of-contents-cloned-custom-" + i; extraTableOfContentsClone.removeAttribute("data-table-of-contents"); const alreadyPresent = document.querySelector("#" + extraTableOfContentsClone.id) !== null; if (!alreadyPresent) { if (pos === "top") { tableOfContents.prepend(extraTableOfContentsClone); } else { tableOfContents.append(extraTableOfContentsClone); } extraTableOfContentsClone.classList.remove("hidden"); // IMPORTANT: Don't remove the original div - just keep it hidden // This preserves it for theme switching // div.remove(); // <-- REMOVED THIS LINE } } } //waits for element to be present in the DOM function waitForElement(selector) { return new Promise((resolve, reject) => { const intervalId = setInterval(() => { const element = document.querySelector(selector); if (element) { clearInterval(intervalId); resolve(element); } }, 1000); //add a timeout to reject the promise setTimeout(() => { clearInterval(intervalId); reject("Element not found"); }, 5000); }); } //add custom js here. This will be executed on every page load or change. Each function is added twice, once //for page load and once for route change // Simple one-time initialization for related topics (theme-safe) (function initializeRelatedTopics() { function tryInitialize() { // Check if we have the required elements const hasRelatedTopics = document.querySelector("[data-table-of-contents]"); const hasTocContainer = document.querySelector("#table-of-contents-content"); if (hasRelatedTopics && hasTocContainer) { // Check if this page's related topics are already processed const currentPath = window.location.pathname; const alreadyProcessed = document.querySelector("[id^='table-of-contents-cloned-custom-']"); // Only process if not already done for this content if (!alreadyProcessed) { renderTableOfContents(currentPath); } initializeChecklistJS(); underlineAPIReference(currentPath); } } // Try immediately tryInitialize(); // Try again after a short delay setTimeout(tryInitialize, 500); // Also try after page is fully loaded window.addEventListener('load', tryInitialize); // Listen for URL changes (for SPA navigation) but with a simple approach let lastUrl = location.href; setInterval(() => { const currentUrl = location.href; if (currentUrl !== lastUrl) { lastUrl = currentUrl; // URL changed, try to initialize related topics for new page setTimeout(tryInitialize, 200); } }, 1000); // Check every second for URL changes })(); async function initializeChecklistJS() { try { await waitForElement(".checklist-item"); } catch (error) { return; } document.querySelectorAll(".checklist-item").forEach((item) => { const buttons = item.querySelectorAll(".checklist-btn"); const circle = item.querySelector(".checklist-circle-icon"); const warningBox = item.querySelector(".warning-box"); buttons.forEach((button) => { button.addEventListener("click", () => { // Remove active classes from all buttons buttons.forEach((btn) => { btn.classList.remove("active-yes", "active-no", "active-na"); }); // Add active class to clicked button const value = button.dataset.value; button.classList.add(`active-${value}`); // Handle circle icon if (value === "yes") { circle.classList.add("checked"); } else { circle.classList.remove("checked"); } // Handle warning box if (warningBox) { warningBox.classList.toggle("show", value === "no"); } }); }); }); console.log("Feature initialized!"); } function underlineAPIReference(path) { if (!path) return; const link = document.querySelector( '#navbar a[href^="/api-reference/overview"], #navbar a[href^="/docs/api-reference/overview"]' ); if (!link) return; let underline = link.querySelector("div"); if (!underline) return; let classList = underline.classList; if (path.includes("api-reference")) { setTimeout(() => { classList.add("bg-primary"); classList.add("dark:bg-primary-light"); }, 100); } else { setTimeout(() => { classList.remove("bg-primary"); classList.remove("dark:bg-primary-light"); }, 100); } } function navBarFunctions() { document.querySelectorAll("a").forEach(function (link) { const text = link.textContent.trim(); if ( text === "Payments APIs" || text === "Payouts APIs" || text === "Secure ID APIs" || text === "Partners APIs" || text === "Additional APIs" || text === "Help" || text === "VBA" ) { link.style.display = "none"; } }); } // Mintlify may strip the trailing slash from footer.socials.website; WordPress then 301s to // the canonical URL. Restore the trailing slash on the engineering category link. function fixEngineeringBlogFooterUrls() { const canonicalPath = "/blog/category/engineering/"; const pathRoot = "/blog/category/engineering"; document.querySelectorAll('a[href*="blog/category/engineering"]').forEach((el) => { const hrefAttr = el.getAttribute("href"); if (!hrefAttr || hrefAttr.startsWith("#")) return; try { const u = new URL(hrefAttr, window.location.href); if (u.hostname !== "www.cashfree.com") return; const trimmed = u.pathname.replace(/\/+$/, ""); if (trimmed !== pathRoot) return; if (u.pathname === canonicalPath) return; u.pathname = canonicalPath; el.setAttribute("href", u.toString()); } catch (_) { // ignore invalid href } }); } (async function () { try { navBarFunctions(); fixEngineeringBlogFooterUrls(); await waitForElement("#navbar"); navBarFunctions(); fixEngineeringBlogFooterUrls(); setInterval(function () { navBarFunctions(); fixEngineeringBlogFooterUrls(); }, 100) } catch (e) { console.log(e); } })(); // Enhanced Feedback System for Mintlify Documentation // Version: Non-blocking + Optional Positive Feedback // Key changes: // 1. Does NOT block Mintlify's native feedback tracking // 2. Positive feedback: Submits immediately, shows optional additional feedback form // 3. Negative feedback: Shows required feedback form before submission (function () { 'use strict'; const WEBHOOK_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSeuPqEGlxWCeMLQFkvpiPxta9Zy4xAZPRK37wICTaFnaBdx4Q/formResponse'; let fState = { type: null, option: null, submittedType: null, submittedPage: null, activeType: null, lastSubmittedAt: 0, lastSubmittedPage: null, submissionCount: 0, email: '', tintTimeout: null }; const MAX_SUBMISSIONS_PER_SESSION = 20; const optionsMap = { positive: [ 'Instructions are clear and easy to follow', 'Helps understand the product or decide to use it', 'Documentation is easy to find', 'Information is accurate and up to date', 'Other reasons' ], negative: ['Need more guidance', 'Difficult to locate', 'Need more clarity', 'Code errors', 'Other reasons'] }; const apiOptionsMap = { positive: [ 'Code samples worked on the first try', 'Schema definitions were detailed and helpful', 'Authentication steps were easy to follow', 'Able to test and verify API functionality accurately', 'Other reasons' ], negative: [ 'Sample payload is outdated or incorrect', 'Authentication flow is missing steps', 'JSON samples didn\'t match actual API behavior', 'Missing edge-case or error scenarios', 'Other reasons' ] }; function findFeedbackSection(button) { if (!button) return null; let current = button.parentElement; for (let i = 0; i < 10 && current; i++) { const text = (current.textContent || '').toLowerCase(); if (text.includes('was this') && text.includes('helpful')) return current; current = current.parentElement; } return button.closest('.mintlify-feedback') || button.parentElement; } function generateUUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { const r = Math.random() * 16 | 0; const v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } function getOrCreateAnonId() { let anonId = localStorage.getItem('mintlify_anon_id'); if (!anonId) { anonId = 'anon_' + Date.now() + '_' + Math.random().toString(36).substr(2, 8); localStorage.setItem('mintlify_anon_id', anonId); } return anonId; } function getOrCreateSessionId() { let sessionId = sessionStorage.getItem('mintlify_session_id'); if (!sessionId) { sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 8); sessionStorage.setItem('mintlify_session_id', sessionId); } return sessionId; } async function dispatchMintlifyFeedback(isPositive) { const path = window.location.pathname; const subdomain = 'cashfreepayments-d00050e9'; // Resolve IDs once — PostHog uses `distinct_id` as its user identifier const distinctId = getOrCreateAnonId(); const sessionId = getOrCreateSessionId(); const createdAt = new Date().toISOString(); // Confirmed from API error responses: // 1. 'thumbs_up' and 'thumbs_down' are NOT on Mintlify's valid event allowlist → removed // 2. 'thumb_vote' IS valid (error never flagged it) → use this only, with vote direction in properties // 3. 'subdomain' must be a TOP-LEVEL field on each event object, not just inside properties const events = [ { event: 'thumb_vote', distinct_id: distinctId, subdomain: subdomain, // Required at top level by Mintlify schema timestamp: createdAt, properties: { '$current_url': window.location.href, '$pathname': path, '$referrer': document.referrer || '', '$user_agent': navigator.userAgent, 'subdomain': subdomain, // Also kept in properties for dashboard filtering 'session_id': sessionId, 'platform': 'web', 'vote': isPositive ? 'Yes' : 'No' } } ]; // Dynamic path to handle /docs-prefixed staging deployments const apiPath = path.startsWith('/docs') ? '/docs/_mintlify/api/v1/e' : '/_mintlify/api/v1/e'; try { const response = await fetch(apiPath, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ events }) // Schema requires { events: [...] } }); if (!response.ok) { const body = await response.text().catch(() => ''); console.warn(`[Mintlify Analytics] HTTP ${response.status} from ${apiPath}. Response: ${body}`); } else { console.log(`[Mintlify Analytics] ✓ Feedback dispatched (${isPositive ? 'thumbs_up' : 'thumbs_down'}).`); } } catch (e) { console.error('[Mintlify Analytics] Network error dispatching feedback:', e); } } async function dispatchFeedback(comment, honeypotValue) { if (honeypotValue) { console.warn('[Feedback] Bot detected (honeypot filled)'); return; } if (navigator.webdriver) { console.warn('[Feedback] Bot detected (webdriver)'); return; } if (fState.submissionCount >= MAX_SUBMISSIONS_PER_SESSION) { console.warn('[Feedback] Session quota exceeded'); return { blocked: true }; } fState.lastSubmittedAt = Date.now(); fState.lastSubmittedPage = window.location.pathname; fState.submissionCount++; const formData = new URLSearchParams(); formData.append('entry.448023073', window.location.href); formData.append('entry.1152322836', document.title); formData.append('entry.921234233', fState.type); formData.append('entry.611999743', fState.option || ''); formData.append('entry.1689253860', comment || ''); formData.append('entry.968762423', navigator.userAgent); formData.append('entry.477464939', document.referrer || ''); // Add Email ID - Connected to the "Email ID" column in your Google Sheet if (fState.email) { formData.append('entry.1213114151', fState.email); } if (typeof gtag === 'function') { gtag('event', 'documentation_feedback', { feedbackType: fState.type, option: fState.option, email: fState.email || 'none', comment: comment || '', page: window.location.href }); } try { await fetch(WEBHOOK_URL, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: formData.toString() }); } catch (e) { /* Error suppressed for security */ } // Clear tints after 8.5 seconds if (fState.tintTimeout) clearTimeout(fState.tintTimeout); fState.tintTimeout = setTimeout(() => { fState.submittedType = null; fState.submittedPage = null; fState.activeType = null; applyTints(null, null); }, 8500); } /** Render OPTIONAL positive feedback form (already submitted, just collecting extra details) **/ function renderOptionalPositiveFeedback(anchorBtn) { fState.activeType = 'positive'; document.getElementById('enhanced-feedback-inline')?.remove(); const container = document.createElement('div'); container.id = 'enhanced-feedback-inline'; container.className = 'enhanced-feedback-inline visible'; const isApiPage = window.location.pathname.includes('api-reference'); const activeMap = isApiPage ? apiOptionsMap : optionsMap; const opts = activeMap.positive; container.innerHTML = `

Want to share more? (Optional)

${opts.map(opt => ` ${opt} `).join('')}

`; const section = findFeedbackSection(anchorBtn); section.insertAdjacentElement('afterend', container); const submitBtn = container.querySelector('#fb-submit'); const textarea = container.querySelector('#fb-text'); const hpField = container.querySelector('#fb-hp'); const textWrapper = container.querySelector('#fb-text-wrapper'); const emailInput = container.querySelector('#fb-email'); const validate = () => { const isOther = fState.option && fState.option.toLowerCase().includes('other'); const hasComment = textarea.value.trim().length > 0; const hasSelection = !!fState.option; submitBtn.disabled = isOther ? !hasComment : !hasSelection; if (isOther) textarea.placeholder = "Please tell us more (Required)..."; else textarea.placeholder = 'What did you like... (Optional)'; }; container.addEventListener('change', (e) => { if (e.target.name === 'fb-opt') { fState.option = e.target.value; container.querySelectorAll('.enhanced-feedback-inline-option').forEach(opt => { opt.classList.toggle('selected', opt.querySelector('input').checked); }); if (textWrapper) textWrapper.classList.add('visible'); validate(); } }); textarea.oninput = validate; submitBtn.onclick = () => { fState.email = emailInput.value.trim(); dispatchFeedback(textarea.value, hpField.value); container.innerHTML = `

Thank you for helping improve Cashfree's documentation!

`; setTimeout(() => { container.classList.remove('visible'); setTimeout(() => { container.remove(); }, 200); }, 1500); }; container.querySelector('#fb-close').onclick = () => { fState.activeType = null; container.classList.remove('visible'); setTimeout(() => { container.remove(); }, 200); }; applyTints(anchorBtn, 'positive'); } /** Render REQUIRED negative feedback form (must select option before submission) **/ function renderRequiredNegativeFeedback(anchorBtn) { fState.type = 'negative'; fState.activeType = 'negative'; fState.option = null; document.getElementById('enhanced-feedback-inline')?.remove(); const container = document.createElement('div'); container.id = 'enhanced-feedback-inline'; container.className = 'enhanced-feedback-inline visible'; const isApiPage = window.location.pathname.includes('api-reference'); const activeMap = isApiPage ? apiOptionsMap : optionsMap; const opts = activeMap.negative; container.innerHTML = `

What could be improved?

${opts.map(opt => ` ${opt} `).join('')}

`; const section = findFeedbackSection(anchorBtn); section.insertAdjacentElement('afterend', container); const submitBtn = container.querySelector('#fb-submit'); const textarea = container.querySelector('#fb-text'); const hpField = container.querySelector('#fb-hp'); const textWrapper = container.querySelector('#fb-text-wrapper'); const emailInput = container.querySelector('#fb-email'); const validate = () => { const isOther = fState.option && fState.option.toLowerCase().includes('other'); const hasComment = textarea.value.trim().length > 0; submitBtn.disabled = isOther ? !hasComment : !fState.option; if (isOther) textarea.placeholder = "Please tell us more (Required)..."; else textarea.placeholder = 'Help us improve... (Optional)'; }; container.addEventListener('change', (e) => { if (e.target.name === 'fb-opt') { fState.option = e.target.value; container.querySelectorAll('.enhanced-feedback-inline-option').forEach(opt => { opt.classList.toggle('selected', opt.querySelector('input').checked); }); if (textWrapper) textWrapper.classList.add('visible'); validate(); } }); textarea.oninput = validate; submitBtn.onclick = () => { fState.email = emailInput.value.trim(); dispatchFeedback(textarea.value, hpField.value); fState.submittedType = 'negative'; fState.submittedPage = window.location.pathname; fState.activeType = null; fState.pendingNegativeBtn = null; // Send to Mintlify (Manual backup with standardized names) dispatchMintlifyFeedback(false); container.innerHTML = `

Thank you for helping improve Cashfree's documentation!

`; setTimeout(() => { container.classList.remove('visible'); setTimeout(() => { container.remove(); }, 200); }, 1500); }; container.querySelector('#fb-cancel').onclick = () => { fState.activeType = null; fState.pendingNegativeBtn = null; // Clear pending button on cancel container.classList.remove('visible'); setTimeout(() => { container.remove(); }, 200); applyTints(null, null); }; applyTints(anchorBtn, 'negative'); } function applyTints(btn, type) { document.querySelectorAll('button[data-enhanced-feedback-attached="true"]').forEach(b => { b.classList.remove('feedback-selected-positive', 'feedback-selected-negative'); }); if (btn && type) btn.classList.add(`feedback-selected-${type}`); } function reapplyTintsHeartbeat() { if (fState.submittedPage && fState.submittedPage !== window.location.pathname) { fState.submittedType = null; fState.submittedPage = null; fState.activeType = null; applyTints(null, null); return; } const typeToTint = fState.submittedType || fState.activeType; if (!typeToTint) return; document.querySelectorAll('button[data-enhanced-feedback-attached="true"]').forEach(b => { const txt = b.innerText.toLowerCase(); const aria = (b.getAttribute('aria-label') || '').toLowerCase(); const isMatch = (typeToTint === 'positive' && (txt === 'yes' || txt.includes('👍') || aria.includes('helpful'))) || (typeToTint === 'negative' && (txt === 'no' || txt.includes('👎') || aria.includes('not helpful'))); if (isMatch) b.classList.add(`feedback-selected-${typeToTint}`); else b.classList.remove('feedback-selected-positive', 'feedback-selected-negative'); }); } function init() { const btns = document.querySelectorAll('button:not([data-enhanced-feedback-attached])'); btns.forEach(btn => { const txt = btn.innerText.toLowerCase(); const aria = (btn.getAttribute('aria-label') || '').toLowerCase(); const btnId = (btn.id || '').toLowerCase(); if (btnId.includes('search') || btnId.includes('menu') || btn.closest('nav') || btn.closest('header')) return; const isFeedback = (txt === 'yes' || txt === 'no' || txt.includes('👍') || txt.includes('👎') || aria.includes('helpful')) && (btn.closest('[class*="feedback"]') || btn.parentElement.innerText.toLowerCase().includes('helpful')); if (isFeedback) { btn.dataset.enhancedFeedbackAttached = "true"; const isPositive = txt === 'yes' || txt.includes('👍') || aria.includes('yes'); btn.addEventListener('click', (e) => { // We no longer call preventDefault() or stopPropagation() // This allows Mintlify's native analytics to track the vote. // NEW: Clear any existing submission states or timers immediately on a new click if (fState.tintTimeout) clearTimeout(fState.tintTimeout); fState.submittedType = null; fState.submittedPage = null; fState.activeType = isPositive ? 'positive' : 'negative'; if (isPositive) { // POSITIVE: Google Form immediately, show optional form for additional details // Mintlify is handled by the native event listener we just allowed to fire. fState.type = 'positive'; fState.submittedType = 'positive'; fState.submittedPage = window.location.pathname; // Send to Mintlify (Manual backup with standardized names) dispatchMintlifyFeedback(true); // Send to Google Form immediately (with no option selected) dispatchFeedback('', ''); setTimeout(() => { renderOptionalPositiveFeedback(btn); }, 100); } else { // NEGATIVE: Show form first, trigger Mintlify only after submission fState.type = 'negative'; fState.pendingNegativeBtn = btn; renderRequiredNegativeFeedback(btn); } }, true); } }); reapplyTintsHeartbeat(); } new MutationObserver(init).observe(document.body, { childList: true, subtree: true }); setInterval(init, 2000); setInterval(reapplyTintsHeartbeat, 1000); document.addEventListener('click', (e) => { const container = document.getElementById('enhanced-feedback-inline'); if (!container) return; const isOutsideForm = !container.contains(e.target); const isNotFeedbackButton = !e.target.closest('button[data-enhanced-feedback-attached="true"]'); if (isOutsideForm && isNotFeedbackButton) { fState.activeType = null; container.classList.remove('visible'); setTimeout(() => { container.remove(); }, 200); applyTints(null, null); } }, true); })();