Lighthouse - HelpDocs Support

<!DOCTYPE html> <html lang="en"> <head> <title>Lighthouse - HelpDocs Support</title> <meta name="description" content="Lighthouse brings self-serve help to your customers inside your app."> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="https://files.helpdocs.io/Ytt2uahFxY/favicon.svg"> <link rel="canonical" href="https://support.helpdocs.io/category/9bixmsq22q-lighthouse"> <link rel="stylesheet" href="https://cdn.helpdocs.io/css/cookieconsent.min.css?v=1740055050"> <link id="gist-css" rel="stylesheet" href="https://cdn.helpdocs.io/css/highlightjs-github-gist.min.css?v=1740055050" async> <link rel="stylesheet" href="https://cdn.helpdocs.io/css/v5/startup.min.css?v=1740055050"> <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=1740055050">'); } </script>  <meta name="slack-app-id" content="A3Y1X4NG5">  <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(/\&lt\;\&lt\;/gi, '{{').replace(/\&gt\;\&gt\;/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>  <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="9bixmsq22q" 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-category-title="Lighthouse" data-no-articles-found-string="No docs found" data-domain="support.helpdocs.io" > <a href="#categoryContent" class="skip-to-main-content-link">Skip to main content</a> <div id="main" data-hd-template="startupv5"> <div id="overlay"></div> <section id="homeBanner">  <header id="homeNav"> <nav role="navigation"> <div class="navLeft">  <a class="hnBranding" href="/"> <img class="hnLogo" src="https://files.helpdocs.io/Ytt2uahFxY/logo.svg?t=1716305847007" alt="Support Logo" /> <span class="hnBrand">Support</span> </a> </div>  <section id="search-container" class="smallSearchContainer" aria-label="Search section" > <div class="smallInstantSearch" id="instant-search"> <div class="siSearchIcon"> <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="category-limiter" style="display: none; max-width: 30%;"> <select id="category-limiter" class="form-control" style="width: 100%"> <option value="-">Knowledge Base</option> <option value="9bixmsq22q" selected="selected">Lighthouse</option> </select> </div> <div class="siShortcut"> <kbd class="siShortcutMeta">Ctrl</kbd> <kbd>K</kbd> </div> </div>  <section id="searchresults" class="smallSearchHits" aria-label="Search results"> <div class="srLeft"></div> <div class="srHits" id="hits" aria-label="Search hit"></div> <div class="srRight"></div> </section> </section>  <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"> <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>  <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>  <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>  <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>  <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> </section> <div class="container-fluid"> <div id="content"> <main id="categoryContent" class="three-col-large-center-focused-grid"> <section id="breadcrumbs">  <div class="bcList"> <ol vocab="https://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="/" aria-label="Breadcrumb link to Knowledge Base"> <span property="name">Knowledge Base</span> </a> <meta property="position" content="1" /> </li> <svg class="bcIcon" height="8" viewBox="0 0 6 8" width="6" xmlns="http://www.w3.org/2000/svg"> <path d="m-19.594 240 5 3.575-5 3.425" fill="none" stroke="#808080" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.094 -239.5)"/> </svg> <i class="fa fa-folder breadcrumb-icon"></i> <span property="name">Lighthouse</span> <li> <span></span> </li> </ol> </div> </section> <section id="content" class="three-col-center"> <div class="cDetails"> <div class="cDetailsTitle"> <i class="category-icon "></i> <h1 class="cTitle">Lighthouse</h1> <p class="cDesc">Lighthouse brings self-serve help to your customers inside your app.</h2> </div> <div class="cDetailsMeta"> <div class="cDetailsMetaAuthors"> <div class="cDetailsAuthorship"> <div class="cDetailsAuthorshipWrapper"> <div class="cDetailsAuthors"> <img class="cDetailsAuthorshipAvatar" alt="author avatar" src="https://www.gravatar.com/avatar/2f2efe5514ffb689730279ac519c0757?d=mm&s=150" alt="Taylor Sloane"> <img class="cDetailsAuthorshipAvatar" alt="author avatar" src="https://files.helpdocs.io/Ytt2uahFxY/other/1635178197130/mx-m-mvtq-400-x-400.jpg" alt="River Sloane"> </div> <div class="cDetailsAuthorshipMeta"> <span class="cDetailsAuthorshipArticleCount"> 5 docs </span> <span class="cDetailsAuthorshipAuthorCount"> by 2 team members </span> </div> </div> </div> </div> </div> </div> <section id="articles" class="three-col-center"> <div class="aCard card"> <a class="aCardLink cardLink" href="/article/ykv7l5jthy-lighthouse-widget-api"> <h3 class="aCardTitle cardTitle"> Lighthouse Widget API </h3> <p class="aCardDesc">You can customize the behaviour and appearance of Lighthouse through the widget API. Learn how to do things like change the primary color, navigate to a new article, or hide the widget completely.</p> </a> </div> <div class="aCard card"> <a class="aCardLink cardLink" href="/article/cgz4k4miyd-understanding-lighthouse"> <h3 class="aCardTitle cardTitle"> Understanding Lighthouse </h3> <p class="aCardDesc">Lighthouse makes it plain sailing for your users to help themselves without ever leaving your app or website. Here's the various states and actions users will see within your widget.</p> </a> </div> <div class="aCard card"> <a class="aCardLink cardLink" href="/article/pfwvx27vjq-integrating-lighthouse-with-live-chat-providers"> <h3 class="aCardTitle cardTitle"> Integrating Lighthouse with Live Chat Providers </h3> <p class="aCardDesc">Lighthouse integrates with some chat widgets to provide an extra layer of ticket deflection so customers can find helpful articles before getting in touch. When integrating the two snippets customers…</p> </a> </div> <div class="aCard card"> <a class="aCardLink cardLink" href="/article/6ksp87dzaj-installing-lighthouse"> <h3 class="aCardTitle cardTitle"> Installing Lighthouse </h3> <p class="aCardDesc">Lighthouse is a widget that helps you assist your users within your app whenever they get stuck. This means your users can help themselves without ever leaving your site and you'll reduce repetitive support tickets.</p> </a> </div> <div class="aCard card"> <a class="aCardLink cardLink" href="/article/rmklv9u39d-adding-lighthouse-to-webflow"> <h3 class="aCardTitle cardTitle"> Adding Lighthouse Trigger Buttons to Webflow </h3> <p class="aCardDesc">Using Webflow for your site but want to open up an article or category when clicking on an element with HelpDocs Lighthouse? You'll need to implement some custom code to get it working properly. This…</p> </a> </div> </section> </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; border-top: 1px solid #E6E6E6; gap: 10vw; height: 100px; width:100%; position: relative; left: 0; bottom: 0;" >  <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=1740055050" 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>  </ul> </div> </footer>  <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="9bixmsq22q" 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=1740055050"></script> <script type="text/javascript" src="https://cdn.helpdocs.io/js/highlight.min.js?v=1740055050"></script> <script src="https://cdn.helpdocs.io/js/libs/hdanalytics.js?v=1740055050" type="text/javascript"></script> <script src="https://cdn.helpdocs.io/js/libs/hdthemeutils.js?v=1740055050" type="text/javascript"></script> <script src="https://cdn.helpdocs.io/js/libs/instantsearch.js?v=1740055050" 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>  <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=1740055050"; const DARK_MODE_CODEBLOCK_LINK_PREF_LIGHT = "https://cdn.helpdocs.io/css/highlightjs-github-gist.min.css?v=1740055050"; 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.documentElement.classList.add(DARK_MODE_CLASS_NAME); } else { document.documentElement.classList.remove(DARK_MODE_CLASS_NAME); } document.documentElement.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 root document.documentElement.classList.toggle(DARK_MODE_CLASS_NAME); const nextPref = document.documentElement.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=1740055050"></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>

CINXE.COM

Lighthouse - HelpDocs Support