CINXE.COM
Build Mobile & App Search, fast | Algolia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><link rel="canonical" href="https://www.algolia.com/use-cases/mobile-search" /><link rel="alternate" hreflang="en" href="https://www.algolia.com/use-cases/mobile-search" /> <link rel="alternate" hreflang="de" href="https://www.algolia.com/de/use-cases/mobile-search" /> <link rel="alternate" hreflang="fr" href="https://www.algolia.com/fr/use-cases/mobile-search" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Build Mobile & App Search, fast | Algolia</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport"> <!--Global Level META DATA Here <meta charset="utf-8"> Niket --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"> <meta name="og:sitename" content="Algolia"> <meta name="og:type" content="website"> <meta name="og:image" content="https://www.algolia.com/files/live/sites/algolia-assets/files/opengraph/algolia-opengraph-image.jpg"> <meta name="twitter:site" content="@algolia"> <meta name="twitter:domain" content="www.algolia.com"> <meta name="twitter:card" content="summary_large_image"> <meta name="msapplication-TileColor" content="#003DFF"> <meta name="theme-color" content="#003DFF"> <meta name="google-site-verification" content="unmVpnHdKJyjZSxuXKPyWxx8HRmb9VCCaBHQw4uCsW4"> <script type="application/ld+json"> [ { "@context": "http://schema.org", "@type": "Organization", "name": "Algolia", "url": "https://www.algolia.com/", "logo": "https://www.algolia.com/algolia-logo-blue.svg", "image": "https://www.algolia.com/files/live/sites/algolia-assets/files/opengraph/algolia-opengraph-image.jpg", "description": "Fast, reliable and modern Search & Discovery", "address": { "@type": "PostalAddress", "streetAddress": "3790 El Camino Real, Unit #518", "addressLocality": "Palo Alto", "addressRegion": "California", "postalCode": "94306", "addressCountry": "USA" }, "sameAs": [ "https://www.linkedin.com/company/algolia/", "https://www.facebook.com/algolia/", "https://www.github.com/Algolia/", "https://www.youtube.com/user/Algolia/", "https://www.twitter.com/Algolia/", "https://www.instagram.com/algoliahq/" ], "contactPoint" : [ { "@type" : "ContactPoint", "url": "https://www.algolia.com/demorequest/", "contactType": "prospects" }, { "@type" : "ContactPoint", "url": "https://www.algolia.com/contact/enterprise/", "contactType": "enterprise" }, { "@type" : "ContactPoint", "url": "https://www.algolia.com/for-open-source/", "contactType": "open source" } ] }, { "@context": "http://schema.org", "@type": "WebSite", "url": "https://www.algolia.com/", "name": "Algolia", "alternateName": "AlgoliaSearch", "potentialAction": [{ "@type": "SearchAction", "target": "https://www.algolia.com/search/?query={search_term_string}", "query-input": "required name=search_term_string" }] }, { "@context": "http://schema.org", "@type": "SpeakableSpecification", "xpath": [ "/html/head/title", "/html/head/meta[@name='description']/@content" ] } ] </script><!--Global Level META DATA Ends Here--> <!--Page Level META DATA--> <meta name="description" content="Engage your audience on the device they use most - mobile - with the help of our APIs, which help you create AI-driven mobile & app native search experiences."> <meta name="og:title" content="Mobile & App Search"> <meta name="og:description" content="Engage your audience on the device they use most - mobile - with the help of our APIs, which help you create AI-driven mobile & app native search experiences."> <meta name="og:url" content="/cms/render/live/en/sites/www/home/use-cases/mobile-search.html"> <meta name="og:image" content="https://www.algolia.com/files/live/sites/algolia-assets/files/opengraph/algolia-opengraph-image.jpg"> <meta name="twitter:title" content="Mobile & App Search"> <meta name="twitter:description" content="Engage your audience on the device they use most - mobile - with the help of our APIs, which help you create AI-driven mobile & app native search experiences."> <meta name="twitter:image" content="https://www.algolia.com/files/live/sites/algolia-assets/files/opengraph/algolia-opengraph-image.jpg"> <!--Meta Data Section Ends Here--> <link rel="icon" type="image/png" sizes="32x32" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/light-mode/favicon-32x32.png" media="(prefers-color-scheme: light)"/> <link rel="icon" type="image/png" sizes="16x16" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/light-mode/favicon-16x16.png" media="(prefers-color-scheme: light)"/> <link rel="manifest" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/light-mode/site.webmanifest" media="(prefers-color-scheme: light)"/> <link rel="mask-icon" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/light-mode/safari-pinned-tab.svg" media="(prefers-color-scheme: light)" color="#003DFF"/> <link rel="apple-touch-icon" sizes="180x180" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/dark-mode/apple-touch-icon.png" media="(prefers-color-scheme: dark)"/> <link rel="icon" type="image/png" sizes="32x32" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/dark-mode/favicon-32x32.png" media="(prefers-color-scheme: dark)"/> <link rel="icon" type="image/png" sizes="16x16" href="/files/live/sites/algolia-assets/files/algoliaweb-static-favicons/dark-mode/favicon-16x16.png" media="(prefers-color-scheme: dark)"/><script type="text/javascript" src="https://cdn.cookielaw.org/consent/5e9f5149-bde8-4a13-b973-b7a9385e8ebb-test/OtAutoBlock.js" ></script> <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="5e9f5149-bde8-4a13-b973-b7a9385e8ebb-test" ></script> <script type="text/javascript"> function OptanonWrapper() { } </script><script> !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="eEj3ERCjH7KxK1jEMjQF7uzmtZGALFHn";;analytics.SNIPPET_VERSION="4.15.3"; analytics.load("eEj3ERCjH7KxK1jEMjQF7uzmtZGALFHn"); //"eEj3ERCjH7KxK1jEMjQF7uzmtZGALFHn" analytics.page(); }}(); </script><link href="https://fonts.googleapis.com/css2?family=Inter&family=Sora:wght@300;400;600&display=swap" rel="stylesheet"> <link rel="icon" type="image/x-icon" href="/files/live/sites/algolia-assets/files/icons/algolia-logo-for-favicon.svg"> <script src="/modules/algolia-base-template/javascript/header.js"></script><script src="/modules/algolia-base-template/javascript/codeExchangeSearch.js"></script> <script type="application/json" id="jahia-data-ctx">{"contextPath":"","lang":"en","uilang":"en","siteUuid":"5dd2fdd4-a9a0-46fe-8b1b-f7457ee77e1d","wcag":true,"ckeCfg":""}</script> <script type="application/json" id="jahia-data-ck">{"path":"/modules/ckeditor/javascript/","lng":"en_US"}</script> <script src="/javascript/initJahiaContext.js"></script> <link id="staticAssetCSS0" rel="stylesheet" href="/generated-resources/a413ad366a4b996bbf66b5c58b570dc.min.css" media="screen" type="text/css"/> <script id="staticAssetJavascript0" src="/generated-resources/505796149d873daecc149df7dadff3f6.min.js" ></script> <script type="text/javascript" nonce="NmE5ZDg2NGEtNGU4Yy00NmIyLWFmMWYtOTQxNThjZDJiMDEw"> window.digitalDataOverrides = []; window.digitalData = { "scope": "www", "site": { "siteInfo": { "siteID": "5dd2fdd4-a9a0-46fe-8b1b-f7457ee77e1d" } }, "page": { "pageInfo": { "pageID": "db020df5-7490-4702-95de-d398fbe6dc7c", "nodeType": "jnt:page", "pageName": "Mobile & App Search", "pagePath": "/sites/www/home/use-cases/mobile-search", "templateName": "home", "destinationURL": document.location.origin + document.location.pathname, "destinationSearch": document.location.search, "referringURL": null, "language": "en", "categories": [], "tags": [] }, "consentTypes":[ ] }, "events": [], "contextServerPublicUrl": "/modules/jexperience/proxy/www", "sourceLocalIdentifierMap" : {}, "wemInitConfig": { "contextServerUrl" : "/modules/jexperience/proxy/www", "isPreview": false, "timeoutInMilliseconds": 1500, "dxUsername" : "guest", "contextServerCookieName" : "context-profile-id", "activateWem": true, "enableWemActionUrl": "/en/sites/www.enableWem.do", "requiredProfileProperties": ['j:nodename'], "requiredSessionProperties": [], "requireSegments": false, "requireScores": false }, }; // Expose Wem init functions wem.init(); </script> <script type="application/json" id="jahia-data-aggregatedjs">{"scripts":["/modules/jexperience/javascript/jexperience/dist/3_5_1/wem.min.js","/modules/ad-base-components/javascript/component/ctaGradient.js","/modules/ad-base-components/javascript/component/logoPopover.js","/modules/algolia-base-template/javascript/screenTab.js"]}</script> <script type="text/javascript" src="/modules/CsrfServlet"></script> </head> <body data-tracking="mobile-search" class=" font-inter text-base" data-site-theme="dark" data-parent-theme="light" data-page-theme="light" data-languageparam="websitelanguage" data-indexnameprefix="ALGOLIA_WWW" > <!-- Header Component --> <div class="light inset-0 z-[999] sticky "> <!-- Over Ride Footer Logic is written in footer-logic--> <li id="languageSwitcher" class=" flex items-center languageSwitcher border-0 border-l-1 border-solid py-1 lg:pl-4 pl-0 border-grey-700 z-[99] hidden"> <div class="lg:relative lg:flex lg:items-center"> <button href="javascript:void(0);" class="dropdown-toggle flex cursor-pointer appearance-none items-center rounded-lg border-0 lg:p-1 text-grey-900 gap-1" aria-haspopup="listbox" aria-expanded="false" id="dropdownMenuLink" data-bs-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1E59FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-grey-900 dark:text-white"> <circle cx="12" cy="12" r="10"></circle> <line x1="2" y1="12" x2="22" y2="12"></line> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"> </path> </svg> <p class="font-inter font-normal leading-normal lg:text-sm text-xs dark:text-white text-grey-900 m-0 lg:mx-2 capitalize"> <span id="showDefaultLanguage"></span> </p> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-grey-900 dark:text-white"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="lg:absolute lg:right-1 lg:top-[42px] languageList" hidden> <ul class="z-max w-[150px] list-none overflow-hidden rounded-lg p-0 shadow-small-light" role="listbox"> <a title="Switch to " class="de font-inter leading-normal lg:text-sm text-xs text-grey-900 m-0 capitalize" href="/de/use-cases/mobile-search/"> <li data-language-code="de" class="dropdown-item dropdown-item w-[100px] cursor-pointer p-4 bg-grey-100 hover:bg-grey-200 w-full"> Deutsch</li> </a> <a href="#" class="en font-inter leading-normal lg:text-sm text-xs text-xenon-600 m-0 capitalize"> <li data-language-code="en" class="active bg-xenon-200 dropdown-item w-[100px] cursor-pointer p-4 w-full"> English</li> </a> <a title="Switch to " class="fr font-inter leading-normal lg:text-sm text-xs text-grey-900 m-0 capitalize" href="/fr/use-cases/mobile-search/"> <li data-language-code="fr" class="dropdown-item dropdown-item w-[100px] cursor-pointer p-4 bg-grey-100 hover:bg-grey-200 w-full"> français</li> </a> </ul> </div> </div> </li> <script> document.addEventListener("DOMContentLoaded", function() { let activeElement = document.querySelector("#languageSwitcher .active"); const languageCode = document.querySelector('#languageSwitcher .active').getAttribute("data-language-code"); function updateDefaultLanguageText() { if (activeElement && activeElement.textContent) { const defaultLanguage = activeElement.textContent.trim(); const showDefaultLanguage = document.querySelector("#languageSwitcher #showDefaultLanguage"); showDefaultLanguage.classList.add(languageCode) if (window.matchMedia("(max-width: 768px)").matches) { showDefaultLanguage.innerHTML = defaultLanguage; } else { showDefaultLanguage.innerHTML = defaultLanguage.length > 3 ? defaultLanguage.substring(0, 3) : defaultLanguage; } } } const toggleButton = document.querySelector("#dropdownMenuLink"); const content = document.querySelector(".languageList"); const languageDropButton = document.querySelector('.languageSwitcher .dropdown-toggle'); languageDropButton.addEventListener("click", function (event) { event.stopPropagation(); if (content.hasAttribute('hidden')) { content.removeAttribute('hidden'); languageDropButton.setAttribute("aria-expanded", "true"); } else { content.setAttribute('hidden', ''); languageDropButton.setAttribute("aria-expanded", "false"); } }); document.body.addEventListener("click", function () { content.setAttribute('hidden', '') }); function appendLanguageSwitcher() { const languagesNode = document.querySelector(".languageSwitcher"); const topNavDesktop = document.querySelector(".header__top-nav ul"); const topNavMobile = document.querySelector(".header__top-nav.mobile ul"); if (window.matchMedia("(max-width: 768px)").matches) { if (topNavMobile && languagesNode) { if (!topNavMobile.querySelector(".languageSwitcher")) { topNavMobile.appendChild(languagesNode); } } } else { if (topNavDesktop && languagesNode) { if (!topNavDesktop.querySelector(".languageSwitcher")) { topNavDesktop.appendChild(languagesNode); } } } languagesNode.classList.remove('hidden'); updateDefaultLanguageText(); } appendLanguageSwitcher(); window.addEventListener("resize", appendLanguageSwitcher); window.addEventListener("resize", updateDefaultLanguageText); }); // Function to add a trailing slash only if conditions are met // function addTrailingSlash(url) { // // Check if the URL contains '#' or '.' and return without modification // if (url.includes('#') || url.includes('.')) { // return url; // } // // Check if the last character is not a '/' // if (url.charAt(url.length - 1) !== '/') { // // Add a '/' to the end of the URL // url += '/'; // } // return url; // } // // Function to update all <a> elements on the page // function updateAnchorHrefs() { // // Get all <a> elements in the document // const anchors = document.querySelectorAll('a[href]'); // // Loop through each <a> element // anchors.forEach(anchor => { // let href = anchor.getAttribute('href'); // Get the current href value // // Only update if href starts with a valid path (avoid mailto, tel, etc.) // if (href.startsWith('http') || href.startsWith('/')) { // let updatedHref = addTrailingSlash(href); // Add trailing slash if necessary // anchor.setAttribute('href', updatedHref); // Update the href attribute // } // }); // } // // Call the function to update <a> hrefs when the DOM is fully loaded // document.addEventListener('DOMContentLoaded', updateAnchorHrefs); </script><header data-tracking="" class="header-bg after:lg:block after:hidden inset-0 z-[999] sticky lg:border-b lg:border-grey-200 text-white dark:bg-xenon-900 bg-white"> <div class="header__top-nav h-10 justify-between hidden lg:flex max-w-[1440px] mx-auto lg:px-14 px-4"> <a href="/lp/trends-report-how-search-teams-work" data-gtm="true" class="no-underline flex items-center no-underline"> <p class="font-inter font-normal leading-1.5 text-sm text-grey-900 my-0 mr-2 font-semibold"> <span class="text-xenon-400">New research: </span></p> <p class="font-inter font-normal leading-1.5 text-sm dark:text-white text-grey-900 m-0">How to build exceptional search experiences</p> <span class="group inline-flex cursor-pointer items-center no-underline lg:ml-4"> <span class="font-sora font-semibold leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px] dark:text-white text-grey-900"> <span class="hidden text-sm lg:block">Learn more</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white shrink-0 transition-all duration-[400ms] ease-in group-hover:scale-[1.1] text-xenon-400 w-6 h-6 ml-3"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span> </a> <ul class="flex items-center justify-end"> <li id="" data-tracking="" class="border-r border-solid last:border-r-0 border-grey-700 "> <a href="/about" data-finalurl="/cms/render/live/en/sites/www/home/about.html" class="flex px-4 no-underline text-grey-900 dark:text-white text-sm font-normal hover:font-bold"> <span>Company</span> </a> </li><li id="" data-tracking="" class="border-r border-solid last:border-r-0 border-grey-700 "> <a href="https://partners.algolia.com/" data-finalurl="https://partners.algolia.com/" class="flex px-4 no-underline text-grey-900 dark:text-white text-sm font-normal hover:font-bold"> <span>Partners</span> </a> </li><li id="" data-tracking="" class="border-r border-solid last:border-r-0 border-grey-700 "> <a href="https://support.algolia.com/" data-finalurl="https://support.algolia.com/" class="flex px-4 no-underline text-grey-900 dark:text-white text-sm font-normal hover:font-bold"> <span>Support</span> </a> </li><li id="mainLogin" data-tracking="" class="border-r border-solid last:border-r-0 border-grey-700 hidden"> <a href="https://dashboard.algolia.com/users/sign_in" data-finalurl="https://dashboard.algolia.com/users/sign_in" class="flex px-4 no-underline text-grey-900 dark:text-white text-sm font-normal hover:font-bold"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/person_blue.svg" alt="" /> <span>Login</span> </a> </li><li id="mainLogout" data-tracking="" class="border-r border-solid last:border-r-0 border-grey-700 hidden"> <a href="https://dashboard.algolia.com/users/sign_out" data-finalurl="https://dashboard.algolia.com/users/sign_out" class="flex px-4 no-underline text-grey-900 dark:text-white text-sm font-normal hover:font-bold"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/Check%20Square.svg" alt="" /> <span>Logout</span> </a> </li></ul> </div> <!-- Start This is only visible in all Child Page Header Display--> <!-- End This is only visible in all Child Page Header Display--> <div class="header__middle-bar relative h-20 flex items-center lg:px-14 px-4 pr-0 max-w-[1440px] mx-auto"> <div class="logo flex shrink-0 items-center logoPopover cursor-pointer"> <a href="https://www.algolia.com/" class="mr-3"> <svg class="block h-6 w-6 lg:hidden" width="501" height="501" viewBox="0 0 501 501" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Algolia mark white</title> <path d="M250.926 0C114.306 0 2.926 110.16.956 246.32c-2 138.29 110.19 252.87 248.49 253.67 42.71.25 83.85-10.2 120.38-30.05 3.56-1.93 4.11-6.83 1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5 10.85-53.21 16.39-81.76 16.04-111.75-1.37-202.04-94.35-200.26-206.1 1.76-110.33 92.06-199.55 202.8-199.55h202.83v360.53l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43 1.31-18.47 24.46-48.56 39.67-81.98 37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28 39.65-101.58 94.07-101.58 49.21 0 89.74 37.88 93.97 86.01.38 4.28 2.31 8.28 5.53 11.13l29.97 26.57c3.4 3.01 8.8 1.17 9.63-3.3 2.16-11.55 2.92-23.6 2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23 58.18-150.37 137.35-2.09 77.15 61.12 143.66 138.28 145.36 32.21.71 62.07-9.42 86.2-26.97l150.36 133.29c6.45 5.71 16.62 1.14 16.62-7.48V9.49c0-5.24-4.25-9.49-9.49-9.49H250.926Z" fill="#fff"></path> </svg> <svg class="hidden lg:w-auto lg:block lg:h-[25px]" width="2197" height="501" viewBox="0 0 2197 501" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Algolia logo white</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M1070.38 275.47V6.08c0-3.63-3.24-6.39-6.82-5.83l-50.46 7.94a5.912 5.912 0 0 0-4.99 5.84l.17 273.22c0 12.92 0 92.7 95.97 95.49 3.33.1 6.09-2.58 6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72l.01-.02Z" fill="#fff"></path> <path d="M1902.56 104.9h-50.78a5.9 5.9 0 0 0-5.9 5.9v266.1c0 3.259 2.64 5.9 5.9 5.9h50.78c3.25 0 5.9-2.641 5.9-5.9V110.8c0-3.258-2.65-5.9-5.9-5.9Z" fill="#fff"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1851.78 71.55h50.77c3.26 0 5.9-2.64 5.9-5.9V6.07c0-3.62-3.24-6.39-6.82-5.83l-50.77 7.95a5.902 5.902 0 0 0-4.99 5.83v51.62c0 3.26 2.64 5.9 5.9 5.9l.01.01ZM1764.03 275.47V6.08c0-3.63-3.24-6.39-6.82-5.83l-50.46 7.94a5.912 5.912 0 0 0-4.99 5.84l.17 273.22c0 12.92 0 92.7 95.97 95.49 3.33.1 6.09-2.58 6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72l.01-.02ZM1631.95 142.89c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78 0-36.15 3.17-51.92 9.85-15.59 6.66-29.29 16.05-40.76 28.31-11.47 12.23-20.38 26.87-26.76 44.03-6.38 17.17-9.24 37.37-9.24 58.36 0 20.99 3.19 36.87 9.55 54.21 6.38 17.32 15.14 32.11 26.45 44.36 11.29 12.23 24.83 21.62 40.6 28.46 15.77 6.83 40.12 10.33 52.4 10.48 12.25 0 36.78-3.82 52.7-10.48 15.92-6.68 29.46-16.23 40.78-28.46 11.29-12.25 20.05-27.04 26.25-44.36 6.22-17.34 9.24-33.22 9.24-54.21 0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03h.02Zm-44.43 163.75c-11.47 15.75-27.56 23.7-48.09 23.7-20.55 0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2 0-26.89 5.59-49.14 17.06-64.87 11.45-15.75 27.54-23.52 48.07-23.52 20.55 0 36.63 7.78 48.09 23.52 11.47 15.57 17.36 37.98 17.36 64.87 0 27.19-5.72 45.3-17.19 61.2h.01ZM894.416 104.9h-49.33c-48.36 0-90.91 25.48-115.75 64.1-14.52 22.58-22.99 49.63-22.99 78.73 0 44.89 20.13 84.92 51.59 111.1 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 1.23 0 2.46-.03 3.68-.09.36-.02.71-.05 1.07-.07.87-.05 1.75-.11 2.62-.2.34-.03.68-.08 1.02-.12.91-.1 1.82-.21 2.73-.34.21-.03.42-.07.63-.1 32.89-5.07 61.56-30.82 70.9-62.81v57.83c0 3.26 2.64 5.9 5.9 5.9h50.42c3.26 0 5.9-2.64 5.9-5.9V110.8c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0 206.92c-12.2 10.16-27.97 13.98-44.84 15.12-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-42.24 0-77.12-35.89-77.12-79.37 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33v142.83ZM2133.97 104.9h-49.33c-48.36 0-90.91 25.48-115.75 64.1-14.52 22.58-22.99 49.63-22.99 78.73 0 44.89 20.13 84.92 51.59 111.1 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 1.23 0 2.46-.03 3.68-.09.36-.02.71-.05 1.07-.07.87-.05 1.75-.11 2.62-.2.34-.03.68-.08 1.02-.12.91-.1 1.82-.21 2.73-.34.21-.03.42-.07.63-.1 32.89-5.07 61.56-30.82 70.9-62.81v57.83c0 3.26 2.64 5.9 5.9 5.9h50.42c3.26 0 5.9-2.64 5.9-5.9V110.8c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0 206.92c-12.2 10.16-27.97 13.98-44.84 15.12-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-42.24 0-77.12-35.89-77.12-79.37 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33v142.83ZM1314.05 104.9h-49.33c-48.36 0-90.91 25.48-115.75 64.1-11.79 18.34-19.6 39.64-22.11 62.59a148.518 148.518 0 0 0 .05 32.73c4.28 38.09 23.14 71.61 50.66 94.52 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 17.99 0 34.61-5.93 48.16-15.97 16.29-11.58 28.88-28.54 34.48-47.75v50.26h-.11v11.08c0 21.84-5.71 38.27-17.34 49.36-11.61 11.08-31.04 16.63-58.25 16.63-11.12 0-28.79-.59-46.6-2.41-2.83-.29-5.46 1.5-6.27 4.22l-12.78 43.11c-1.02 3.46 1.27 7.02 4.83 7.53 21.52 3.08 42.52 4.68 54.65 4.68 48.91 0 85.16-10.75 108.89-32.21 21.48-19.41 33.15-48.89 35.2-88.52V110.8c0-3.26-2.64-5.9-5.9-5.9h-56.32.01Zm0 64.1s.65 139.13 0 143.36c-12.08 9.77-27.11 13.59-43.49 14.7-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-1.32 0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33-.01Z" fill="#fff"></path> <path d="M249.826.17C113.296.17 1.996 110.25.026 246.32c-2 138.19 110.12 252.7 248.33 253.5 42.68.25 83.79-10.19 120.3-30.03 3.56-1.93 4.11-6.83 1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48 10.84-53.17 16.38-81.71 16.03-111.68-1.37-201.91-94.29-200.13-205.96 1.76-110.26 92-199.41 202.67-199.41h202.69v360.28l-115-102.18c-3.72-3.31-9.42-2.66-12.42 1.31-18.46 24.44-48.53 39.64-81.93 37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24 39.63-101.52 94-101.52 49.18 0 89.68 37.85 93.91 85.95.38 4.28 2.31 8.27 5.52 11.12l29.95 26.55c3.4 3.01 8.79 1.17 9.63-3.3 2.16-11.55 2.92-23.58 2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13 58.14-150.27 137.25-2.09 77.1 61.08 143.56 138.19 145.26 32.19.71 62.03-9.41 86.14-26.95l150.26 133.2c6.44 5.71 16.61 1.14 16.61-7.47V9.65c0-5.24-4.24-9.48-9.48-9.48h-240.36Z" fill="#fff"></path> </svg> </a> </div> <button type="button" id="toggleMobileNav" class="flex lg:hidden text-white items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="block h-5 w-5 dark:text-white text-xenon-600"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="block h-5 w-5 dark:text-white text-xenon-600 hidden"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> <span class="toggleBtnName ml-2 font-inter font-medium uppercase leading-1.5 text-sm lg:text-base dark:text-white text-grey-900 ">Menu</span> </button> <!-- This is only visible in Home Page Header for Configuration--> <ul class="header__nav px-4 hidden lg:flex lg:flex-wrap lg:flex-row w-full lg:ml-6 xl:ml-10 relative max-lg:h-screen max-lg:overflow-auto pb-40 lg:pb-0"> <li data-tracking="" class="lg:mr-3 xl:mr-6 flex flex-col lg:flex-row items-center last:lg:mr-0 border-b-[1px] border-grey-200 lg:border-none"> <button data-tracking="" type="button" class="font-inter font-normal w-full py-4 lg:py-7 lg:px-0 text-left dark:text-white text-grey-900 lg:text-sm xl:text-base dropdown-link flex justify-between lg:hover:text-xenon-600">Solutions<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dropdown-link-caret block lg:hidden shrink-0"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="dropdown-menu lg:shadow-md lg:absolute top-full flex flex-col md:flex-row gap-10 px-3 md:p-7 rounded-lg lg:w-max opacity-0 invisible lg:bg-white"> <div class="lg:first:border-r border-grey-200 first:pr-8"> <!-- --> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/products/ai-search" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-search.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/ai-blue.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">AI Search</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> The results users need to see</div> </li><li data-tracking=""> <a href="/products/ai-browse" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-browse.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/browse-blue.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">AI Browse</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> Category and collection pages built by AI</div> </li><li data-tracking=""> <a href="/products/ai-recommendations" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-recommendations.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/recommendations-blue.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">AI Recommendations</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> Suggestions anywhere in the user journey</div> </li><li data-tracking=""> <a href="/products/features/personalization" data-finalurl="/cms/render/live/en/sites/www/home/products/features/personalization.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/group_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Advanced Personalization</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> Tailored experiences drive profitability</div> </li><li data-tracking=""> <a href="/industries/ecommerce/digital-merchandising" data-finalurl="/cms/render/live/en/sites/www/home/industries/ecommerce/digital-merchandising.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/local_mall_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Merchandising Studio</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> Data-enhanced customer experiences, without code</div> </li><li data-tracking=""> <a href="/products/features/analytics" data-finalurl="/cms/render/live/en/sites/www/home/products/features/analytics.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/pie-blue.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Analytics</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> All your insights in one dashboard</div> </li><li data-tracking=""> <a href="/developers/search-ui" data-finalurl="/cms/render/live/en/sites/www/home/developers/search-ui.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/space_dashboard_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">UI Components</span> </a> <div class="text-zinc-400 lg:text-sm lg:text-grey-400 lg:lg:font-normal ml-5"> Pre-built components for custom journeys</div> </li><li data-tracking=""> <a href="/products" data-finalurl="/cms/render/live/en/sites/www/home/products.html" class="flex items-center py-2"> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Read more</span> <img class="ml-2" height="24" width="24" src="/files/live/sites/algolia-assets/files/icons/arrowRightCircle.svg" alt="" /> </a> </li></ul></div> <div class="lg:first:border-r border-grey-200 first:pr-8"> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">INTEGRATIONS</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/search-solutions/adobe-commerce-magento" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/adobe-commerce-magento.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/adobe.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Adobe Commerce</span> </a> </li><li data-tracking=""> <a href="/search-solutions/adobe-experience-manager" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/adobe-experience-manager.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/adobe.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Adobe AEM</span> </a> </li><li data-tracking=""> <a href="/search-solutions/bigcommerce" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/bigcommerce.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/bigcommerce-icon_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">BigCommerce</span> </a> </li><li data-tracking=""> <a href="/search-solutions/commercetools" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/commercetools.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/commercetools-symbol.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Commercetools</span> </a> </li><li data-tracking=""> <a href="/search-solutions/salesforce-commerce-cloud" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/salesforce-commerce-cloud.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/salesforce.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Salesforce CC</span> </a> </li><li data-tracking=""> <a href="/search-solutions/shopify" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/shopify.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/shopify.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Shopify</span> </a> </li><li data-tracking=""> <a href="/developers/integrations" data-finalurl="/cms/render/live/en/sites/www/home/developers/integrations.html" class="flex items-center py-2"> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">See all integrations</span> <img class="ml-2" height="24" width="24" src="/files/live/sites/algolia-assets/files/icons/arrowRightCircle.svg" alt="" /> </a> </li></ul></div> </div> </li><li data-tracking="" class="lg:mr-3 xl:mr-6 flex flex-col lg:flex-row items-center last:lg:mr-0 border-b-[1px] border-grey-200 lg:border-none"> <button data-tracking="" type="button" class="font-inter font-normal w-full py-4 lg:py-7 lg:px-0 text-left dark:text-white text-grey-900 lg:text-sm xl:text-base dropdown-link flex justify-between lg:hover:text-xenon-600">Industries<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dropdown-link-caret block lg:hidden shrink-0"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="dropdown-menu lg:shadow-md lg:absolute top-full flex flex-col md:flex-row gap-10 px-3 md:p-7 rounded-lg lg:w-max opacity-0 invisible lg:bg-white"> <div class=""> <!-- --> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/industries/ecommerce" data-finalurl="/cms/render/live/en/sites/www/home/industries/ecommerce.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/shopping_cart_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Retail Ecommerce</span> </a> </li><li data-tracking=""> <a href="/industries/b2b-ecommerce" data-finalurl="/cms/render/live/en/sites/www/home/industries/b2b-ecommerce.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/business_center_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">B2B Ecommerce</span> </a> </li><li data-tracking=""> <a href="/industries/marketplaces" data-finalurl="/cms/render/live/en/sites/www/home/industries/marketplaces.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/store_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Marketplaces</span> </a> </li><li data-tracking=""> <a href="/industries/media" data-finalurl="/cms/render/live/en/sites/www/home/industries/media.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/perm_media_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Media</span> </a> </li><li data-tracking=""> <a href="/industries/saas" data-finalurl="/cms/render/live/en/sites/www/home/industries/saas.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/cloud_done.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">SaaS</span> </a> </li><li data-tracking=""> <a href="/industries" data-finalurl="/cms/render/live/en/sites/www/home/industries.html" class="flex items-center py-2"> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Read more</span> <img class="ml-2" height="24" width="24" src="/files/live/sites/algolia-assets/files/icons/arrowRightCircle.svg" alt="" /> </a> </li></ul></div> </div> </li><li data-tracking="" class="lg:mr-3 xl:mr-6 flex flex-col lg:flex-row items-center last:lg:mr-0 border-b-[1px] border-grey-200 lg:border-none"> <a href="/pricing" class="font-inter font-normal w-full py-4 lg:py-7 lg:px-0 text-left dark:text-white text-grey-900 lg:text-sm xl:text-base hover:text-xenon-600">Pricing</a> </li><li data-tracking="" class="lg:mr-3 xl:mr-6 flex flex-col lg:flex-row items-center last:lg:mr-0 border-b-[1px] border-grey-200 lg:border-none"> <button data-tracking="" type="button" class="font-inter font-normal w-full py-4 lg:py-7 lg:px-0 text-left dark:text-white text-grey-900 lg:text-sm xl:text-base dropdown-link flex justify-between lg:hover:text-xenon-600">Developers<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dropdown-link-caret block lg:hidden shrink-0"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="dropdown-menu lg:shadow-md lg:absolute top-full flex flex-col md:flex-row gap-10 px-3 md:p-7 rounded-lg lg:w-max opacity-0 invisible lg:bg-white"> <div class=""> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">GET STARTED</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/developers" data-finalurl="/cms/render/live/en/sites/www/home/developers.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/desktop-blue.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Developer Hub</span> </a> </li><li data-tracking=""> <a href="https://www.algolia.com/doc/" data-finalurl="https://www.algolia.com/doc/" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/menu_book_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Documentation</span> </a> </li><li data-tracking=""> <a href="/developers/integrations" data-finalurl="/cms/render/live/en/sites/www/home/developers/integrations.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/category_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Integrations</span> </a> </li><li data-tracking=""> <a href="/developers/search-ui" data-finalurl="/cms/render/live/en/sites/www/home/developers/search-ui.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/space_dashboard_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">UI Components</span> </a> </li><li data-tracking=""> <a href="/products/features/search-autocomplete" data-finalurl="/cms/render/live/en/sites/www/home/products/features/search-autocomplete.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/pageview_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Autocomplete</span> </a> </li></ul></div> <div class=""> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">RESOURCES</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/developers/code-exchange" data-finalurl="/cms/render/live/en/sites/www/home/developers/code-exchange.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/integration_instructions_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Code Exchange</span> </a> </li><li data-tracking=""> <a href="/blog/engineering" data-finalurl="/cms/render/live/en/sites/www/home/blog/engineering.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/terminal_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Engineering Blog</span> </a> </li><li data-tracking=""> <a href="https://alg.li/discord" data-finalurl="https://alg.li/discord" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/group_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Discord</span> </a> </li><li data-tracking=""> <a href="/events" data-finalurl="/cms/render/live/en/sites/www/home/events.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/event_note_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Webinars & Events</span> </a> </li></ul></div> <div class=""> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">QUICK LINKS</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="https://www.algolia.com/doc/guides/getting-started/quick-start/" data-finalurl="https://www.algolia.com/doc/guides/getting-started/quick-start/" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/assignment_turned_in_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Quick Start Guide</span> </a> </li><li data-tracking=""> <a href="/for-open-source" data-finalurl="/cms/render/live/en/sites/www/home/for-open-source.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/Subtract_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">For Open Source</span> </a> </li><li data-tracking=""> <a href="https://status.algolia.com/" data-finalurl="https://status.algolia.com/" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/dns_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">API Status</span> </a> </li><li data-tracking=""> <a href="https://support.algolia.com/hc/en-us" data-finalurl="https://support.algolia.com/hc/en-us" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/support_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Support</span> </a> </li></ul></div> </div> </li><li data-tracking="" class="lg:mr-3 xl:mr-6 flex flex-col lg:flex-row items-center last:lg:mr-0 border-b-[1px] border-grey-200 lg:border-none"> <button data-tracking="" type="button" class="font-inter font-normal w-full py-4 lg:py-7 lg:px-0 text-left dark:text-white text-grey-900 lg:text-sm xl:text-base dropdown-link flex justify-between lg:hover:text-xenon-600">Resources<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dropdown-link-caret block lg:hidden shrink-0"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="dropdown-menu lg:shadow-md lg:absolute top-full flex flex-col md:flex-row gap-10 px-3 md:p-7 rounded-lg lg:w-max opacity-0 invisible lg:bg-white"> <div class=""> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">INSPIRATION</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/blog" data-finalurl="/cms/render/live/en/sites/www/home/blog.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/description_FILL1_wght400_GRAD0_opsz48_1_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Algolia Blog</span> </a> </li><li data-tracking=""> <a href="https://resources.algolia.com/" data-finalurl="https://resources.algolia.com/" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/folder_open_FILL1_wght400_GRAD0_opsz48_1_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Resource Center</span> </a> </li><li data-tracking=""> <a href="/customers" data-finalurl="/cms/render/live/en/sites/www/home/customers.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/contacts_FILL1_wght400_GRAD0_opsz48_1_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Customer Stories</span> </a> </li></ul></div> <div class=""> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">LEARN</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="https://academy.algolia.com/trainings" data-finalurl="https://academy.algolia.com/trainings" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/school_FILL1_wght400_GRAD0_opsz48_1_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Algolia Academy</span> </a> </li><li data-tracking=""> <a href="/ecommerce-merchandising-playbook" data-finalurl="/cms/render/live/en/sites/www/home/ecommerce-merchandising-playbook.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/local_mall_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Merchandising Playbook</span> </a> </li><li data-tracking=""> <a href="/search-audit" data-finalurl="/cms/render/live/en/sites/www/home/search-audit.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/flaky_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Ecommerce Search Audit</span> </a> </li><li data-tracking=""> <a href="/events" data-finalurl="/cms/render/live/en/sites/www/home/events.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/event_note_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Events</span> </a> </li></ul></div> <div class=""> <!-- --> <h6 class="text-sm mb-4 font-semibold text-grey-400">NEW</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/customer-hub" data-finalurl="/cms/render/live/en/sites/www/home/customer-hub.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/diversity_3_FILL1_wght400_GRAD0_opsz48_1_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Customer Hub</span> </a> </li><li data-tracking=""> <a href="https://changelog.algolia.com/" data-finalurl="https://changelog.algolia.com/" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/screen_search_desktop_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Changelog</span> </a> </li><li data-tracking=""> <a href="/about/news" data-finalurl="/cms/render/live/en/sites/www/home/about/news.html" class="flex items-center py-2"> <img class="mr-2" height="16" width="16" src="/files/live/sites/algolia-assets/files/nav/newspaper_1.svg" alt="" /> <span class="text-sm text-black dark:text-white dark:lg:text-black hover:text-xenon-600">Newsroom</span> </a> </li></ul></div> </div> </li><div class="header__top-nav mobile lg:hidden z-1 mt-4 grid grid-cols-2 pr-2 max-w-[1440px]"> <span class=" font-inter leading-normal text-sm text-grey-400 dark:text-white mb-2 font-medium uppercase tracking-[0.7px]">Quick Access</span> <ul class="col-start-1 col-end-3 grid list-none grid-cols-2 gap-2 p-0"> <li data-tracking=""> <a href="/about" data-finalurl="/cms/render/live/en/sites/www/home/about.html" class="no-underline group flex w-max min-w-[150px] max-w-[280px] flex-col items-start py-2"> <div class="flex items-center gap-1"> <img class="" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/apartment_blue.svg" alt="" /> <span class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-grey-900 dark:text-white group-hover:text-xenon-400"> Company</span> </div> </a> <!-- text-white --> </li><li data-tracking=""> <a href="https://partners.algolia.com/" data-finalurl="https://partners.algolia.com/" class="no-underline group flex w-max min-w-[150px] max-w-[280px] flex-col items-start py-2"> <div class="flex items-center gap-1"> <img class="" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/handshake_blue.svg" alt="" /> <span class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-grey-900 dark:text-white group-hover:text-xenon-400"> Partners</span> </div> </a> <!-- text-white --> </li><li data-tracking=""> <a href="https://support.algolia.com/" data-finalurl="https://support.algolia.com/" class="no-underline group flex w-max min-w-[150px] max-w-[280px] flex-col items-start py-2"> <div class="flex items-center gap-1"> <img class="" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/support_blue.svg" alt="" /> <span class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-grey-900 dark:text-white group-hover:text-xenon-400"> Support</span> </div> </a> <!-- text-white --> </li><li data-tracking=""> <a href="https://dashboard.algolia.com/users/sign_in" data-finalurl="https://dashboard.algolia.com/users/sign_in" class="no-underline group flex w-max min-w-[150px] max-w-[280px] flex-col items-start py-2"> <div class="flex items-center gap-1"> <img class="" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/person_blue.svg" alt="" /> <span class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-grey-900 dark:text-white group-hover:text-xenon-400"> Login</span> </div> </a> <!-- text-white --> </li><li data-tracking=""> <a href="https://dashboard.algolia.com/users/sign_out" data-finalurl="https://dashboard.algolia.com/users/sign_out" class="no-underline group flex w-max min-w-[150px] max-w-[280px] flex-col items-start py-2"> <div class="flex items-center gap-1"> <img class="" height="16" width="16" src="/files/live/sites/algolia-assets/files/icons/Check%20Square.svg" alt="" /> <span class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-grey-900 dark:text-white group-hover:text-xenon-400"> Logout</span> </div> </a> <!-- text-white --> </li></ul> </div> <ul class="shrink-0 list-none gap-4 lg:mr-2 lg:hidden lg:flex mobile pt-6 pb-3 flex justify-center"> <span class="last:hidden"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora "> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" data-finalurl="/cms/render/live/en/sites/www/home/demorequest.html" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center cursor-pointer font-sora w-full noBackGround-cta transparent dark:text-white text-grey-900 px-4 lg:px-6 bg-transparent shadow-[0_0_6px_2px_rgba(0,61,255,0.12)] border-2 dark:border-white border-grey-200 rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Request Demo</span> </a> </div> </div> </span> <span class="last:hidden"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora "> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://dashboard.algolia.com/users/sign_up" data-finalurl="https://dashboard.algolia.com/users/sign_up" data-locale="en" data-is-internal="true" target="_blank" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center cursor-pointer font-sora w-full primary-cta text-white px-4 lg:px-6 bg-xenon-400 rounded-lg min-h-12 lg:min-h-14 blue-gradient" style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Get started</span> </a> </div> </div> </span> </ul> </ul> <div class="header__global-search shrink-0 mr-4 ml-auto"> <a href="/search" class="flex flex-wrap no-underline border lg:border-2 dark:border-grey-700 border-grey-200 rounded-lg text-white px-3 py-3 gap-4 lg:w-[220px] xl:w-[300px] items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-xenon-400"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> <span class="hidden lg:block lg:text-sm xl:text-base dark:text-white text-grey-900">Search Algolia</span> </a> </div> <ul class="shrink-0 list-none gap-4 lg:mr-2 hidden lg:flex desktop"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora "> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" data-finalurl="/cms/render/live/en/sites/www/home/demorequest.html" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center cursor-pointer font-sora w-full noBackGround-cta transparent dark:text-white text-grey-900 px-4 lg:px-6 bg-transparent shadow-[0_0_6px_2px_rgba(0,61,255,0.12)] border-2 dark:border-white border-grey-200 rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Request Demo</span> </a> </div> </div> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora "> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://dashboard.algolia.com/users/sign_up" data-finalurl="https://dashboard.algolia.com/users/sign_up" data-locale="en" data-is-internal="true" target="_blank" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center cursor-pointer font-sora w-full primary-cta text-white px-4 lg:px-6 bg-xenon-400 rounded-lg min-h-12 lg:min-h-14 blue-gradient" style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Get started</span> </a> </div> </div> </ul> </div> <!-- Start This is only visible in all Child Page Header Display--> <!-- End This is only visible in all Child Page Header Display--> </header> <script> document.addEventListener('DOMContentLoaded', () => { const headerNavToggleBtn = document.getElementById("toggleMobileNav"); const headerNavContainer = document.querySelector(".header__nav"); const headerNavListItems = document.querySelectorAll(".header__nav .dropdown-link"); const header = document.querySelector('.header-bg'); headerNavToggleBtn.addEventListener("click", () => { if (headerNavContainer.classList.contains("showHeaderMobNav")) { headerNavContainer.classList.remove("showHeaderMobNav"); header.classList.add("sticky") header.classList.remove("fixed") document.querySelector(".toggleBtnName").textContent = "Menu"; document.getElementById("toggleMobileNav").childNodes[3].classList.add("hidden"); document.getElementById("toggleMobileNav").childNodes[1].classList.remove("hidden"); document.body.classList.remove("overflow-hidden") } else { headerNavContainer.classList.add("showHeaderMobNav"); header.classList.add("fixed") header.classList.remove("sticky") document.querySelector(".toggleBtnName").textContent = "Close"; document.getElementById("toggleMobileNav").childNodes[3].classList.remove("hidden"); document.getElementById("toggleMobileNav").childNodes[1].classList.add("hidden"); document.body.classList.add("overflow-hidden") } }); headerNavListItems.forEach((listItem) => { listItem.addEventListener("click", () => { const hasActiveDropdown = listItem.parentElement.classList.contains("active"); if (hasActiveDropdown) { listItem.parentElement.classList.remove("active"); } else { listItem.parentElement.classList.add("active"); } }) }) }); </script><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div class=" cmp__logo-popover font-sora bg-gradient-to-r from-[#022eb9] to-[#003dff] w-[500px] m-3 border-2 border-[rgb(214 214 231)] rounded-md mt-6 hidden absolute"> <button aria-label="Close logo modal"> <svg xmlns="http://www.w3.org/2000/svg" class="crossIcon absolute right-0 top-0 my-1 mx-2 text-grey-200 opacity-[0.9] hover:text-white" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> <header class="flex flex-col items-center"> <div class="cmp-teaser__image"> <img style="width:80.0px; height:80.0px;" class="w-full" src="/files/live/sites/algolia-assets/files/icons/algolialogo.svg" alt=""/> </div> <p class="text-[32px] text-white mt-4 font-sora">Looking for our logo?</p> <span class="text-[18px] text-white mt-4 mb-2 font-400 font-sora teaser-richtext "><p style="color:white;">We got you covered!</p> </span> </header> <div class="cmp-teaser__action-container grid gap-4 mt-4 text-grey-700"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://algolia.frontify.com/" data-finalurl="https://algolia.frontify.com/" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center cursor-pointer font-sora w-full white-cta white cta-bg-white px-4 lg:px-6 bg-white hover:text-grey-700 text-grey-900 shadow-md border-2 border-white rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Brand guidelines</span> </a> </div> </div> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://www.algolia.com/algolia-logo-pack.zip " data-finalurl="https://www.algolia.com/algolia-logo-pack.zip " data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center cursor-pointer font-sora w-full white-cta white cta-bg-white px-4 lg:px-6 bg-white hover:text-grey-700 text-grey-900 shadow-md border-2 border-white rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Download logo pack</span> </a> </div> </div> </div> </div> </div> <!-- End Header Component --> <span class="block"> </span> <div class="banner-section"> <!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div data-tracking="" class=" homepge_banner banner__default light bg-main"> <div id="algoliabanner" class="banner_item relative max-w-[1440px] mx-auto lg:px-14 px-4"> <!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div class="text-white"> <div class="cmp-teaser__content w-full flex flex-wrap justify-between py-14 lg:py-28 top-0 z-10"> <div class="lg:w-6/12 w-full text-center md:text-left self-center"> <span class="font-inter font-medium uppercase text-base text-xenon-400 mb-2 block banner_tag">Mobile Search</span> <h1 class="cmp-teaser__title leading-tight text-5xl lg:text-[56px] tracking-[-2px] font-sora font-bold mb-4 dark:text-white text-grey-900 break-words">Create intelligent Search & Discovery for mobile</h1> <span class="font-sora font-light text-lg lg:text-2xl text-grey-700 dark:text-grey-200 my-0 mr-8"> <p>Create AI-driven mobile-native experiences with Algolia APIs for mobile websites and apps.</p> </span> <div class="cmp-teaser__action-container grid justify-center gap-4 mt-10 md:flex md:justify-start lg:my-8 my-0 gap-x-4"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" data-finalurl="/cms/render/live/en/sites/www/home/demorequest.html" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full primary-cta text-white px-4 lg:px-6 bg-xenon-400 rounded-lg min-h-12 lg:min-h-14 blue-gradient" style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Get a demo</span> </a> </div> </div> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-end"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://dashboard.algolia.com/users/sign_up/" data-finalurl="https://dashboard.algolia.com/users/sign_up/" data-locale="en" data-is-internal="true" target="_blank" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-end cursor-pointer font-sora w-full white-cta white cta-bg-white px-4 lg:px-6 bg-white hover:text-grey-700 text-grey-900 shadow-md border-2 border-white rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Start building for free</span> </a> </div> </div> </div> </div> <div class="lg:w-6/12 cmp-teaser__image w-full h-full top-0 right-0 bottom-0 left-0 mt-6 lg:mt-0"> <img src='/files/live/sites/algolia-assets/files/ai-search/Solutions_Mobile-search.svg' class="w-full h-full object-center object-cover" alt="" /> </div> </div> </div></div> </div></div> <!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div id="" data-tracking="" class="main__container bg-secondary"> <div class=" mx-auto max-w-[1440px] lg:px-14 lg:py-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12"> <!-- Check if the property is null or empty --> <div data-tracking="" class="mx-auto teaser-big-bold-title "> <div class=" z-1 grid gap-x-4 lg:gap-y-8 md:grid-cols-4 md:[&>*]:border-l md:[&>*:nth-child(1)]:border-none md:[&>*:nth-child(4n+1)]:border-none "> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title font-bold lg:text-s42 text-s34 leading-9 font-sora mb-2 group-hover:text-xenon-600 text-xenon-400">1.7+ Trillion</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-base lg:text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>searches every year</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title font-bold lg:text-s42 text-s34 leading-9 font-sora mb-2 group-hover:text-xenon-600 text-xenon-400">99.999%</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-base lg:text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>uptime SLA available</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title font-bold lg:text-s42 text-s34 leading-9 font-sora mb-2 group-hover:text-xenon-600 text-xenon-400">382%</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-base lg:text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>ROI according to Forrester Research</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title font-bold lg:text-s42 text-s34 leading-9 font-sora mb-2 group-hover:text-xenon-600 text-xenon-400">17,000+</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-base lg:text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>customers across 150+ countries</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- text-blue-500 bold --> <div class="teaser px-3 teaser-item-big-bold-title"> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__content w-full text-center"> </div> </div> </div></div> </div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; top: 50%; } .slick-next:focus, .slick-prev:focus{ color: black; } .slick-prev{ left: -50px; } .slick-next{ right: -50px; } .slick-dots li button{ background-color: rgb(230, 230, 230); border: 1px solid rgb(190, 190, 190); border-radius: 100%; } .slick-dots li button:before{ content: ''; } .slick-prev:hover, .slick-next:hover{ color: black; background: linear-gradient( 138deg, rgba(187, 209, 255, 0.2) 0%, rgba(118, 160, 255, 0.2) 25.08%, rgba(226, 167, 255, 0.2) 56.38%, rgba(187, 209, 255, 0.2) 100% ) } .slick-next::before{ content: ""; color: black; } .slick-prev::before{ content: ""; color: black; } .slick-arrow{ border-radius: 100%; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; border: 2px solid rgb(214 214 231); } .left-right-image:nth-child(odd) .cmp-teaser{ flex-direction: row-reverse; } /* @media (max-width: 768px) { .slick-arrow { display: none !important; } } */ .multi-item-carousel .teaser h5{ font-weight: normal; font-size: 1.5rem; } .slick .teaser.slick-slide { display: flex; flex-direction: column; align-items: center; } .slick .teaser.slick-slide .cmp-teaser { max-width: 800px; } @media (max-width: 768px) { .multi-item-carousel .teaser h5{ font-size: 1rem; } .teaser-item-big-bold-title .cmp-teaser .cmp-teaser__content > .cmp-teaser__title{ font-size: 35px; } .slick-prev { left: 132px; top: -62px; } .slick-next { left: 188px; top: -62px; } } .grid-cols-12 .md\:col-span-6 .slick-slide blockquote{ line-height: 34px; font-weight: 300; color: #23263b; font-size: 24px; margin-bottom:2rem; } .dark .grid-cols-12 .md\:col-span-6 .slick-slide blockquote{ color: white; } .teaser-item-big-bold-title .cmp-teaser .cmp-teaser__content > .cmp-teaser__title{ font-size: 42px; font-weight: 700; } </style></div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div id="" data-tracking="" class="main__container "> <div class=" mx-auto max-w-[1440px] lg:px-14 lg:py-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12"> <!-- Check if the property is null or empty --> <div data-tracking="" class="mx-auto "> <div class="flex flex-col items-center mb-4"> <div class=" text-center lg:w-[90%] w-full"> <h2 class="font-sora font-bold mt-0 mb-4 text-grey-900 dark:text-white text-s34 lg:text-s42"> Easily integrate search, browse, and recommendations into your mobile applications</h2> </div> </div> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- teaser with image left-right alignment --> <div class="teaser left-right-image px-4 first:mt-0 md:mt-24 mt-12"> <div class="cmp-teaser flex flex-wrap items-center justify-between"> <div class="cmp-teaser__image md:w-5/12"> <img src='/files/live/sites/algolia-assets/files/ai-search/Solutions_Integrate_in_your_IOS_and_Android_1.svg' alt="" class="w-full mb-6" /> <figcaption class="block text-left font-inter font-normal leading-1.5 text-xs lg:text-sm text-grey-900 text-center"></figcaption> </div> <div class="cmp-teaser__content md:w-5/12 lg:px-4"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-[42px] font-sora mb-2 font-bold text-grey-900 dark:text-white'> Integrate in your iOS & Android mobile apps</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 lg:mb-10 mt-2 lg:mt-3 "> <span class="text-base lg:text-lg text-grey-700 dark:text-grey-200 teaser-richtext check"><p>Developers can quickly build excellent mobile search and discovery experiences with our front-end components for <a href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/ios/">iOS</a>, <a href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/android/">Android</a>, and mobile web. Our components and UI libraries reflect the concepts, coding patterns, and <a href="/blog/ux/mobile-search-ux-best-practices">UX/UI best practices</a> for each framework.</p> </span> </div> <div class="cmp-teaser__action-container"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/android/" data-finalurl="https://www.algolia.com/doc/guides/building-search-ui/getting-started/android/" data-locale="en" data-is-internal="true" target="_blank" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Build on Android</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/ios/" data-finalurl="https://www.algolia.com/doc/guides/building-search-ui/getting-started/ios/" data-locale="en" data-is-internal="true" target="_blank" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Build on iOS</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- teaser with image left-right alignment --> <div class="teaser left-right-image px-4 first:mt-0 md:mt-24 mt-12"> <div class="cmp-teaser flex flex-wrap items-center justify-between"> <div class="cmp-teaser__image md:w-5/12"> <img src='/files/live/sites/algolia-assets/files/ai-search/Solutions_Add_voice_search_capabilities_2.svg' alt="" class="w-full mb-6" /> <figcaption class="block text-left font-inter font-normal leading-1.5 text-xs lg:text-sm text-grey-900 text-center"></figcaption> </div> <div class="cmp-teaser__content md:w-5/12 lg:px-4"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-[42px] font-sora mb-2 font-bold text-grey-900 dark:text-white'> Add voice search capabilities</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 lg:mb-10 mt-2 lg:mt-3 "> <span class="text-base lg:text-lg text-grey-700 dark:text-grey-200 teaser-richtext check"><p>Web browsing is the primary action people do on their mobile devices, but voice searching is in second place. Let users easily <a href="/industries-and-solutions/voice-search">voice search</a> with native browser <a href="https://www.algolia.com/doc/api-reference/widgets/voice-search/js/">speech-to-text support</a>. And you can add voice search to your mobile apps with voice overlay for <a href="https://github.com/algolia/voice-overlay-android/">Android</a> and <a href="https://github.com/algolia/voice-overlay-ios/">iOS</a> developers.</p> </span> </div> <div class="cmp-teaser__action-container"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/use-cases/voice-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/voice-search.html" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Read more about voice search</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- teaser with image left-right alignment --> <div class="teaser left-right-image px-4 first:mt-0 md:mt-24 mt-12"> <div class="cmp-teaser flex flex-wrap items-center justify-between"> <div class="cmp-teaser__image md:w-5/12"> <img src='/files/live/sites/algolia-assets/files/Solutions_Be_location_focused_3.svg' alt="" class="w-full mb-6" /> <figcaption class="block text-left font-inter font-normal leading-1.5 text-xs lg:text-sm text-grey-900 text-center"></figcaption> </div> <div class="cmp-teaser__content md:w-5/12 lg:px-4"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-[42px] font-sora mb-2 font-bold text-grey-900 dark:text-white'> Be location focused</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 lg:mb-10 mt-2 lg:mt-3 "> <span class="text-base lg:text-lg text-grey-700 dark:text-grey-200 teaser-richtext check"><p>People using mobile devices are more likely to be searching for information related to their physical location, such as a restaurant or retail store. If you want more engagement or conversions, it’s smart to serve relevant local search content and results. Whether someone is surfing the web at home, or walking around a foreign city, they’ll get relevant local mobile search results.</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- teaser with image left-right alignment --> <div class="teaser left-right-image px-4 first:mt-0 md:mt-24 mt-12"> <div class="cmp-teaser flex flex-wrap items-center justify-between"> <div class="cmp-teaser__image md:w-5/12"> <img src='/files/live/sites/algolia-assets/files/ai-search/Solutions_Read_your_mobile_4.svg' alt="" class="w-full mb-6" /> <figcaption class="block text-left font-inter font-normal leading-1.5 text-xs lg:text-sm text-grey-900 text-center"></figcaption> </div> <div class="cmp-teaser__content md:w-5/12 lg:px-4"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-[42px] font-sora mb-2 font-bold text-grey-900 dark:text-white'> Read your mobile searchers’ minds with analytics</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 lg:mb-10 mt-2 lg:mt-3 "> <span class="text-base lg:text-lg text-grey-700 dark:text-grey-200 teaser-richtext check"><p>Our analytics features reveal what your mobile users are trying to locate, which search results they’re selecting, and how they proceed based on what they discover while searching. You can use this insight to <a href="/blog/ux/mobile-search-ux-best-practices">do things</a> like fine-tune search relevance, improve your app’s user interface, and decide which content or products to promote for your smartphone users. </p> </span> </div> <div class="cmp-teaser__action-container"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/products/features/analytics" data-finalurl="/cms/render/live/en/sites/www/home/products/features/analytics.html" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Read more about analytics</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> </div> </div> </div> </div></div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; top: 50%; } .slick-next:focus, .slick-prev:focus{ color: black; } .slick-prev{ left: -50px; } .slick-next{ right: -50px; } .slick-dots li button{ background-color: rgb(230, 230, 230); border: 1px solid rgb(190, 190, 190); border-radius: 100%; } .slick-dots li button:before{ content: ''; } .slick-prev:hover, .slick-next:hover{ color: black; background: linear-gradient( 138deg, rgba(187, 209, 255, 0.2) 0%, rgba(118, 160, 255, 0.2) 25.08%, rgba(226, 167, 255, 0.2) 56.38%, rgba(187, 209, 255, 0.2) 100% ) } .slick-next::before{ content: ""; color: black; } .slick-prev::before{ content: ""; color: black; } .slick-arrow{ border-radius: 100%; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; border: 2px solid rgb(214 214 231); } .left-right-image:nth-child(odd) .cmp-teaser{ flex-direction: row-reverse; } .slick .teaser.slick-slide { display: flex; flex-direction: column; align-items: center; } .slick .teaser.slick-slide .cmp-teaser { max-width: 800px; } @media (max-width: 768px) { .slick-prev { left: 132px; top: -62px; } .slick-next { left: 188px; top: -62px; } } /* @media (max-width: 768px) { .slick-arrow { display: none !important; } } */ </style></div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div id="" data-tracking="" class="main__container bg-secondary"> <div class=" mx-auto max-w-[1440px] lg:px-14 lg:py-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12"> <!-- Check if the property is null or empty --> <div data-tracking="" class="mx-auto "> <div class="flex flex-col items-center mb-4"> <div class=" text-center lg:w-[90%] w-full"> <h2 class="font-sora font-bold text-s34 mt-0 mb-4 text-grey-900 dark:text-white lg:text-s42"> Mobile & App search and recommendations that fast to build and scale</h2> <div class="font-normal mb-8 text-grey-700 dark:text-grey-200 text-base lg:text-lg"> <p>With Algolia, create personalized experiences that improve your customer journey. Increase your conversion rates, shopper and user engagement, and elevate your brand.</p> </div> </div> </div> <div class=" z-1 grid gap-8 md:grid-cols-3"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- CardView With Left Image(Icon) --> <div class="teaser "> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__image"> <img style="width:px; height:px;" src="/files/live/sites/algolia-assets/files/icons/Zap.svg" class="w-full" alt=""> </div> <div class="cmp-teaser__content w-full text-left mt-3"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora font-bold mb-4 text-lg lg:text-2xl text-grey-900 dark:text-white'>Maximize small-screen real estate</h5> <div class="cmp-teaser__description font-inter font-normal mb-6"> <span class="text-lg text-grey-700 teaser-richtext check"><p>By focusing functionality on what people want when they’re on their smartphones</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- CardView With Left Image(Icon) --> <div class="teaser "> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__image"> <img style="width:px; height:px;" src="/files/live/sites/algolia-assets/files/icons/Trending%20Down.svg" class="w-full" alt=""> </div> <div class="cmp-teaser__content w-full text-left mt-3"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora font-bold mb-4 text-lg lg:text-2xl text-grey-900 dark:text-white'>Reduce friction</h5> <div class="cmp-teaser__description font-inter font-normal mb-6"> <span class="text-lg text-grey-700 teaser-richtext check"><p>And improve engagement by correcting users’ text-entry typos and spelling mistakes</p> </span> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <!-- CardView With Left Image(Icon) --> <div class="teaser "> <div class="cmp-teaser flex flex-wrap"> <div class="cmp-teaser__image"> <img style="width:px; height:px;" src="/files/live/sites/algolia-assets/files/icons/Search.svg" class="w-full" alt=""> </div> <div class="cmp-teaser__content w-full text-left mt-3"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora font-bold mb-4 text-lg lg:text-2xl text-grey-900 dark:text-white'>Help users find what they need fast</h5> <div class="cmp-teaser__description font-inter font-normal mb-6"> <span class="text-lg text-grey-700 teaser-richtext check"><p>With out-of-the-box search-as-you-type autocomplete with real-time results</p> </span> </div> </div> </div> </div></div> </div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; top: 50%; } .slick-next:focus, .slick-prev:focus{ color: black; } .slick-prev{ left: -50px; } .slick-next{ right: -50px; } .slick-dots li button{ background-color: rgb(230, 230, 230); border: 1px solid rgb(190, 190, 190); border-radius: 100%; } .slick-dots li button:before{ content: ''; } .slick-prev:hover, .slick-next:hover{ color: black; background: linear-gradient( 138deg, rgba(187, 209, 255, 0.2) 0%, rgba(118, 160, 255, 0.2) 25.08%, rgba(226, 167, 255, 0.2) 56.38%, rgba(187, 209, 255, 0.2) 100% ) } .slick-next::before{ content: ""; color: black; } .slick-prev::before{ content: ""; color: black; } .slick-arrow{ border-radius: 100%; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; border: 2px solid rgb(214 214 231); } .mx-auto .left-right-image:nth-child(odd) .cmp-teaser{ flex-direction: row-reverse; } .slick .teaser.slick-slide { display: flex; flex-direction: column; align-items: center; } .slick .teaser.slick-slide .cmp-teaser { max-width: 800px; } @media (max-width: 768px) { .slick-prev{ left: 132px; top: -62px; } .slick-next{ left: 188px; top: -62px; } } </style></div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div id="" data-tracking="" class="main__container bg-tertiary dark"> <div class=" mx-auto max-w-[1440px] lg:px-14 lg:py-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12"> <div data-tracking="" id="" class="mb-12"> <div class="flex flex-col items-start mb-8"> <div class=" text-start lg:w-6/12 lg:w-[90%] w-full"> <h1 class="font-sora font-light text-s34 lg:text-s42 mt-0 mb-4 dark:text-white text-grey-900"> Recommended content</h1> </div> </div> <div class=" grid gap-x-4 gap-y-8 lg:grid-cols-3"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div> <img class="w-full h-auto max-w-full object-cover mb-2 lg:mb-3 aspect-[4/3]" src="/files/live/sites/algolia-assets/files/recommended_images/itemeditorimage_5e8db9478cb7a.webp" alt=""> <h4 class="font-sora leading-[1.3] text-lg lg:text-2xl lg:leading-[1.4] font-bold dark:text-white text-grey-900 mb-0 mt-0 text-left">7 ways to get more out of Algolia search</h4> <span class="font-inter font-normal leading-normal text-base lg:text-lg dark:text-grey-200 text-grey-700 mb-0 mt-2 lg:mt-3"> <p>A checklist of practical, easy ways for Algolia customers to improve their search and boost conversion rates. Recommendations range from core relevance and UI design to improving search merchandising.</p> </span> <div class="mt-6 lg:mt-10"> <div class="cmp-teaser__action-container"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://resources.algolia.com/mobile-search/ebook-7waysmorefromalgoliasearch" data-finalurl="https://resources.algolia.com/mobile-search/ebook-7waysmorefromalgoliasearch" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Read more</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div> <img class="w-full h-auto max-w-full object-cover mb-2 lg:mb-3 aspect-[4/3]" src="/files/live/sites/algolia-assets/files/recommended_images/Mobile_ecommerce_experience_s8gy3x.jpeg" alt="How to improve search and discoverability in eCommerce"> <h4 class="font-sora leading-[1.3] text-lg lg:text-2xl lg:leading-[1.4] font-bold dark:text-white text-grey-900 mb-0 mt-0 text-left">How to improve search and discoverability in eCommerce</h4> <span class="font-inter font-normal leading-normal text-base lg:text-lg dark:text-grey-200 text-grey-700 mb-0 mt-2 lg:mt-3"> <p>Learn how to build search, discovery, and browse foundations for headless commerce, hosted by one of Algolia's Solutions Engineers. </p> </span> <div class="mt-6 lg:mt-10"> <div class="cmp-teaser__action-container"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://resources.algolia.com/ai-search/webinar-b2b-search-audit" data-finalurl="https://resources.algolia.com/ai-search/webinar-b2b-search-audit" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Read more</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div> <img class="w-full h-auto max-w-full object-cover mb-2 lg:mb-3 aspect-[4/3]" src="/files/live/sites/algolia-assets/files/recommended_images/itemeditorimage_61a96a2620b6b.png" alt="Shopping at the edge: Solving for infinite customer experience journeys"> <h4 class="font-sora leading-[1.3] text-lg lg:text-2xl lg:leading-[1.4] font-bold dark:text-white text-grey-900 mb-0 mt-0 text-left">Shopping at the edge: Solving for infinite customer experience journeys</h4> <span class="font-inter font-normal leading-normal text-base lg:text-lg dark:text-grey-200 text-grey-700 mb-0 mt-2 lg:mt-3"> <p>A real-life scenario of the modern-day product discovery flow. Learn best-practices from our panel of experts. </p> </span> <div class="mt-6 lg:mt-10"> <div class="cmp-teaser__action-container"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="#" data-finalurl="#" data-locale="en" data-is-internal="true" target="" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full withIcon-cta text-grey-900 dark:text-white px-0 text-sm lg:text-base flex-nowrap " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Read more</span> <span class="cmp-button__icon ms-3 text-blue-600 "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="ArrowRightCircle" class=" h-8 lg:w-full group-hover:fill-xenon-400 dark:group-hover:text-black group-hover:text-white transition-all duration-[400ms] ease-in group-hover:scale-[1.1]"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg> </span></a> </div> </div> </div> </div> </div></div> </div> <style> .slick-initialized .slick-slide{ margin: 0 20px 0 0; } .slick-next, .slick-prev{ z-index: 5; color: black; top: 50%; } .slick-next:focus, .slick-prev:focus{ color: black; } .slick-prev{ left: -50px; } .slick-next{ right: -50px; } .slick-dots li button{ background-color: rgb(230, 230, 230); border: 1px solid rgb(190, 190, 190); border-radius: 100%; } .slick-dots li button:before{ content: ''; } .slick-prev:hover, .slick-next:hover{ color: black; background: linear-gradient( 138deg, rgba(187, 209, 255, 0.2) 0%, rgba(118, 160, 255, 0.2) 25.08%, rgba(226, 167, 255, 0.2) 56.38%, rgba(187, 209, 255, 0.2) 100% ) } .slick-next::before{ content: ""; color: black; } .dark .slick-next::before{ content: ""; color: white; } .slick-prev::before{ content: ""; color: black; } .dark .slick-prev::before{ content: ""; color: white; } .slick-arrow{ border-radius: 100%; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; border: 2px solid rgb(214 214 231); } .left-right-image:nth-child(odd) .cmp-teaser{ flex-direction: row-reverse; } @media (max-width: 768px) { .slick-prev { left: 132px; top: -62px; } .slick-next { left: 188px; top: -62px; } } /* @media (max-width: 768px) { .slick-arrow { display: none !important; } } */ </style> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://resources.algolia.com/mobile-search" data-finalurl="https://resources.algolia.com/mobile-search" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center cursor-pointer font-sora w-full noBackGround-cta transparent dark:text-white text-grey-900 px-4 lg:px-6 bg-transparent shadow-[0_0_6px_2px_rgba(0,61,255,0.12)] border-2 dark:border-white border-grey-200 rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> See more</span> </a> </div> </div> </div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- Check if the property is null or empty --> <div id="" data-tracking="" class="main__container "> <div class=" mx-auto max-w-[1440px] lg:px-14 lg:py-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="mx-auto"> <div class="flex flex-col items-center mb-8"> <div class=" text-center lg:w-[90%] w-full"> <h2 class="font-sora font-bold text-s34 mt-0 mb-4 text-grey-900 lg:text-s42"> Mobile & App Search FAQs</h2> </div> </div> <div class="accordion mb-8"> <div class="cmp-accordion" data-expansion-type="multiItem"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div class="listAnimation"> <div class="cmp-accordion__item pt-2 lg:pt-0"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 text-2xl text-left font-sora font-light" id="accordion-1fe0d8df-d74c-4637-86aa-9e3c952c881c-button" aria-expanded="false" aria-controls="accordion-1fe0d8df-d74c-4637-86aa-9e3c952c881c-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora font-bold text-grey-900 text-left font-sora text-lg lg:text-2xl font-bold dark:text-white"> What is mobile search?</span> <span class="cmp-accordion-price justify-end flex-wrap items-center font-sora font-bold text-grey-900 font-sora text-lg lg:text-2xl font-bold dark:text-white hidden">0</span> <span class="cmp-caret-icon rotate-0 [.expanded_&]:rotate-180 text-blue-600"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="Arrow down" class=""> <polyline points="6 9 12 15 18 9"></polyline> </svg> </span> </button> </div> <div class="cmp-accordion__panel hidden px-4 pb-6" id="accordion-1fe0d8df-d74c-4637-86aa-9e3c952c881c-panel" aria-labelledby="accordion-1fe0d8df-d74c-4637-86aa-9e3c952c881c-button" aria-hidden="true"> <div> <div class="algoliaRichText check"><p>Mobile search is search conducted using a mobile device, for instance, an Apple iPhone or iPad, or an Android phone.</p> <p>An estimated 48% of U.S. web traffic is generated by people using mobile devices (e.g., an Apple iPhone or an Android phone), according to <a href="https://www.statista.com/statistics/683082/share-of-website-traffic-coming-from-mobile-devices-usa/">Statista</a> (2021). Globally the percentage is higher—more than 50%.</p> <p>More than when they're using a desktop computer or laptop, mobile users often do local searches: those related to their geographical area (for example, "near me" searches). In addition, someone entering a search query using a mobile device is likely to want relatively simple information (as opposed to needing to conduct an online search for data on an information-intensive web page), such as the distance to a nearby pizza restaurant or which neighborhood retailers carry a product they've decided to buy using Google search or Amazon.</p> <p>There are various types of mobile apps. Some mobile search engines provide answers to questions (e.g., when someone asks for the local weather forecast). Some make personalized product recommendations based on entered search terms and collected shopper preferences. Some give directions, hail rides, or let people search for news articles. Some include the option of voice search, allowing users to speak their search queries.</p> <p>Mobile search presents unique challenges to mobile-app designers, product marketers, and others because mobile device screens are obviously much smaller than those on desktop and laptop PCs.</p> <p>The mobile search experience can be optimized to overlook typos caused while trying to tap keys on a tiny screen, as well as to offer mobile users shortcuts by suggesting queries based on the text they seem to be entering.</p> <p>Mobile search is a dynamic field that is continually changing as new technology, such as the ability to make AI-related recommendations and personalize the shopping experience in an ecommerce app, become available. Voice search on a mobile device is another new option that's popular with people who get impatient with trying to tap letters on a tiny screen.</p> <p>Many companies and organizations have yet to optimize their apps for mobile search, but as more do, and their mobile users are delighted, the practice of using mobile devices to search is sure to become an even more ingrained part of everyday American life.</p> </div></div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div class="listAnimation"> <div class="cmp-accordion__item pt-2 lg:pt-0"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 text-2xl text-left font-sora font-light" id="accordion-925d5320-da17-4fc2-9fc6-81ac0f704d29-button" aria-expanded="false" aria-controls="accordion-925d5320-da17-4fc2-9fc6-81ac0f704d29-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora font-bold text-grey-900 text-left font-sora text-lg lg:text-2xl font-bold dark:text-white"> How many searches happen on mobile?</span> <span class="cmp-accordion-price justify-end flex-wrap items-center font-sora font-bold text-grey-900 font-sora text-lg lg:text-2xl font-bold dark:text-white hidden">0</span> <span class="cmp-caret-icon rotate-0 [.expanded_&]:rotate-180 text-blue-600"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="Arrow down" class=""> <polyline points="6 9 12 15 18 9"></polyline> </svg> </span> </button> </div> <div class="cmp-accordion__panel hidden px-4 pb-6" id="accordion-925d5320-da17-4fc2-9fc6-81ac0f704d29-panel" aria-labelledby="accordion-925d5320-da17-4fc2-9fc6-81ac0f704d29-button" aria-hidden="true"> <div> <div class="algoliaRichText check"><p>According to <a href="https://www.statista.com/statistics/683082/share-of-website-traffic-coming-from-mobile-devices-usa/">Statista</a> (2021) about 48% of U.S. web traffic is generated by people using mobile devices (e.g., an Apple iPhone or an Android phone). For the world as a whole, the percentage is higher—more than 50%.</p> <p>An older report (2016), "Mobile Search: Topics and Themes" (Hitwise), concluded that almost 60% of all searches are done on mobile devices. This study also found that the most popular sector for a mobile search was the food and beverage category. This makes sense given that people often use their mobile phones while out in a town or a particular geographical area to do a local search for a restaurant near them.</p> </div></div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div class="listAnimation"> <div class="cmp-accordion__item pt-2 lg:pt-0"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 text-2xl text-left font-sora font-light" id="accordion-85d231ec-961d-4f80-b206-0bbf41fc6afe-button" aria-expanded="false" aria-controls="accordion-85d231ec-961d-4f80-b206-0bbf41fc6afe-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora font-bold text-grey-900 text-left font-sora text-lg lg:text-2xl font-bold dark:text-white"> What percentage of people look at websites on their phone?</span> <span class="cmp-accordion-price justify-end flex-wrap items-center font-sora font-bold text-grey-900 font-sora text-lg lg:text-2xl font-bold dark:text-white hidden">0</span> <span class="cmp-caret-icon rotate-0 [.expanded_&]:rotate-180 text-blue-600"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="Arrow down" class=""> <polyline points="6 9 12 15 18 9"></polyline> </svg> </span> </button> </div> <div class="cmp-accordion__panel hidden px-4 pb-6" id="accordion-85d231ec-961d-4f80-b206-0bbf41fc6afe-panel" aria-labelledby="accordion-85d231ec-961d-4f80-b206-0bbf41fc6afe-button" aria-hidden="true"> <div> <div class="algoliaRichText check"><p>According to <a href="https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/">Statista</a> (2021), about 50% of the world's web traffic is generated by people using mobile devices, such as an Apple iPhone or an Android phone. This percentage has been consistent since early 2017.</p> <p>Watching movies and videos (via mobile apps Netflix, Tencent, or Amazon Prime from the Apple app store), surfing social media sites, and emailing were found to be the most popular things for mobile users to do on their devices.</p> </div></div> </div> </div> </div><!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div class="listAnimation"> <div class="cmp-accordion__item pt-2 lg:pt-0"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 text-2xl text-left font-sora font-light" id="accordion-0e8c1ad3-e71e-4649-bc76-4cd4ab1ba40f-button" aria-expanded="false" aria-controls="accordion-0e8c1ad3-e71e-4649-bc76-4cd4ab1ba40f-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora font-bold text-grey-900 text-left font-sora text-lg lg:text-2xl font-bold dark:text-white"> What is the best search pattern for mobile phones?</span> <span class="cmp-accordion-price justify-end flex-wrap items-center font-sora font-bold text-grey-900 font-sora text-lg lg:text-2xl font-bold dark:text-white hidden">0</span> <span class="cmp-caret-icon rotate-0 [.expanded_&]:rotate-180 text-blue-600"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" title="Arrow down" class=""> <polyline points="6 9 12 15 18 9"></polyline> </svg> </span> </button> </div> <div class="cmp-accordion__panel hidden px-4 pb-6" id="accordion-0e8c1ad3-e71e-4649-bc76-4cd4ab1ba40f-panel" aria-labelledby="accordion-0e8c1ad3-e71e-4649-bc76-4cd4ab1ba40f-button" aria-hidden="true"> <div> <div class="algoliaRichText check"><p>In a book called <a href="https://www.oreilly.com/library/view/mobile-design-pattern/9781449368586/ch04.html">Mobile Design Pattern Gallery</a> (2014), author Theresa Neil focuses on the value of autocompletion in enhancing basic searching on a mobile phone. Autocomplete functionality suggests search queries as a user enters search terms on their mobile device; when the search they want appears, they can simply tap it. The final touch in terms of usefulness: providing a mobile search engine progress indicator, such as a ticking clock or the word "Searching...".</p> <p>Another popular mobile app pattern for maximizing small-screen real estate during a mobile search is faceted search, which lets the searcher narrow their results by applying filters, typically by selecting options provided in a "tray"-style overlay. Faceted search is often utilized by retailers in ecommerce (and the mobile equivalent, m-commerce) and by travel service providers, as well as in online search tools on media websites.</p> <p>One relatively new application for searching on mobile devices is voice search. According to eMarketer, in 2019, 40% of all U.S. Internet users were using voice search, which has grown more popular, albeit slowly.</p> </div></div> </div> </div> </div></div> </div> </div></div> </div> </div> </div><div class=""> <!-- Check if the property is null or empty --> <div data-tracking="" class="mx-auto "> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div class="cmp-teaser__image w-full h-full relative -mb-px"> <img src="/files/live/sites/algolia-assets/files/footer-banner-2023.svg" class="w-full h-full object-center object-cover absolute z-0 hidden lg:block" alt=""> <img src="/files/live/sites/algolia-assets/files/footer-banner-mobile-2023.svg" class="w-full h-full object-center object-cover absolute z-0 lg:hidden block" alt=""> <div class="items-center mx-auto max-w-[1440px] flex flex-col lg:flex-row justify-between px-4 lg:px-16 lg:py-[72px] py-[32px] gap-y-6 lg:gap-y-8 top-1/2 w-full"> <h2 class="lg:text-[42px] text-[34px] leading-snug font-sora font-light text-white lg:w-2/4 z-10 text-start">Try the AI search that understands</h2> <div class="cmp-teaser__action-container items-center gap-4 flex flex-row shrink-0 flex-wrap lg:justify-end justify-start lg:my-8 my-0 lg:w-2/4 z-10"> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-start"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" data-finalurl="/cms/render/live/en/sites/www/home/demorequest.html" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-start cursor-pointer font-sora w-full white-cta white cta-bg-white px-4 lg:px-6 bg-white hover:text-grey-700 text-grey-900 shadow-md border-2 border-white rounded-lg min-h-12 lg:min-h-14 " style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Get a demo</span> </a> </div> </div> <!-- Check if the property is null or empty --> <!-- End here Check if the property is null or empty --> <div data-tracking="" class="flex font-sora justify-center lg:justify-end"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="https://www.algolia.com/users/sign_up" data-finalurl="https://www.algolia.com/users/sign_up" data-locale="en" data-is-internal="true" target="_self" class=" ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-center lg:justify-end cursor-pointer font-sora w-full noBackGround-cta transparent dark:text-white text-grey-900 px-4 lg:px-6 bg-transparent shadow-[0_0_6px_2px_rgba(0,61,255,0.12)] border-2 dark:border-white border-grey-200 rounded-lg min-h-12 lg:min-h-14 text-white" style="--x: 0px; --y: 0px;"> <span class="cmp-button__text font-semibold mx-auto font-sora leading-1.5 text-sm lg:text-base tracking-[0.28px] lg:tracking-[0.32px]"> Start Free</span> </a> </div> </div> </div> </div> </div></div></div> <!-- Over Ride Footer Logic is written in footer-logic--> <footer data-tracking="" class="bg-xenon-900"> <div class="footer_items m-auto grid max-w-[1440px] grid-cols-2 gap-x-2 lg:px-14 px-4 lg:gap-x-8 pb-6 lg:pb-14 pt-8 lg:pt-18 lg:grid-cols-10"> <div class="hidden lg:block lg:col-start-1 lg:col-end-3"> <div class=""> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Solutions</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products" data-finalurl="/cms/render/live/en/sites/www/home/products.html" target="_self">Overview</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products/ai-search" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-search.html" target="_self">AI Search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products/ai-browse" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-browse.html" target="_self">AI Browse</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products/ai-recommendations" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-recommendations.html" target="_self">AI Recommendations</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/pricing" data-finalurl="/cms/render/live/en/sites/www/home/pricing.html" target="_self">Pricing</a></ul></div> <div class="mt-10"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Use cases</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases" data-finalurl="/cms/render/live/en/sites/www/home/use-cases.html" target="_self">Overview</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/enterprise" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/enterprise.html" target="_self">Enterprise search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/headless-commerce" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/headless-commerce.html" target="_self">Headless commerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/mobile-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/mobile-search.html" target="_self">Mobile & app search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/voice-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/voice-search.html" target="_self">Voice search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/image-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/image-search.html" target="_self">Image search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/embedded-partnerships" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/embedded-partnerships.html" target="_self">OEM</a></ul></div></div> <div class="hidden lg:block lg:col-start-3 lg:col-end-5"> <div class=""> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Developers</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/developers" data-finalurl="/cms/render/live/en/sites/www/home/developers.html" target="_self">Developer Hub</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://www.algolia.com/doc/" data-finalurl="https://www.algolia.com/doc/" target="_self">Documentation</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/developers/integrations" data-finalurl="/cms/render/live/en/sites/www/home/developers/integrations.html" target="_self">Integrations</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/blog/engineering" data-finalurl="/cms/render/live/en/sites/www/home/blog/engineering.html" target="_self">Engineering blog</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://alg.li/discord" data-finalurl="https://alg.li/discord" target="_self">Discord community</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://status.algolia.com/" data-finalurl="https://status.algolia.com/" target="_self">API status</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://docsearch.algolia.com/" data-finalurl="https://docsearch.algolia.com/" target="_self">DocSearch</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/for-open-source" data-finalurl="/cms/render/live/en/sites/www/home/for-open-source.html" target="_self">For Open Source</a></ul></div> <div class="mt-10"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Live demos</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://gdpr.algolia.com/" data-finalurl="https://gdpr.algolia.com/" target="_self">GDPR</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://aiact.algolia.com/" data-finalurl="https://aiact.algolia.com/" target="_self">AI Act</a></ul></div></div> <div class="hidden lg:block lg:col-start-5 lg:col-end-7"> <div class=""> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Integrations</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/salesforce-commerce-cloud" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/salesforce-commerce-cloud.html" target="_self">Salesforce Commerce Cloud B2C</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/shopify" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/shopify.html" target="_self">Shopify</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/adobe-commerce-magento" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/adobe-commerce-magento.html" target="_self">Adobe Commerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/netlify" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/netlify.html" target="_self">Netlify</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/commercetools" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/commercetools.html" target="_self">Commercetools</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/bigcommerce" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/bigcommerce.html" target="_self">BigCommerce</a></ul></div> <div class="mt-10"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Distributed & secure</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/distributed-secure/global-infrastructure" data-finalurl="/cms/render/live/en/sites/www/home/distributed-secure/global-infrastructure.html" target="_self">Global infrastructure</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/distributed-secure/security-compliance" data-finalurl="/cms/render/live/en/sites/www/home/distributed-secure/security-compliance.html" target="_self">Security & compliance</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/algolia-on-azure" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/algolia-on-azure.html" target="_self">Azure</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/algolia-on-aws" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/algolia-on-aws.html" target="_self">AWS</a></ul></div></div> <div class="hidden lg:block lg:col-start-7 lg:col-end-9"> <div class=""> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Industries</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries" data-finalurl="/cms/render/live/en/sites/www/home/industries.html" target="_self">Overview</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/ecommerce" data-finalurl="/cms/render/live/en/sites/www/home/industries/ecommerce.html" target="_self">B2C ecommerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/b2b-ecommerce" data-finalurl="/cms/render/live/en/sites/www/home/industries/b2b-ecommerce.html" target="_self">B2B ecommerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/marketplaces" data-finalurl="/cms/render/live/en/sites/www/home/industries/marketplaces.html" target="_self">Marketplaces</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/saas" data-finalurl="/cms/render/live/en/sites/www/home/industries/saas.html" target="_self">SaaS</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/media" data-finalurl="/cms/render/live/en/sites/www/home/industries/media.html" target="_self">Media</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/startups" data-finalurl="/cms/render/live/en/sites/www/home/industries/startups.html" target="_self">Startups</a></ul></div></div> <div class="hidden lg:block lg:col-start-9 lg:col-end-11"> <div class=""> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Company</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about" data-finalurl="/cms/render/live/en/sites/www/home/about.html" target="_self">About Algolia</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/careers" data-finalurl="/cms/render/live/en/sites/www/home/careers.html" target="_self">Careers</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about/news" data-finalurl="/cms/render/live/en/sites/www/home/about/news.html" target="_self">Newsroom</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/events" data-finalurl="/cms/render/live/en/sites/www/home/events.html" target="_self">Events</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about/leadership" data-finalurl="/cms/render/live/en/sites/www/home/about/leadership.html" target="_self">Leadership</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about/social-impact" data-finalurl="/cms/render/live/en/sites/www/home/about/social-impact.html" target="_self">Social impact</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/contact" data-finalurl="/cms/render/live/en/sites/www/home/contact.html" target="_self">Contact us</a></ul></div> <div class="mt-10"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Social networks</h4> <!-- We need to configure site level Social Icon here --> <ul class="social-links font-inter font-normal leading-normal text-sm items-center text-grey-900 m-0 flex list-none p-0 gap-0 lg:gap-2"> <li class="first:ml-0 ms-3"><a href="https://twitter.com/algolia" title="Twitter"> <i class="twitter-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.facebook.com/algolia/" title="FaceBook"> <i class="fa-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.linkedin.com/company/algolia/" title="LinkedIn"> <i class="linkedin-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.youtube.com/user/Algolia" title="YouTube"> <i class="youtube-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.instagram.com/algolialife" title="Instagram"> <i class="instagram-icon"></i></a> </li> </ul></div></div> <div class="lg:hidden"> <div class="lg:mt-0 mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Developers</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/developers" data-finalurl="/cms/render/live/en/sites/www/home/developers.html" target="_self">Developer Hub</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://www.algolia.com/doc/" data-finalurl="https://www.algolia.com/doc/" target="_self">Documentation</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/developers/integrations" data-finalurl="/cms/render/live/en/sites/www/home/developers/integrations.html" target="_self">Integrations</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/blog/engineering" data-finalurl="/cms/render/live/en/sites/www/home/blog/engineering.html" target="_self">Engineering blog</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://alg.li/discord" data-finalurl="https://alg.li/discord" target="_self">Discord community</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://status.algolia.com/" data-finalurl="https://status.algolia.com/" target="_self">API status</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://docsearch.algolia.com/" data-finalurl="https://docsearch.algolia.com/" target="_self">DocSearch</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/for-open-source" data-finalurl="/cms/render/live/en/sites/www/home/for-open-source.html" target="_self">For Open Source</a></ul></div> <div class="mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Live demos</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://gdpr.algolia.com/" data-finalurl="https://gdpr.algolia.com/" target="_self">GDPR</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="https://aiact.algolia.com/" data-finalurl="https://aiact.algolia.com/" target="_self">AI Act</a></ul></div><div class="lg:mt-0 mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Industries</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries" data-finalurl="/cms/render/live/en/sites/www/home/industries.html" target="_self">Overview</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/ecommerce" data-finalurl="/cms/render/live/en/sites/www/home/industries/ecommerce.html" target="_self">B2C ecommerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/b2b-ecommerce" data-finalurl="/cms/render/live/en/sites/www/home/industries/b2b-ecommerce.html" target="_self">B2B ecommerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/marketplaces" data-finalurl="/cms/render/live/en/sites/www/home/industries/marketplaces.html" target="_self">Marketplaces</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/saas" data-finalurl="/cms/render/live/en/sites/www/home/industries/saas.html" target="_self">SaaS</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/media" data-finalurl="/cms/render/live/en/sites/www/home/industries/media.html" target="_self">Media</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/industries/startups" data-finalurl="/cms/render/live/en/sites/www/home/industries/startups.html" target="_self">Startups</a></ul></div></div> <div class="lg:hidden"> <div class="lg:mt-0 mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Solutions</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products" data-finalurl="/cms/render/live/en/sites/www/home/products.html" target="_self">Overview</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products/ai-search" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-search.html" target="_self">AI Search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products/ai-browse" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-browse.html" target="_self">AI Browse</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/products/ai-recommendations" data-finalurl="/cms/render/live/en/sites/www/home/products/ai-recommendations.html" target="_self">AI Recommendations</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/pricing" data-finalurl="/cms/render/live/en/sites/www/home/pricing.html" target="_self">Pricing</a></ul></div> <div class="mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Use cases</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases" data-finalurl="/cms/render/live/en/sites/www/home/use-cases.html" target="_self">Overview</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/enterprise" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/enterprise.html" target="_self">Enterprise search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/headless-commerce" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/headless-commerce.html" target="_self">Headless commerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/mobile-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/mobile-search.html" target="_self">Mobile & app search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/voice-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/voice-search.html" target="_self">Voice search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/use-cases/image-search" data-finalurl="/cms/render/live/en/sites/www/home/use-cases/image-search.html" target="_self">Image search</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/embedded-partnerships" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/embedded-partnerships.html" target="_self">OEM</a></ul></div><div class="lg:mt-0 mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Integrations</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/salesforce-commerce-cloud" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/salesforce-commerce-cloud.html" target="_self">Salesforce Commerce Cloud B2C</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/shopify" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/shopify.html" target="_self">Shopify</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/adobe-commerce-magento" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/adobe-commerce-magento.html" target="_self">Adobe Commerce</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/netlify" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/netlify.html" target="_self">Netlify</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/commercetools" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/commercetools.html" target="_self">Commercetools</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/bigcommerce" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/bigcommerce.html" target="_self">BigCommerce</a></ul></div> <div class="mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Distributed & secure</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/distributed-secure/global-infrastructure" data-finalurl="/cms/render/live/en/sites/www/home/distributed-secure/global-infrastructure.html" target="_self">Global infrastructure</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/distributed-secure/security-compliance" data-finalurl="/cms/render/live/en/sites/www/home/distributed-secure/security-compliance.html" target="_self">Security & compliance</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/algolia-on-azure" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/algolia-on-azure.html" target="_self">Azure</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/search-solutions/algolia-on-aws" data-finalurl="/cms/render/live/en/sites/www/home/search-solutions/algolia-on-aws.html" target="_self">AWS</a></ul></div><div class="lg:mt-0 mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Company</h4> <ul class="m-0 list-none p-0"> <a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about" data-finalurl="/cms/render/live/en/sites/www/home/about.html" target="_self">About Algolia</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/careers" data-finalurl="/cms/render/live/en/sites/www/home/careers.html" target="_self">Careers</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about/news" data-finalurl="/cms/render/live/en/sites/www/home/about/news.html" target="_self">Newsroom</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/events" data-finalurl="/cms/render/live/en/sites/www/home/events.html" target="_self">Events</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about/leadership" data-finalurl="/cms/render/live/en/sites/www/home/about/leadership.html" target="_self">Leadership</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/about/social-impact" data-finalurl="/cms/render/live/en/sites/www/home/about/social-impact.html" target="_self">Social impact</a><a data-tracking="" data-is-internal="true" class=" block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400 py-2" href="/contact" data-finalurl="/cms/render/live/en/sites/www/home/contact.html" target="_self">Contact us</a></ul></div> <div class="mt-8"> <h4 class="font-inter font-normal leading-normal text-base lg:text-lg text-grey-400 mt-0 mb-2 lg:mb-4"> Social networks</h4> <!-- We need to configure site level Social Icon here --> <ul class="social-links font-inter font-normal leading-normal text-sm items-center text-grey-900 m-0 flex list-none p-0 gap-0 lg:gap-2"> <li class="first:ml-0 ms-3"><a href="https://twitter.com/algolia" title="Twitter"> <i class="twitter-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.facebook.com/algolia/" title="FaceBook"> <i class="fa-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.linkedin.com/company/algolia/" title="LinkedIn"> <i class="linkedin-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.youtube.com/user/Algolia" title="YouTube"> <i class="youtube-icon"></i></a> </li> <li class="first:ml-0 ms-3"><a href="https://www.instagram.com/algolialife" title="Instagram"> <i class="instagram-icon"></i></a> </li> </ul></div></div> </div> <div class="m-auto max-w-[1440px] lg:px-14 px-4 pb-8 lg:pb-10"> <hr class="m-0 h-px border-0 bg-grey-700 mb-6 lg:mb-8"> <div class="flex flex-col items-center sm:flex-row sm:justify-between"> <div class="flex items-center"> <svg class="w-5 h-auto mr-4" width="501" height="501" viewBox="0 0 501 501" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 20px; "> <title>Algolia mark white</title> <path d="M250.926 0C114.306 0 2.926 110.16.956 246.32c-2 138.29 110.19 252.87 248.49 253.67 42.71.25 83.85-10.2 120.38-30.05 3.56-1.93 4.11-6.83 1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5 10.85-53.21 16.39-81.76 16.04-111.75-1.37-202.04-94.35-200.26-206.1 1.76-110.33 92.06-199.55 202.8-199.55h202.83v360.53l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43 1.31-18.47 24.46-48.56 39.67-81.98 37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28 39.65-101.58 94.07-101.58 49.21 0 89.74 37.88 93.97 86.01.38 4.28 2.31 8.28 5.53 11.13l29.97 26.57c3.4 3.01 8.8 1.17 9.63-3.3 2.16-11.55 2.92-23.6 2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23 58.18-150.37 137.35-2.09 77.15 61.12 143.66 138.28 145.36 32.21.71 62.07-9.42 86.2-26.97l150.36 133.29c6.45 5.71 16.62 1.14 16.62-7.48V9.49c0-5.24-4.25-9.49-9.49-9.49H250.926Z" fill="#fff"></path> </svg><span class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white"> ©2024 Algolia - All rights reserved.</span> </div> <ul class="m-0 mt-4 flex list-none flex-wrap justify-center p-0 sm:mt-0 sm:justify-end"> <li> <button id="ot-sdk-btn" class="ot-sdk-show-settings block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors duration-200 hover:text-xenon-400">Cookie settings</button> </li> <li data-tracking=""> <a data-is-internal="true" class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors ml-4 duration-200 hover:text-xenon-400 relative ml-1 before:absolute before:-left-2 before:top-[50%] before:block before:h-1/2 before:w-px before:translate-y-[-50%] before:bg-white before:content-['']" href="/trust-center" data-finalurl="/cms/render/live/en/sites/www/home/trust-center.html" target="_self">Trust Center</a> </li><li data-tracking=""> <a data-is-internal="true" class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors ml-4 duration-200 hover:text-xenon-400 relative ml-1 before:absolute before:-left-2 before:top-[50%] before:block before:h-1/2 before:w-px before:translate-y-[-50%] before:bg-white before:content-['']" href="/policies/privacy" data-finalurl="/policies/privacy" target="_self">Privacy Policy</a> </li><li data-tracking=""> <a data-is-internal="true" class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors ml-4 duration-200 hover:text-xenon-400 relative ml-1 before:absolute before:-left-2 before:top-[50%] before:block before:h-1/2 before:w-px before:translate-y-[-50%] before:bg-white before:content-['']" href="/policies/terms" data-finalurl="/policies/terms" target="_self">Terms of service</a> </li><li data-tracking=""> <a data-is-internal="true" class="block text-left font-inter font-normal leading-normal text-xs lg:text-sm text-white no-underline transition-colors ml-4 duration-200 hover:text-xenon-400 relative ml-1 before:absolute before:-left-2 before:top-[50%] before:block before:h-1/2 before:w-px before:translate-y-[-50%] before:bg-white before:content-['']" href="/policies/acceptable-use" data-finalurl="/policies/acceptable-use" target="_self">Acceptable Use Policy</a> </li></ul> </div> </div> </footer> <script> var oneTrustCookieFooterBtn = setInterval(() => { document.querySelector("#ot-sdk-btn").innerText = "Cookie settings"; }, 1000); setTimeout(() => { clearInterval(oneTrustCookieFooterBtn); }, 4000); </script><script> //Start of Async Drift Code "use strict"; !function() { var t = window.driftt = window.drift = window.driftt || []; if (!t.init) { if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice.")); t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], t.factory = function(e) { return function() { var n = Array.prototype.slice.call(arguments); return n.unshift(e), t.push(n), t; }; }, t.methods.forEach(function(e) { t[e] = t.factory(e); }), t.load = function(t) { var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script"); o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js"; var i = document.getElementsByTagName("script")[0]; i.parentNode.insertBefore(o, i); }; } }(); drift.SNIPPET_VERSION = '0.3.1'; drift.load('akbbnskvekg7'); //End of Async Drift Code akbbnskvekg7 // Collect UTMs (Visi code) drift.on('ready', function(api) { var params = new URLSearchParams(window.location.search); var attributes = {}; for (var pair of params.entries()) { const [key, value] = pair; if (key.startsWith('utm')) { attributes[key] = value; } } api.setUserAttributes(attributes); let didConsent = false; const anonymousId = getAnonymousIdCookie(); if(OnetrustActiveGroups.includes('C0003')) { drift.identify(anonymousId); didConsent = true; } if(!didConsent) { window.OneTrust.OnConsentChanged((e) => { if(e.detail.includes('C0003')) { // User accepts cookies, Cookie ID is then used to identify with Drift const anonymousId = getAnonymousIdCookie(); if(anonymousId) drift.identify(anonymousId); } }) } }); </script><!-- Css Specific to base templates--> <script src="/modules/algolia-base-template/javascript/anonymousUser.js" ></script> <script src="/modules/algolia-base-template/javascript/currentUser.js" ></script> <script src="/modules/algolia-base-template/javascript/hideBlankTag.js" ></script> <script src="/modules/algolia-base-template/javascript/bannerAnimation.js" ></script> <script src="/modules/algolia-base-template/javascript/startupsTracking.js" ></script> <script src="/modules/algolia-base-template/javascript/jquery.js"></script> <script src="/modules/algolia-base-template/javascript/slick.min.js"></script> <script src="/modules/algolia-base-template/javascript/accordion.js"></script> <script src="/modules/algolia-base-template/javascript/customslick.js"></script> <script src="/modules/algolia-base-template/javascript/prism.js"></script> <script src="/modules/algolia-base-template/javascript/theme.js"></script><!-- JS Specific to templates--> <script src="/modules/algolia-base-template/javascript/codepen.js"></script> <script src="/modules/algolia-base-template/javascript/forrester.js"></script> <script src="/modules/algolia-base-template/javascript/blogNavigation.js"></script> <script> Prism.highlightAll(); </script> <style> #ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings{ border: none; color: white; line-height: 1.2rem; padding: inherit; font-size: 0.875rem; } #ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover{ --tw-text-opacity: 1; color: rgb(69 122 255 / var(--tw-text-opacity)); background-color: unset; } </style> </body> </html>