CINXE.COM
HelpDocs Support
<!DOCTYPE html> <html lang="en"> <head> <title>HelpDocs Support</title> <meta name="description" content="HelpDocs is customizable help center software that reduces your team's support load, and increases your customers' happiness."> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="https://files.helpdocs.io/Ytt2uahFxY/favicon.svg"> <meta property="og:title" content="HelpDocs Support"> <meta property="twitter:title" content="HelpDocs Support"> <meta property="og:description" content="HelpDocs Support"> <meta property="twitter:description" content="HelpDocs Support"> <meta property="og:image" content="https://files.helpdocs.io/Ytt2uahFxY/other/1541147768036/fallback.png?t=1541147768036"> <meta property="twitter:image:src" content="https://files.helpdocs.io/Ytt2uahFxY/other/1541147768036/fallback.png?t=1541147768036"> <meta property="og:site_name" content="Support"> <meta property="og:type" content="website"> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:site" content="https://support.helpdocs.io"> <meta property="og:url" content="https://support.helpdocs.io"> <script type="application/ld+json">{"@context":"http://schema.org","@type":"WebSite","name":"Support","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term_string","target":"https://support.helpdocs.io/search/{search_term_string}"},"url":"https://support.helpdocs.io"}</script> <link rel="canonical" href="https://support.helpdocs.io"> <link rel="stylesheet" href="https://cdn.helpdocs.io/css/cookieconsent.min.css?v=1732636207"> <link id="gist-css" rel="stylesheet" href="https://cdn.helpdocs.io/css/highlightjs-github-gist.min.css?v=1732636207" async> <link rel="stylesheet" href="https://cdn.helpdocs.io/css/v5/startup.min.css?v=1732636207"> <style> body { --color-brand: #e13a82; --color-brand-header: #e13a82; --color-brand-light: #fcebf2; --color-brand-dark: #16050c; } </style> <script> var hasIcon = [ ].reduce(function (acc, cur) { return acc = acc || cur; }, false); if (hasIcon) { document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://cdn.helpdocs.io/css/font-awesome.min.css?v=1732636207">'); } </script> <!-- Slack app suggestions --> <meta name="slack-app-id" content="A3Y1X4NG5"> <!-- Make it easier to use handlebars in our docs --> <script> function domReady(fn) { if (document.readyState != 'loading'){ fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } (function() { domReady(function() { let article = document.querySelectorAll('article.articleHTML') if (!article) return; article = article[0]; if (!article || !article.innerHTML) return; article.innerHTML = article.innerHTML.replace(/\<\;\<\;/gi, '{{').replace(/\>\;\>\;/gi, '}}'); }); })(); </script> <script> (function() { domReady(function() { var fpa = document.querySelector('.ftPoweredBy span'); if (!fpa) return; fpa.innerHTML = fpa.innerHTML + " 🦄✨"; }); })(); </script> <script> (function() { // TODO: remove line below when hCaptcha contact form is general release return; // Disable contact button until Lighthouse is loaded domReady(function() { var contactEls = document.querySelectorAll('.contactButton a'); if (!contactEls) return; Array.prototype.forEach.call(contactEls, function (el) { el.setAttribute('onclick', null); el.removeAttribute('data-toggle', null); el.removeAttribute('data-target', null); el.removeAttribute('data-popup-trigger', null); }); }); })(); </script> <script type="text/javascript"> window.hdlh = { widget_key: "P3vByySEuDjngJps66xv", color_mode: 'light', ignore_contact_widgets: true, suggestions: ['article:pf5cwpkhhg'], onReady: function() { // TODO: remove line below when hCaptcha contact form is general release return; // Re-enable contact button and point to Lighthouse var contactEls = document.querySelectorAll('.contactButton a'); if (!contactEls) return; Array.prototype.forEach.call(contactEls, function (el) { el.setAttribute('onclick', 'Lighthouse.show()'); }); }, onNavigate: function(data) { if (data.page !== 'contact') return; setTimeout(function() { try { var contact = document.querySelector('#lighthouse #MainFrame').contentDocument.querySelector('.Contact'); var disclaimer = document.createElement('p'); disclaimer.style.userSelect = 'none'; disclaimer.style.color = '#aaa'; disclaimer.style.fontSize = '0.8em'; disclaimer.style.textAlign = 'center'; disclaimer.innerHTML = "You're contacting <a href='https://www.helpdocs.io' target='_blank' style='color:#f45599;font-weight:bold;'>HelpDocs</a> support. If you're looking for a different company you'll need to reach out to them directly.<br><br>We generally reply within 1 working day. If you haven't heard back from us by then, check your spam box."; contact.insertBefore(disclaimer, contact.firstChild); } catch(e) { console.log(e); } }, 1); } }; if (window.location.pathname === '/') window.hdlh.primary_color = '#444'; (function(h,d){var s=d.createElement("script");s.type='text/javascript';s.async=true;s.defer=true;s.src=h+"?t="+new Date().getTime();d.head.appendChild(s);})("https://lighthouse.helpdocs.io/load",document); </script> <!-- Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-K46CXZ7B0Z"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-K46CXZ7B0Z'); </script> <meta property="hd-render" content="hbs"> </head> <body data-article-id="undefined" data-category-id="undefined" data-search-term="undefined" data-original-search-term="undefined" data-search-result-count="undefined" data-language-code="" data-default-language-code="en" data-account-id="Ytt2uahFxY" data-home-path="/" data-search-placeholder="Search for answers..." data-see-more-results-string="See more results" data-all-categories-string="Knowledge Base" data-no-articles-found-string="No docs found" data-domain="support.helpdocs.io" > <div id="main" data-hd-template="startupv5"> <div id="overlay"></div> <section id="homeBanner"> <!-- Main navigation bar --> <header id="homeNav"> <nav role="navigation"> <!-- Logo and brand --> <a class="hnBranding navLeft" href="/"> <img class="hnLogo" aria-label="Support Logo" src="https://files.helpdocs.io/Ytt2uahFxY/logo.svg?t=1716305847007" alt="Support Logo" /> <span class="hnBrand" aria-label="Support">Support</span> </a> <!-- Navigation links --> <div class="hnItems navRightItems"> <ul class="hnList"> <li class="hnItem" href="#" target="_blank" aria-label="Hyperping navigation item"> <a class="hnStatus statuspage"> <span class="color-dot"></span> <span class="color-description" aria-label="Hyperping indication text"> <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path class="spinner_Uvk8" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(6, 6) scale(0)"/><path class="spinner_Uvk8 spinner_ypeD" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(6, 6) scale(0)"/><path class="spinner_Uvk8 spinner_y0Rj" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(6, 6) scale(0)"/></svg> </span> </a> </li> <li class="hnItem" href="#"> <a class="hnLink" rel="noreferrer" href="https://apidocs.helpdocs.io" target="_blank" aria-label="API navigation item"> API </a> </li> <li class="hnItem" href="#"> <a class="hnLink" rel="noreferrer" href="https://courses.helpdocs.io" target="_blank" aria-label="Courses navigation item"> Courses </a> </li> <li class="hnItem" href="#"> <a class="hnLink" rel="noreferrer" href="https://blog.helpdocs.io/tag/announcements/" target="_blank" aria-label="Updates navigation item"> Updates </a> </li> <!-- Contact button --> <li class="hnItem contactButton desktop" href="#" aria-label="Get in touch desktop"> <a id="contact-modal-trigger" class="btn btn-primary btn-contact nav-link" href="#" data-toggle="modal" data-target="#contact-modal" data-popup-trigger="contact-modal" >Get in touch</a> </li> <!-- Dark mode switcher --> <li class="hnItem darkModeSwitcher" href="#"> <a class="hnLink dmLinkhnLink" href="#" alt="Sun icon" aria-label="Switch dark mode setting"> <span class="dmCurrent"> <svg class="hnItemSvgSun" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <title id="sunIconDesc">An icon of a simple sun to switch to light mode.</title> <desc id="sunIconDesc">A simple sun icon. It has a small central circle with eight small circles surrounding it.</desc> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.125 0.875C6.125 0.385 6.51 0 7 0C7.49 0 7.875 0.385 7.875 0.875C7.875 1.365 7.49 1.75 7 1.75C6.51 1.75 6.125 1.365 6.125 0.875ZM1.75 2.625C1.75 2.135 2.135 1.75 2.625 1.75C3.115 1.75 3.5 2.135 3.5 2.625C3.5 3.115 3.115 3.5 2.625 3.5C2.135 3.5 1.75 3.115 1.75 2.625ZM10.5 2.625C10.5 2.135 10.885 1.75 11.375 1.75C11.865 1.75 12.25 2.135 12.25 2.625C12.25 3.115 11.865 3.5 11.375 3.5C10.885 3.5 10.5 3.115 10.5 2.625ZM3.5 7C3.5 5.075 5.075 3.5 7 3.5C8.925 3.5 10.5 5.075 10.5 7C10.5 8.925 8.925 10.5 7 10.5C5.075 10.5 3.5 8.925 3.5 7ZM0 7C0 6.51 0.385 6.125 0.875 6.125C1.365 6.125 1.75 6.51 1.75 7C1.75 7.49 1.365 7.875 0.875 7.875C0.385 7.875 0 7.49 0 7ZM12.25 7C12.25 6.51 12.635 6.125 13.125 6.125C13.615 6.125 14 6.51 14 7C14 7.49 13.615 7.875 13.125 7.875C12.635 7.875 12.25 7.49 12.25 7ZM1.75 11.375C1.75 10.885 2.135 10.5 2.625 10.5C3.115 10.5 3.5 10.885 3.5 11.375C3.5 11.865 3.115 12.25 2.625 12.25C2.135 12.25 1.75 11.865 1.75 11.375ZM10.5 11.375C10.5 10.885 10.885 10.5 11.375 10.5C11.865 10.5 12.25 10.885 12.25 11.375C12.25 11.865 11.865 12.25 11.375 12.25C10.885 12.25 10.5 11.865 10.5 11.375ZM6.125 13.125C6.125 12.635 6.51 12.25 7 12.25C7.49 12.25 7.875 12.635 7.875 13.125C7.875 13.615 7.49 14 7 14C6.51 14 6.125 13.615 6.125 13.125ZM7 8.75C7.9665 8.75 8.75 7.9665 8.75 7C8.75 6.0335 7.9665 5.25 7 5.25C6.0335 5.25 5.25 6.0335 5.25 7C5.25 7.9665 6.0335 8.75 7 8.75Z" fill="black"/> </svg> <svg class="hnItemSvgMoon" fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg"> <title id="moonIconDesc">An icon of a simple moon to switch to dark mode.</title> <desc id="moonIconDesc">A simple moon icon. It has a simple crescent shape.</desc> <path d="m1 6.80206c0-2.03882.98834-3.84546 2.51288-4.96959-.00937.15561-.01417.3126-.01417.47087 0 4.52915 3.6688 8.19796 8.19799 8.19796.1591 0 .3164-.0054.4718-.0155-1.124 1.5253-2.93114 2.5142-4.97056 2.5142-3.42458 0-6.19794-2.7734-6.19794-6.19794z" stroke="#000" stroke-width="2"/> </svg> </span> </a> </li> </ul> </div> <div data-popup-body="language" class="languageSwitcherPopup popup" style="z-index: 5;"> <ul class="languageList"> </ul> </div> <div data-popup-body="darkmode" class="darkmodeSwitcherPopup popup" style="z-index: 5;"> <ul class="darkmodeList"> <li class="dmItem" href="#"> <a class="dmLink" href="" aria-label="Switch to light mode">Light</a> </li> <li class="dmItem" href="#"> <a class="dmLink" href="" aria-label="Switch to dark mode">Dark</a> </li> <li class="dmItem" href="#"> <a class="dmLink" href="" aria-label="Switch to system default">System</a> </li> </ul> </div> <!-- Mobile navigation --> <a data-popup-trigger="mobile-nav" href="#" class="hnMobileNavButton" aria-label="Mobile navigation"> <svg height="14" viewBox="0 0 20 14" width="20" xmlns="http://www.w3.org/2000/svg"> <g class="hnMobileIcon" fill="none" stroke="none" stroke-width="2"> <path class="hnMobileIconTopBar" d="m0 1h20"/> <path class="hnMobileIconBottomBar" d="m0 13h20"/> </g> </svg> </a> <div data-popup-body="mobile-nav" class="hnMobileItems mobileMenuPopup popup" aria-label="Mobile navigation popup" style="z-index: 4;"> <ul class="hnList"> <li class="hnItem" href="#"> <a class="hnLink" href="https://apidocs.helpdocs.io" target="_blank" aria-label="API navigation item"> API </a> </li> <li class="hnItem" href="#"> <a class="hnLink" href="https://courses.helpdocs.io" target="_blank" aria-label="Courses navigation item"> Courses </a> </li> <li class="hnItem" href="#"> <a class="hnLink" href="https://blog.helpdocs.io/tag/announcements/" target="_blank" aria-label="Updates navigation item"> Updates </a> </li> <li class="hnItem contactButton mobile" href="#" aria-label="Get in touch mobile"> <a id="contact-modal-trigger" class="btn btn-primary btn-contact nav-link" href="#" data-toggle="modal" data-target="#contact-modal" data-popup-trigger="contact-modal" >Get in touch</a> </li> <!-- Contact button --> <!-- Dark mode switcher --> <li class="hnItem darkModeSwitcher" href="#" aria-label="Dark mode switcher"> <a class="hnLink dmLinkhnLink" href="#"> <span class="dmCurrent"> <svg class="hnItemSvgSun" fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" d="m7 1c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm-5 2c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm10 0c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm-8 5c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4zm-4 0c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm14 0c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm-12 5c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm10 0c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm-5 2c0-.56.44-1 1-1s1 .44 1 1-.44 1-1 1-1-.44-1-1zm1-5c1.10457 0 2-.89543 2-2s-.89543-2-2-2-2 .89543-2 2 .89543 2 2 2z" fill="#000" fill-rule="evenodd"/> </svg> <svg class="hnItemSvgMoon" fill="none" height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m1 6.80206c0-2.03882.98834-3.84546 2.51288-4.96959-.00937.15561-.01417.3126-.01417.47087 0 4.52915 3.6688 8.19796 8.19799 8.19796.1591 0 .3164-.0054.4718-.0155-1.124 1.5253-2.93114 2.5142-4.97056 2.5142-3.42458 0-6.19794-2.7734-6.19794-6.19794z" stroke="#000" stroke-width="2"/></svg> </span> </a> </li> <li class="hnItem" href="#" target="_blank" aria-label="Hyperping navigation item"> <a class="hnStatus statuspage"> <span class="color-dot"></span> <span class="color-description" aria-label="Hyperping indication text">All systems operational</span> </a> </li> </ul> </div> </nav> </header> <!-- Search bar --> <section id="search-container"> <h1 class="scTitle" aria-label="👋 How can we help?">👋 How can we help?</h1> <div class="scInstantSearch" id="instant-search"> <div class="scSearchIcon"> <svg fill="none" height="13" viewBox="0 0 14 13" width="14" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.06117 9.67792c-.825.53698-1.80989.84908-2.86766.84908-2.90695 0-5.263487-2.35658-5.263487-5.26352s2.356537-5.26348 5.263487-5.26348c2.90694 0 5.26349 2.35654 5.26349 5.26348 0 1.12541-.3532 2.16832-.9548 3.02394l3.1818 2.98308c.4029.3777.4233 1.0106.0455 1.4135-.3777.4029-1.0106.4233-1.4135.0455zm.39582-4.41444c0 1.80237-1.46111 3.26349-3.26348 3.26349-1.80238 0-3.26349-1.46112-3.26349-3.26349s1.46111-3.26348 3.26349-3.26348c1.80237 0 3.26348 1.46111 3.26348 3.26348z" fill="#000" fill-rule="evenodd"/></svg> </div> <form action="/search" method="GET"> <label> <input id="hd-query" name="query" aria-label="Search for answers..." placeholder="Search for answers..." autocomplete="off" autocorrect="off" autocapitalize="off"> </label> </form> <div class="scShortcut" aria-label="Keyboard shortcut for search"> <kbd class="scShortcutMeta">Ctrl</kbd> <kbd>K</kbd> </div> </div> <!-- Search results --> <section id="searchresults" aria-label="Search results"> <div class="srHits" id="hits" aria-label="Search hit"></div> </section> <!-- Top articles --> <section id="topArticles" aria-label="🏄 Our most popular"> <p class="taTitle" aria-label="🏄 Our most popular title">🏄 Our most popular</p> <div class="taList"> <a class="taHitLink" href="/article/eh3pzxNwYf-grabbing-css-selectors-from-your-browser" aria-label="Go to article Finding CSS Selectors in Your Browser"> <div class="taHit scaleSmall"> <p class="taCardTitle" aria-label="Finding CSS Selectors in Your Browser">Finding CSS Selectors in Your Browser</p> </div> </a> <a class="taHitLink" href="/article/CmkE83ebCz-clearing-a-cache-in-your-browser" aria-label="Go to article Clearing the Cache in Your Browser"> <div class="taHit scaleSmall"> <p class="taCardTitle" aria-label="Clearing the Cache in Your Browser">Clearing the Cache in Your Browser</p> </div> </a> <a class="taHitLink" href="/article/uQDebSnIrD-choosing-a-layout" aria-label="Go to article Choosing a Template"> <div class="taHit scaleSmall"> <p class="taCardTitle" aria-label="Choosing a Template">Choosing a Template</p> </div> </a> </div> </section> </section> </section> <div class="container-fluid"> <div id="content"> <main id="categoryContent" class="three-col-large-center-focused-grid"> <section id="categories" class="three-col-center"> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/ckPP7J4UQ1-getting-started"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514734352039/get-started-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 11 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Getting Started</h2> <p class="cCardDesc">With HelpDocs you can create a great looking help center, and be up and running in minutes. Here's some quick tips to get you started.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/l6u4DP5Xuv-writing-and-editing-articles"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1531535487884/writing-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 48 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Writing and Editing Articles</h2> <p class="cCardDesc">Articles are at the very center of HelpDocs. Here's how to make the most of our article editor, and make your articles great.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/Ur53ORwdVo-setting-up-integrations"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1531535611003/integrations-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 39 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Setting Up Integrations</h2> <p class="cCardDesc">HelpDocs integrates with other services to make the experience even more awesome! Find out how to connect them up.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/7V3torYegy-customizing-your-help-docs"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514826689860/customization-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 41 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Customizing your HelpDocs</h2> <p class="cCardDesc">There's a ton of ways to customize your HelpDocs. You can upload your logo, easily change your brand colors, or upload custom CSS and JavaScript.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/9bixmsq22q-lighthouse"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1519741681112/lighthouse-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 5 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Lighthouse</h2> <p class="cCardDesc">Lighthouse brings self-serve help to your customers inside your app.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/qlhvEUpY5c-dashboard-stats"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514734541681/stats-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 8 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Data & Analytics</h2> <p class="cCardDesc">We show a few different metrics in the HelpDocs dashboard. Here's what they all mean, and how we calculate them.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/WS6UFtWTli-multilingual-translation"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514809239507/multilingual-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 7 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Multilingual Translation</h2> <p class="cCardDesc">We've created tools to help you translate your docs. This way, you can serve customers everywhere (we don't currently support Vulcan 🖖).</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/zkgt8spmlz-permissioning"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1536577860852/permissioning-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 6 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Permissioning</h2> <p class="cCardDesc">In HelpDocs, you can show different articles to different users with article-level access control. Here are a few articles to show you how it works.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/iiu43alv7z-authentication"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1531534982886/auth-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 9 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Authentication</h2> <p class="cCardDesc">Swiftly sign in and up by setting up different authentication options. Use a password, restrict to logged in users, set up single sign-on, and more.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/diq7nhnb1d-security-and-compliance"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1682441471860/security-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 6 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Security & Compliance</h2> <p class="cCardDesc">Learn more about how HelpDocs secures your data and how we comply with international frameworks.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/bc3ydQfdVZ-billing"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514734568800/billing-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 8 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Billing</h2> <p class="cCardDesc">Learn about how we handle billing at HelpDocs, how you can update your card and how you can upgrade or downgrade your plan.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/WQsgF19Gi3-faqs"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514734582382/faq-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 27 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">FAQs</h2> <p class="cCardDesc">From app issues to common questions. Here's a list of things we get asked a lot, but don't really fit anywhere else.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/category/dXXjtYlXfD-guides"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1514734594771/guides-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 5 docs </span> </div> </div> <h2 class="cCardTitle cardTitle">Guides</h2> <p class="cCardDesc">We've created a collection of guides and resources to help you make the most out of your HelpDocs subscription.</p> </a> </div> <div class="cCard card stack"> <a class="cCardLink cardLink" href="/article/xgPk1bbkcn-press-kit"> <div class="cCardMeta"> <div class="cCardIcon"> <img class="cCardIconImage" alt="Category icon" src="https://files.helpdocs.io/Ytt2uahFxY/other/1516906540682/resources-icon.svg"> </div> <div class="cCardNum"> <span class="cCardDetailsArticleCount"> 1 doc </span> </div> </div> <h2 class="cCardTitle cardTitle">Resources</h2> <p class="cCardDesc">We store information and useful kits about HelpDocs here.</p> </a> </div> </section> </main> <style> footer { background-color: var(--color-background) !important; } @media screen and (max-width: 768px) { footer { flex-flow: wrap; } } footer .ftItems a, footer .ftPoweredBy { text-decoration: none !important; font-weight: 600 !important; color: var(--color-text) !important; } footer .ftItems a:hover { color: var(--color-brand) !important; } footer .ftLangFlag { fill: var(--color-text) !important; } </style> <footer style="display: flex !important; justify-content: space-between !important; visibility: visible !important; padding: 50px 70px !important; align-items: center !important; background-color: white; border-top: 1px solid #E6E6E6; gap: 10vw;" > <!-- Navigation links --> <div style="display: initial !important; visibility: visible !important; max-width: 45vw;" > <a href="https://www.helpdocs.io?ref=hd" aria-label="Powered by HelpDocs" target="_blank" style="display: initial !important; visibility: visible !important;" > <a href="https://www.helpdocs.io?ref=hd" target="_blank" title="Powered by HelpDocs" style="display: initial !important; visibility: visible !important; text-decoration: none !important;" > <img src="https://cdn.helpdocs.io/img/logo_grey.png?v=1732636207" alt="Powered by HelpDocs" style="display: initial !important; visibility: visible !important; filter: brightness(0.8) !important; max-height: 20px !important;" /> <span style="position: absolute;width: 1px;clip: rect(0 0 0 0);overflow: hidden;white-space: nowrap;">(opens in a new tab)</span> </a> <a href="https://www.helpdocs.io?ref=hd" target="_blank" title="Powered by HelpDocs" style="display: initial !important; text-decoration: none !important;" > <span style="display: initial !important; visibility: visible !important; margin-left: 10px !important; font-weight: 400 !important; font-size: var(--font-size-xs); color: var(--color-text-grey) !important;">Powered by HelpDocs</span> <span style="position: absolute;width: 1px;clip: rect(0 0 0 0);overflow: hidden;white-space: nowrap;">(opens in a new tab)</span> </a> </a> </div> <div class="ftItems navRightItems"> <ul class="ftList"> <li class="ftItem" href="#"> <a class="ftLink" href="https://apidocs.helpdocs.io" target="_blank">API</a> </li> <li class="ftItem" href="#"> <a class="ftLink" href="https://courses.helpdocs.io" target="_blank">Courses</a> </li> <li class="ftItem" href="#"> <a class="ftLink" href="https://blog.helpdocs.io/tag/announcements/" target="_blank">Updates</a> </li> <li class="ftItem contactButton" href="#"> <a id="contact-modal-trigger" class="btn btn-primary btn-contact nav-link" href="#" data-toggle="modal" data-target="#contact-modal" data-popup-trigger="contact-modal" >Get in touch</a> </li> <!-- Contact button --> </ul> </div> </footer> <!-- Back to top button --> <button id="backToTop" aria-label="Go back to top of document" type="button" name="Top" title="Go to top"> <svg class="backToTopIcon" height="10" viewBox="0 0 23 13" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m0 0 10 10.215-10 9.785" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" transform="matrix(0 -1 1 0 1.5 11.5)"></path></svg> </button> </div> </div> </div> <script src="https://js.hcaptcha.com/1/api.js" async defer></script> <script> function onSubmitHCaptcha(hcaptcha_response) { HDUtils.onSubmitHCaptcha(hcaptcha_response); } function onCloseHCaptcha() { HDUtils.onFailHCaptcha(); } </script> <style> .hCaptchaDisclaimer { color: #444; font-size: 0.7em; text-align: center; margin-top: 0.5em; } .hCaptchaDisclaimer a { color: #444; font-weight: bold; font-size: 1em; } </style> <script type="text/javascript"> // ** Contact form functions ** // - checkContactFields checks validity of contact fields // - showAnyDeflectArticles displays suggested articles if question // length is over 20 characters function checkContactFields() { var q = document.getElementById('question').value; var e = document.getElementById('email').value; var n = document.getElementById('name').value; var sub = document.getElementById('contact-form-submit'); var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ if (q === "" || e === "" || n === "") { sub.disabled = true; } else if (!e.match(re)) { sub.disabled = true; } else { sub.disabled = false; } } </script> <div data-popup-body="contact-modal" id="contact-modal" class="contactPopup"> <div class="contactContainer"> <img class="cpLogo" aria-label="Support Logo" src="https://files.helpdocs.io/Ytt2uahFxY/logo.svg?t=1716305847007" alt="Support Logo" /> <h3 class="cpTitle">Get in touch</h3> <a data-popup-trigger="contact-modal" alt="Close contact modal" class="cpCloseLink" href="#"> <svg class="cpCloseIcon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14.667 14.668"><path d="M32.334-209.666,26-203.332l6.334-6.334L26-216l6.334,6.334L38.667-216l-6.334,6.334,6.334,6.334Z" transform="translate(-25 217)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg> </a> <form id="contact-form" action="/contact" method="POST" data-article-id="" data-category-id="" data-search-term="" > <fieldset class="cpName"> <input tabindex="1" onkeyup="checkContactFields()" id="name" name="name" type="text" placeholder="Jane Doe"> </fieldset> <fieldset class="cpEmail"> <input tabindex="2" onkeyup="checkContactFields()" id="email" name="email" type="email" placeholder="my.email@example.com"> </fieldset> <fieldset class="cpTextarea"> <textarea tabindex="3" onkeyup="checkContactFields()" id="question" name="question" type="text" placeholder="Search for answers..." rows="5"></textarea> </fieldset> <input id="noop" type="text" name="noop" style="display: none !important"> <div id="hcaptcha" class="h-captcha" data-sitekey="a7005b27-2571-459b-9092-2b574566c44c" data-callback="onSubmitHCaptcha" data-close-callback="onCloseHCaptcha" data-error-callback="onCloseHCaptcha" data-size="invisible" ></div> <p class="hCaptchaDisclaimer">This site is protected by hCaptcha and its <a href="https://www.hcaptcha.com/privacy">Privacy Policy</a> and <a href="https://www.hcaptcha.com/terms">Terms of Service</a> apply.</p> </form> <button disabled tabindex="4" id="contact-form-submit" class="cpSubmit" type="button">Send</button> </div> </div> <script type="text/javascript" src="https://cdn.helpdocs.io/js/js.cookie.min.js?v=1732636207"></script> <script type="text/javascript" src="https://cdn.helpdocs.io/js/highlight.min.js?v=1732636207"></script> <script src="https://cdn.helpdocs.io/js/libs/hdanalytics.js?v=1732636207" type="text/javascript"></script> <script src="https://cdn.helpdocs.io/js/libs/hdthemeutils.js?v=1732636207" type="text/javascript"></script> <script src="https://cdn.helpdocs.io/js/libs/instantsearch.js?v=1732636207" type="text/javascript"></script> <script type="text/javascript"> window.hd_util_params = { disable_legacy_search_timers: true, enable_linking_headings: true, enable_zoomable_images: true, enable_back_to_top_button: true, enable_popups: true, enable_pre_languages: 'pre', relative_dates_selector: '.ahTime time', search_article_template: ` <div class="srHit scaleSmall"> <a class="srLink" data-article-id="\{\{article_id\}\}" href="\{\{relative_url\}\}"> <div class="srPath">\{\{category_titles\}\}</div> <h4 class="srHitTitle">\{\{title\}\}</h4> <p class="srHitDescription">\{\{description\}\}</p> </a> </div> `, search_enable_category_limiter: true }; </script> <!-- General HelpDocs template scripts --> <script type="text/javascript" async> function ready(fn) { if (document.readyState != 'loading') { fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') { fn(); } }); } } (function() { ready(function() { Array.prototype.forEach.call(document.querySelectorAll('img[src$=".gif"]'), function (gif) { // Listen for a click on the button gif.setAttribute('loading', 'lazy'); }); }); })(); function addClass(el, className) { if (!el || !className) return; if (el.classList) { el.classList.add(className); } else { el.className += ' ' + className; } } function removeClass(el, className) { if (el.classList) { el.classList.remove(className); } else { el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } } // Toggles menu bar SVG from 3 bars to a cross (function() { ready(function() { var mobileNav = document.querySelector('.hnMobileNavButton'); mobileNav.addEventListener('click', function() { if (mobileNav && mobileNav.classList.contains('active')) { removeClass(mobileNav, 'active'); } else { addClass(mobileNav, 'active'); } }); }); })(); // Adds keyboard shortcut function (Ctrl/Cmd + K) so that Mac/Windows will get the correct // control key, the keyboard shortcut focuses on keydown, and the shortcut element is only visible // when control is ready 🚀 (function() { ready(function() { // Define what type of OS is running and change the control symbol (Cmd or Ctrl) const isMac = navigator.userAgent.indexOf('Mac OS X') != -1; Array.prototype.forEach.call(document.querySelectorAll('.scShortcutMeta, .siShortcutMeta'), function (keyCmd) { keyCmd.textContent = isMac ? '⌘' : 'Ctrl'; }); // Bind to either command key + K to focus on search bar document.addEventListener('keydown', function (event) { if ((event.metaKey && event.key === 'k') || (event.ctrlKey && event.key === 'k')) { event.preventDefault(); document.getElementById('hd-query').focus(); } }); // Make the keyboard shortcut visible inside the search element after the command // has been determined try { const keyboardShortcut = document.querySelectorAll('.scShortcut, .siShortcut')[0]; if (keyboardShortcut) { keyboardShortcut.style.visibility = 'visible'; } else { return; } } catch (error) { console.log(error) } }); })(); // ** Add Hyperping status ** (function() { ready(function() { window.HDUtils.getHyperpingStatus('status.helpdocs.io'); }); })(); // ** Prepare for storing dark theme settings ** (function() { const DARK_MODE_CLASS_NAME = "dark-mode"; const DARK_MODE_CODEBLOCK_LINK_PREF_DARK = "https://cdn.helpdocs.io/css/highlightjs-github-gist-dark.min.css?v=1732636207"; const DARK_MODE_CODEBLOCK_LINK_PREF_LIGHT = "https://cdn.helpdocs.io/css/highlightjs-github-gist.min.css?v=1732636207"; const DARK_MODE_PREF_NAME = "io.helpdocs.darkmode"; const DARK_MODE_PREF_DARK = "dark"; const DARK_MODE_PREF_LIGHT = "light"; const VALID_DARK_MODE_PREFS = [DARK_MODE_PREF_LIGHT, DARK_MODE_PREF_DARK]; ready(function() { let pref = sessionStorage.getItem(DARK_MODE_PREF_NAME); if (!pref || VALID_DARK_MODE_PREFS.indexOf(pref) === -1) { const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); if (prefersDarkScheme.matches) { pref = DARK_MODE_PREF_DARK; } else { pref = DARK_MODE_PREF_LIGHT; } } if (pref === DARK_MODE_PREF_DARK) { document.body.classList.add(DARK_MODE_CLASS_NAME); } else { document.body.classList.remove(DARK_MODE_CLASS_NAME); } document.body.classList.add(DARK_MODE_CLASS_NAME + "-loaded"); // Set initial codeblock style based on default dark mode theme const dmCodeblockStyle = document.getElementById('gist-css'); if (pref === DARK_MODE_PREF_DARK && dmCodeblockStyle) { dmCodeblockStyle.href = DARK_MODE_CODEBLOCK_LINK_PREF_DARK; } else if (pref === DARK_MODE_PREF_LIGHT && dmCodeblockStyle) { dmCodeblockStyle.href = DARK_MODE_CODEBLOCK_LINK_PREF_LIGHT; } else { return; } // get theme on page load // Select the buttons Array.prototype.forEach.call(document.querySelectorAll('.dmLinkhnLink'), function (btn) { // Listen for a click on the button btn.addEventListener("click", function() { // Then toggle (add/remove) the .dark-mode class to the body document.body.classList.toggle(DARK_MODE_CLASS_NAME); const nextPref = document.body.classList.contains(DARK_MODE_CLASS_NAME) ? DARK_MODE_PREF_DARK : DARK_MODE_PREF_LIGHT; sessionStorage.setItem(DARK_MODE_PREF_NAME, nextPref); // Update the codeblock style based on dark mode const dmCodeblockStyle = document.getElementById('gist-css'); if (!dmCodeblockStyle) return; if (nextPref === DARK_MODE_PREF_DARK) { // toggling to dark dmCodeblockStyle.href = DARK_MODE_CODEBLOCK_LINK_PREF_DARK; } else { // toggling to light dmCodeblockStyle.href = DARK_MODE_CODEBLOCK_LINK_PREF_LIGHT; } }); }); }); })(); </script> <script type="text/javascript" src="https://cdn.helpdocs.io/js/libs/cookieconsent.min.js?v=1732636207"></script> <script type="text/javascript"> var cookieTimer; var disableCookies = function() { if (cookieTimer) return; cookieTimer = setInterval(function() { var allowList = [ "hd", "cookieconsent_status", ]; var allCookies = Cookies.get(); Object.keys(allCookies).forEach(function(key) { if (allowList.indexOf(key) > -1) return; Cookies.remove(key); Cookies.remove(key, { domain: '.helpdocs.local' }); Cookies.remove(key, { domain: '.helpdocs.io' }); Cookies.remove(key, { domain: window.location.hostname }); Cookies.remove(key, { domain: '.helpdocs.local', path: '' }); Cookies.remove(key, { domain: '.helpdocs.io', path: '' }); Cookies.remove(key, { domain: window.location.hostname, path: '' }); Cookies.remove(key, { domain: '.helpdocs.local', secure: true }); Cookies.remove(key, { domain: '.helpdocs.io', secure: true }); Cookies.remove(key, { domain: window.location.hostname, secure: true }); Cookies.remove(key, { domain: '.helpdocs.local', path: '', secure: true }); Cookies.remove(key, { domain: '.helpdocs.io', path: '', secure: true }); Cookies.remove(key, { domain: window.location.hostname, path: '', secure: true }); try { const [s, ...h] = window.location.hostname.split('.'); const hostname = '.' + h.join('.'); Cookies.remove(key, { domain: hostname }); Cookies.remove(key, { domain: hostname, path: '' }); Cookies.remove(key, { domain: hostname, secure: true }); Cookies.remove(key, { domain: hostname, path: '', secure: true }); } catch(e) {} }); }, 2000); }; var enableCookies = function() { if (!cookieTimer) return; clearInterval(cookieTimer); }; window.addEventListener('load', function() { var ccCookie = Cookies.get('cookieconsent_status'); if (!ccCookie || ccCookie === '') return; if (ccCookie === 'deny') disableCookies(); }); window.cookieconsent.hasTransition = false; window.cookieconsent.initialise({ domain: window.location.hostname, container: document.getElementsByTagName('body'), content: { header: '🍪 Your cookie options', message: 'We use cookies to improve your experience', dismiss: 'Dismiss', allow: 'Allow', deny: 'Deny', link: 'Learn more', href: 'https://www.helpdocs.io/privacy', }, layout: 'basic-header', revokable: false, type: 'info', position: 'bottom-left', onInitialise: function (status) { var type = this.options.type; var didConsent = this.hasConsented(); if (type == 'opt-in' && !didConsent) { // disable cookies if not opted in, since we require explicit consent disableCookies(); }; }, onStatusChange: function(status, chosenBefore) { // we don't need to check for type since both methods are idempotent if (this.hasConsented()) { enableCookies(); } else { disableCookies(); } } }); // onInitialise only fires if user has already set consent status so we need to set // default deny for opt-in type here if (window.cookieconsent.hasInitialised) { const type = 'info'; const consentStatus = window.cookieconsent.utils.getCookie("cookieconsent_status"); if (type === 'opt-in' && !consentStatus) { disableCookies(); } } </script> </body> </html>