AI search that understands

<!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" /><link rel="alternate" hreflang="en" href="https://www.algolia.com" /> <link rel="alternate" hreflang="de" href="https://www.algolia.com/de" /> <link rel="alternate" hreflang="fr" href="https://www.algolia.com/fr" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>AI search that understands</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport">  <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="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://res.cloudinary.com/hilnmyskv/image/upload/v1580296397/Algolia_com_Website_assets/logo-algolia-xenon-blue-full.png", "image": "https://res.cloudinary.com/hilnmyskv/image/upload/v1527077656/Algolia_OG_image_m3xgjb.png", "description": "Fast, reliable and modern Search & Discovery", "address": { "@type": "PostalAddress", "streetAddress": "301 Howard St, 3rd floor", "addressLocality": "San Francisco", "addressRegion": "California", "postalCode": "94105", "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>  <meta name="description" content="Enterprises and developers use Algolia’s AI search infrastructure to understand users and show them what they’re looking for."> <meta name="og:title" content="AI search that understands"> <meta name="og:description" content="Enterprises and developers use Algolia’s AI search infrastructure to understand users and show them what they’re looking for."> <meta name="og:url" content="/cms/render/live/en/sites/www/home.html"> <meta name="twitter:title" content="AI search that understands"> <meta name="twitter:description" content="Enterprises and developers use Algolia’s AI search infrastructure to understand users and show them what they’re looking for.">  <link rel="icon" type="image/png" sizes="32x32" href="/files/default/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/default/sites/algolia-assets/files/algoliaweb-static-favicons/light-mode/favicon-16x16.png" media="(prefers-color-scheme: light)"/> <link rel="manifest" href="/files/default/sites/algolia-assets/files/algoliaweb-static-favicons/light-mode/site.webmanifest" media="(prefers-color-scheme: light)"/> <link rel="mask-icon" href="/files/default/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/default/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/default/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/default/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" //eEj3ERCjH7KxK1jEMjQF7uzmtZGALFHn analytics.page(); } }(); </script><link rel="icon" type="image/x-icon" href="/files/default/sites/algolia-assets/files/icons/algolia-logo-for-favicon.svg"> <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/eefd8ca0e1fef49c375eb31138c649.min.css" media="screen" type="text/css"/> <script id="staticAssetJavascript0" src="/generated-resources/65857499131c75fec44aa5a492178c21.min.js" ></script> <script type="application/json" id="jahia-data-aggregatedjs">{"scripts":["/modules/ad-base-components/javascript/component/ctaGradient.js","/modules/ad-base-components/javascript/component/logoPopover.js","/modules/algolia-base-components/javascript/component/accordion.js","/modules/ad-base-components/javascript/component/banner.js","/modules/algolia-base-template/javascript/screenTab.js"]}</script> <script type="text/javascript" src="/modules/CsrfServlet"></script> </head> <body data-tracking="home" class=" font-inter text-base" data-site-theme="dark" data-parent-theme="" data-page-theme="light" data-languageparam="" >  <div class="dark inset-0 z-[999] sticky ">  <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"> <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"> <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="/search-solutions/algolia-on-aws" 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">News:</span></p> <p class="font-inter font-normal leading-1.5 text-sm dark:text-white text-grey-900 m-0">Come see us at AWS re:Invent, booth 393, Dec 2-6! </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" 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/" 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/" 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"> <a href="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"> <a href="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>   <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>  <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" 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" 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" 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="/industries/ecommerce/digital-merchandising" 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" 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" 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" 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 lg:text-grey-400">INTEGRATIONS</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/search-solutions/adobe-commerce-magento" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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 lg:text-grey-400">GET STARTED</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/developers" 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/" 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" 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" 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" 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 lg:text-grey-400">RESOURCES</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/developers/code-exchange" 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="https://www.algolia.com/blog/engineering/" 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" 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" 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 lg: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/" 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" 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/" 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" 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 lg:text-grey-400">INSPIRATION</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/blog" 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/" 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" 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 lg:text-grey-400">LEARN</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="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" 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="https://www.algolia.com/search-audit/" 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" 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 lg:text-grey-400">NEW</h6> <ul class="flex flex-col gap-2.5 grid "> <li data-tracking=""> <a href="/customer-hub" 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/" 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" 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" 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>  </li><li data-tracking=""> <a href="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>  </li><li data-tracking=""> <a href="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>  </li><li data-tracking=""> <a href="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>  </li><li data-tracking=""> <a href="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>  </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">   <div data-tracking="" class="flex font-sora "> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" 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">   <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-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">   <div data-tracking="" class="flex font-sora "> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" 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>   <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-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>   </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>    <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">   <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-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>   <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-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>  <span class="block"> </span> <div class="banner-section">   <div data-tracking="" class=" homepge_banner dark bg-tertiary"> <div id="algoliabanner" class="banner_item relative w-full mx-auto overflow-hidden">   <div class="text-white"> <div class="mx-auto px-4 lg:px-[56px] z-1 py-[56px] lg:max-w-[1440px] lg:grid lg:grid-cols-12 lg:pt-0 h-[540px] lg:h-[835px]"> <div class="text-center lg:z-20 lg:row-start-1 lg:row-end-2 lg:col-start-1 lg:col-end-6 lg:text-left lg:flex lg:flex-col lg:justify-center"> <h1 class="cmp-teaser__title text-[45px] lg:text-[56px] tracking-tight font-sora font-bold mb-4 dark:text-white text-grey-900 break-words leading-[1.2]">Show users what they need</h1> <span class="font-sora font-light text-lg lg:text-2xl text-grey-700 dark:text-grey-200 my-0 mr-8"> <p>with AI search that understands them</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">   <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://dashboard.algolia.com/users/sign_up" data-is-internal="true" target="_blank" class="mouseTracking ctaGradient cmp-button overflow-hidden flex flex-wrap items-center justify-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>   <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" data-is-internal="true" target="_self" class="mouseTracking 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]"> Request demo</span> </a> </div> </div> </div> </div> <div class="lg:absolute lg:right-[-20px] lg:top-0 lg:left-0 lg:h-full lg:m-auto lg:max-w-[1440px] "> <img src='/files/live/sites/algolia-assets/files/algolia-home/hero-bg-rotate.png' class="hidden lg:block animate-rotate lg:absolute lg:top-[100px] lg:right-[-100px] lg:h-full lg:object-contain lg:blur-[120px] lg:brightness-[0.6]"> <img src='/files/live/sites/algolia-assets/files/algolia-home/women.avif' class="hidden lg:block h-auto max-w-full object-cover max-w-[1000px] mx-auto lg:absolute lg:top-0 lg:right-0 lg:h-full lg:object-cover" alt="" /> </div> </div> </div></div> </div><div class="cmp-teaser__bannerAnimation w-full lg:flex hidden flex-wrap pe-16 text-white absolute mt-96 top-8 top-0 z-10 justify-end"> <div class="animationTitleLists hidden"> <span class="title" data-titleId="a6cd5d41-21a0-4df4-a0f4-18feee60bb5f">Motivating workout tunes</span> <span class="title" data-titleId="6ea87867-444f-467d-a2af-16af460c6db0">Best headphones gift</span> <span class="title" data-titleId="ecfb9466-33cf-4a3d-b537-f473bf0c7d94">Wooden bridge hike near me</span> <span class="title" data-titleId="51f36867-2c32-45b4-9bd3-143d845df9ac">Top goal scorer in women’s cup</span> <span class="title" data-titleId="760e426a-2f67-4af8-9cec-3f007bc18302">SKU 14290, 27381, 98063</span> </div> <div class="banner-animation md:w-5/12" >   <div class=" w-[550px] h-400 mt-[50px]"> <div class="typewriter w-full h-auto bg-white bg-opacity-20 rounded-full px-8 py-4 gap-4 flex items-center justify-between text-lg capitalize"> <h4 class="truncate leading-[1.3] text-lg lg:text-2xl lg:leading-1.4 font-light text-white font-inter font-semibold">Motivating workout tunes</h4> <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="text-white flex-shrink-0 h-auto w-auto lg:h-[35px]"> <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> <line x1="12" y1="19" x2="12" y2="23"></line> <line x1="8" y1="23" x2="16" y2="23"></line> </svg> </div> <div class="animationImageLists hidden" data-imageId="a6cd5d41-21a0-4df4-a0f4-18feee60bb5f"> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/tunes-1.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/tunes-2.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/tunes-3.png</span> </div> <div class="grid grid-cols-3 horizontal gap-x-4 imageLists mt-4"> <img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/tunes-1.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="a6cd5d41-21a0-4df4-a0f4-18feee60bb5f"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/tunes-2.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="a6cd5d41-21a0-4df4-a0f4-18feee60bb5f"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/tunes-3.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="a6cd5d41-21a0-4df4-a0f4-18feee60bb5f"></div> </div>  <div class=" w-[550px] h-400 mt-[50px]"> <div class="typewriter w-full h-auto bg-white bg-opacity-20 rounded-full px-8 py-4 gap-4 flex items-center justify-between text-lg capitalize"> <h4 class="truncate leading-[1.3] text-lg lg:text-2xl lg:leading-1.4 font-light text-white font-inter font-semibold">Best headphones gift</h4> <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="text-white flex-shrink-0 h-auto w-auto lg:h-[35px]"> <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> <line x1="12" y1="19" x2="12" y2="23"></line> <line x1="8" y1="23" x2="16" y2="23"></line> </svg> </div> <div class="animationImageLists hidden" data-imageId="6ea87867-444f-467d-a2af-16af460c6db0"> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/headphones-1.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/headphones-2.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/headphones-3.png</span> </div> <div class="grid grid-cols-3 horizontal gap-x-4 imageLists mt-4"> <img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/headphones-1.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="6ea87867-444f-467d-a2af-16af460c6db0"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/headphones-2.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="6ea87867-444f-467d-a2af-16af460c6db0"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/headphones-3.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="6ea87867-444f-467d-a2af-16af460c6db0"></div> </div>  <div class=" w-[550px] h-400 mt-[50px]"> <div class="typewriter w-full h-auto bg-white bg-opacity-20 rounded-full px-8 py-4 gap-4 flex items-center justify-between text-lg capitalize"> <h4 class="truncate leading-[1.3] text-lg lg:text-2xl lg:leading-1.4 font-light text-white font-inter font-semibold">Wooden bridge hike near me</h4> <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="text-white flex-shrink-0 h-auto w-auto lg:h-[35px]"> <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> <line x1="12" y1="19" x2="12" y2="23"></line> <line x1="8" y1="23" x2="16" y2="23"></line> </svg> </div> <div class="animationImageLists hidden" data-imageId="ecfb9466-33cf-4a3d-b537-f473bf0c7d94"> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/trail-1.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/trail-2.png</span> </div> <div class="flex flex-col vertical gap-x-4 imageLists mt-4"> <img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/trail-1.png" class="typewriter-image mt-4 w-auto" alt="" width="450" height="200" data-imageId="ecfb9466-33cf-4a3d-b537-f473bf0c7d94"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/trail-2.png" class="typewriter-image mt-4 w-auto" alt="" width="450" height="200" data-imageId="ecfb9466-33cf-4a3d-b537-f473bf0c7d94"></div> </div>  <div class=" w-[550px] h-400 mt-[50px]"> <div class="typewriter w-full h-auto bg-white bg-opacity-20 rounded-full px-8 py-4 gap-4 flex items-center justify-between text-lg capitalize"> <h4 class="truncate leading-[1.3] text-lg lg:text-2xl lg:leading-1.4 font-light text-white font-inter font-semibold">Top goal scorer in women’s cup</h4> <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="text-white flex-shrink-0 h-auto w-auto lg:h-[35px]"> <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> <line x1="12" y1="19" x2="12" y2="23"></line> <line x1="8" y1="23" x2="16" y2="23"></line> </svg> </div> <div class="animationImageLists hidden" data-imageId="51f36867-2c32-45b4-9bd3-143d845df9ac"> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/soccer-1.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/soccer-2.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/soccer-3.png</span> </div> <div class="grid grid-cols-3 horizontal gap-x-4 imageLists mt-4"> <img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/soccer-1.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="51f36867-2c32-45b4-9bd3-143d845df9ac"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/soccer-2.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="51f36867-2c32-45b4-9bd3-143d845df9ac"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/soccer-3.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="51f36867-2c32-45b4-9bd3-143d845df9ac"></div> </div>  <div class=" w-[550px] h-400 mt-[50px]"> <div class="typewriter w-full h-auto bg-white bg-opacity-20 rounded-full px-8 py-4 gap-4 flex items-center justify-between text-lg capitalize"> <h4 class="truncate leading-[1.3] text-lg lg:text-2xl lg:leading-1.4 font-light text-white font-inter font-semibold">SKU 14290, 27381, 98063</h4> <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="text-white flex-shrink-0 h-auto w-auto lg:h-[35px]"> <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> <line x1="12" y1="19" x2="12" y2="23"></line> <line x1="8" y1="23" x2="16" y2="23"></line> </svg> </div> <div class="animationImageLists hidden" data-imageId="760e426a-2f67-4af8-9cec-3f007bc18302"> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/sku-1.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/sku-2.png</span> <span class="image">/files/live/sites/algolia-assets/files/algolia-home/banner-animation/sku-3.png</span> </div> <div class="grid grid-cols-3 horizontal gap-x-4 imageLists mt-4"> <img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/sku-1.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="760e426a-2f67-4af8-9cec-3f007bc18302"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/sku-2.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="760e426a-2f67-4af8-9cec-3f007bc18302"><img src="/files/live/sites/algolia-assets/files/algolia-home/banner-animation/sku-3.png" class="typewriter-image" alt="" width="180" height="200" data-imageId="760e426a-2f67-4af8-9cec-3f007bc18302"></div> </div></div> </div>  <div data-tracking="" class="teaser-container mx-auto "> <div class=" z-1 grid gap-x-4 gap-y-8 mb-12 lg:mb-16 grid-cols-2 md:grid-cols-8">    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/alltrails.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/culture-king.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/decathlon.webp" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/gymshark.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/ManoMano.webp" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/medium.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/slack.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center h-12 lg:h-24" > <img style="width:px; height:px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/swedol.webp" alt=""/> </div> </div> </div> </div> </div>  </div>   <div id="" data-tracking="home-gartner-block" class="main__container light"> <div class=" mx-auto max-w-[1440px] lg:p-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="" 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 lg:text-s42 mt-0 mb-4 text-grey-900 dark:text-white"> A recognized leader</h2> </div> </div>    <div class="teaser right_image"> <div class="cmp-teaser flex flex-wrap items-center justify-between gap-6 lg:gap-0"> <div class="cmp-teaser__image px-4 md:w-5/12 md:order-2"> <a href="/lp/gartner-mq-2024" target=""> <img src='/files/live/sites/algolia-assets/files/algolia-home/garter-1x1.jpg' alt="" class="w-full" /> <figcaption class="block text-left font-inter font-normal leading-1.5 text-xs lg:text-sm text-grey-900 text-center"></figcaption> </a> </div> <div class="cmp-teaser__content w-full md:w-5/12 lg:px-4"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora font-bold mb-2 dark:text-white'>The 2024 Gartner® Magic Quadrant™ for Search and Product Discovery</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg text-grey-700 dark:text-grey-200 teaser-richtext check"><p>Algolia is in the 2024 Gartner® Magic Quadrant™ for Search and Product Discovery positioned furthest for Completeness of Vision. Learn more by downloading a copy of the report.</p> </span> </div> <div class="cmp-teaser__action-container">   <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="/lp/gartner-mq-2024" 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]"> Learn more</span> </a> </div> </div> </div> </div> </div> </div></div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; } .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-arrow { display: none !important; } } */ </style></div> </div> </div> </div>  <div id="" data-tracking="home-aisearch-block" class="main__container bg-secondary"> <div class=" mx-auto max-w-[1440px] lg:p-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12"> <div class="container mx-auto mb-20"> <div class="flex flex-col items-start mb-8"> <div class=" text-start lg:w-6/12 lg:w-[90%] w-full"> <h2 class="font-sora font-bold mt-0 mb-4 text-grey-900 text-s34 lg:text-s42 dark:text-white"> The one-stop shop for AI search</h2> <div class="font-normal mb-8 text-grey-700 dark:text-grey-200 text-lg"><p>Algolia’s AI search suite has unique strengths</p> </div> </div> </div> <div class="accordion flex flex-wrap items-center justify-between"> <div class="cmp-teaser__images lg:block hidden md:w-5/12 px-4 md:order-2 "> <img src='/files/live/sites/algolia-assets/files/algolia-home/HomePage_-_Easy_to_Use-min.png' alt="" class="w-full hidden" data-accordion-id="1aaf73ec-bc9b-4055-97f3-cc87653bb471"/> <img src='/files/live/sites/algolia-assets/files/algolia-home/HomePage_-_Fast-min.avif' alt="" class="w-full hidden" data-accordion-id="8f49ecff-dd98-4a66-b04b-36d807446e02"/> <img src='/files/live/sites/algolia-assets/files/algolia-home/HomePage_-_Scalable-min.avif' alt="" class="w-full hidden" data-accordion-id="46d64871-509a-4e09-ab0a-489890d9ba7f"/> </div> <div class="cmp-accordion w-full md:w-[45%] " data-expansion-type="multiItem"> <div class="listAnimation"> <div class="cmp-accordion__item"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" data-uid="1aaf73ec-bc9b-4055-97f3-cc87653bb471" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 ps-0 text-2xl text-left font-sora font-light" id="accordion-1aaf73ec-bc9b-4055-97f3-cc87653bb471-button" aria-expanded="false" aria-controls="accordion-1aaf73ec-bc9b-4055-97f3-cc87653bb471-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora text-lg lg:text-2xl font-bold dark:text-white"> Easy to use</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 pb-6 p-0" id="accordion-1aaf73ec-bc9b-4055-97f3-cc87653bb471-panel" aria-labelledby="accordion-1aaf73ec-bc9b-4055-97f3-cc87653bb471-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 font-inter font-normal text-[16px] lg:text-[18px] dark:text-grey-200 "> <div class="algoliaRichText check"><p>Implement our APIs in minutes and gain easy control over rankings.</p> </div></div> <div class="cmp-teaser__image px-4 md:w-5/12 mb-4"> <img src='/files/live/sites/algolia-assets/files/algolia-home/HomePage_-_Easy_to_Use-min.png' alt="" class="w-full lg:hidden" data-accordion-id="1aaf73ec-bc9b-4055-97f3-cc87653bb471" /> </div> </div> </div> </div> <div class="listAnimation"> <div class="cmp-accordion__item"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" data-uid="8f49ecff-dd98-4a66-b04b-36d807446e02" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 ps-0 text-2xl text-left font-sora font-light" id="accordion-8f49ecff-dd98-4a66-b04b-36d807446e02-button" aria-expanded="false" aria-controls="accordion-8f49ecff-dd98-4a66-b04b-36d807446e02-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora text-lg lg:text-2xl font-bold dark:text-white"> Fast</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 pb-6 p-0" id="accordion-8f49ecff-dd98-4a66-b04b-36d807446e02-panel" aria-labelledby="accordion-8f49ecff-dd98-4a66-b04b-36d807446e02-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 font-inter font-normal text-[16px] lg:text-[18px] dark:text-grey-200 "> <div class="algoliaRichText check"><p>Search as quick as you type, with the fastest enterprise AI search we know of.</p> </div></div> <div class="cmp-teaser__image px-4 md:w-5/12 mb-4"> <img src='/files/live/sites/algolia-assets/files/algolia-home/HomePage_-_Fast-min.avif' alt="" class="w-full lg:hidden" data-accordion-id="8f49ecff-dd98-4a66-b04b-36d807446e02" /> </div> </div> </div> </div> <div class="listAnimation"> <div class="cmp-accordion__item"> <div class="cmp-accordion__header dark:hover:bg-inherit hover:bg-xenon-100"> <button type="button" data-uid="46d64871-509a-4e09-ab0a-489890d9ba7f" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full px-4 py-4 lg:py-6 ps-0 text-2xl text-left font-sora font-light" id="accordion-46d64871-509a-4e09-ab0a-489890d9ba7f-button" aria-expanded="false" aria-controls="accordion-46d64871-509a-4e09-ab0a-489890d9ba7f-panel"> <span class="cmp-text flex flex-wrap items-center flex-1 font-sora text-lg lg:text-2xl font-bold dark:text-white"> Scalable</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 pb-6 p-0" id="accordion-46d64871-509a-4e09-ab0a-489890d9ba7f-panel" aria-labelledby="accordion-46d64871-509a-4e09-ab0a-489890d9ba7f-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 font-inter font-normal text-[16px] lg:text-[18px] dark:text-grey-200 "> <div class="algoliaRichText check"><p>Use the search engine trusted with more than 1.7+ trillion queries a year.</p> </div></div> <div class="cmp-teaser__image px-4 md:w-5/12 mb-4"> <img src='/files/live/sites/algolia-assets/files/algolia-home/HomePage_-_Scalable-min.avif' alt="" class="w-full lg:hidden" data-accordion-id="46d64871-509a-4e09-ab0a-489890d9ba7f" /> </div> </div> </div> </div></div> </div> </div>   <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/ai-search" 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]"> Read more</span> </a> </div> </div> </div> </div> </div> </div>  <div id="" data-tracking="home-stats-block" class="main__container "> <div class=" mx-auto max-w-[1440px] lg:p-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="" class="mx-auto teaser-big-bold-title "> <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 lg:text-s42 mt-0 mb-4 text-grey-900 dark:text-white"> Scaling ahead of your needs</h2> <div class="font-normal mb-8 text-grey-700 dark:text-grey-200 text-base lg:text-lg"><p>Customers depend on Algolia to handle more queries than any other hosted search engine.</p> </div> </div> </div> <div class=" z-1 grid gap-x-4 lg:gap-y-8 md:grid-cols-3 md:[&>*]:border-l md:[&>*:nth-child(1)]:border-none md:[&>*:nth-child(3n+1)]:border-none ">    <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>   <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>   <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>   <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">30+ billion</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>records indexed</p> </span> </div> </div> </div> </div>   <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">100%</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>compliant & secure with SAML, SOC3, ISO27001, HIPAA, C5, MACH Alliance</p> </span> </div> </div> </div> </div>   <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>   <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 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 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 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 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 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; } .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; } } .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 data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" 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 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]"> Contact sales</span> </a> </div> </div> </div> </div> </div> </div>  <div id="" data-tracking="home-enterprise-block" class="main__container bg-secondary"> <div class=" mx-auto max-w-[1440px] lg:p-28 px-4 py-8"> <div class="grid grid-cols-12 md:gap-x-16 gap-y-8"> <div class="col-span-12 md:col-span-6">   <div data-tracking="" class="mx-auto ">   <div class="teaser default "> <div class="cmp-teaser flex flex-wrap items-center justify-center"> <div class="cmp-teaser__content text-center md:text-left"> <h2 class="cmp-teaser__title text-[32px] lg:text-s42 leading-snug font-sora font-bold mb-2 dark:text-white">Enterprises, delight your customers</h2> <div class="cmp-teaser__description mb-6 mt-4"> <span class="text-lg mb-4 text-slate-600 dark:text-white teaser-richtext check"><p>Grow your customer satisfaction - and sales. Because when your customers feel understood, they click and they come back.</p> <p>Get help from our experts to start fast and run efficiently.</p> </span> </div> <div class="cmp-teaser__action-container">   <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-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]"> Contact sales</span> </a> </div> </div> </div> </div> </div> </div></div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; } .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: 29%; top: -62px; } .slick-next{ left: 55%; top: -62px; } } </style></div> <div class="col-span-12 md:col-span-6">  <div data-tracking="" class="mx-auto mt-16 md:mt-4"> <div class="slick multi-item-carousel" data-dots="false" data-arrows="true" data-centermode="false" data-autoplay="false" data-variablewidth="false" data-infinitescroll="true" data-slidetoshowxl="1" data-slidetoscrollxl="1" data-slidetoshowlg="1" data-slidetoscrolllg="1" data-slidetoshowmd="1" data-slidetoscrollmd="1" data-slidetoshowsm="1" data-slidetoscrollsm="1">     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__image w-full h-full lg:mb-8 mb-6"> <img style="width:px; height:px;" src='/files/live/sites/algolia-assets/files/algolia-home/the-times.svg' class="w-[220px] mx-auto max-w-full object-contain max-h-[100px]" alt="" /> </div> <div class="cmp-teaser__content w-full text-center"> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><blockquote>“Algolia is a breeze to work with. With Algolia, our editorial team has seen significant productivity improvements when building the daily online edition of The Times and weekly edition of The Sunday Times, with search being 300-500 times faster than our prior solution.”</blockquote> <p>Matt Taylor</p> <p>Editorial Product Manager @ The Times</p> </span> </div> </div> </div> </div>     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__image w-full h-full lg:mb-8 mb-6"> <img style="width:px; height:px;" src='/files/live/sites/algolia-assets/files/algolia-home/ltk.png' class="w-[220px] mx-auto max-w-full object-contain max-h-[100px]" alt="" /> </div> <div class="cmp-teaser__content w-full text-center"> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><blockquote>“Algolia is very fast — able to keep up with our level of traffic… The API and SDK options are really great, and the ability to handle traffic at scale (we have a high volume)”</blockquote> <p>Matt Goorley</p> <p>Engineering Manager @ LTK</p> </span> </div> </div> </div> </div>     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__image w-full h-full lg:mb-8 mb-6"> <img style="width:px; height:px;" src='/files/live/sites/algolia-assets/files/algolia-home/swedol%20(1).png' class="w-[220px] mx-auto max-w-full object-contain max-h-[100px]" alt="" /> </div> <div class="cmp-teaser__content w-full text-center"> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><blockquote>“[Algolia] was very professional from the start. We had a great Customer Success Manager and team that provided a lot of help and was a great partner.”</blockquote> <p>Clint Fischerström</p> <p>Head of Ecommerce @ Swedol</p> </span> </div> </div> </div> </div>     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__image w-full h-full lg:mb-8 mb-6"> <img style="width:px; height:px;" src='/files/live/sites/algolia-assets/files/algolia-home/hershey.png' class="w-[220px] mx-auto max-w-full object-contain max-h-[100px]" alt="" /> </div> <div class="cmp-teaser__content w-full text-center"> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><blockquote>“I think we’ve grown leaps and bounds with Algolia. There's a lot of features that we still can tap into, which is great because I feel like we've gotten a ton out of it already.”</blockquote> <p>Geoff Lyman</p> <p>Digital Experience Solutions Manager @ Hershey's</p> </span> </div> </div> </div> </div>     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__image w-full h-full lg:mb-8 mb-6"> <img style="width:px; height:px;" src='/files/live/sites/algolia-assets/files/algolia-home/shoe-carnival.svg' class="w-[220px] mx-auto max-w-full object-contain max-h-[100px]" alt="" /> </div> <div class="cmp-teaser__content w-full text-center"> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><blockquote>“Instead of having to go into the back end and the catalog—which would have been a technical headache—we were able to figure it out in a matter of a day, test it, and ‘boom’ it’s live.”</blockquote> <p>Courtney Grisham</p> <p>Director of E-Commerce @ Shoe Carnival</p> </span> </div> </div> </div> </div></div> </div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; } .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; } /* ----------------- Start for teaser 1 view only --------------- */ .teaser .cmp-teaser .cmp-teaser__content blockquote{ margin-bottom: 1rem; } /* -----------------End for teaser 1 view only --------------- */ @media (max-width: 768px) { .slick-prev{ left: 132px; top: -62px; } .slick-next{ left: 188px; top: -62px; } .multi-item-carousel .teaser h5{ font-size: 1rem; } } .multi-item-carousel .teaser h5{ font-weight: normal; font-size: 1.5rem; } .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; } .slick .teaser.slick-slide { display: flex; flex-direction: column; align-items: center; } .slick .teaser.slick-slide .cmp-teaser { max-width: 800px; } .teaser-item-big-bold-title .cmp-teaser .cmp-teaser__content > .cmp-teaser__title{ font-size: 42px; font-weight: 700; } </style></div> </div> </div> </div>  <div id="" data-tracking="home-startup-block" class="main__container "> <div class=" mx-auto max-w-[1440px] lg:p-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="" class="teaser-container mx-auto "> <div class="flex flex-col items-center mb-4"> <div class=" text-center lg:w-[90%] w-full"> <h2 class="font-sora mt-0 mb-4 text-grey-900 dark:text-white text-s34 lg:text-s42 font-bold"> For startups - all the power, none of the headache</h2> <div class="font-normal mb-8 text-grey-700 dark:text-grey-200"><p>Startups, you can get going in minutes and scale for decades. Whatever your future demands, and however much you grow - Algolia has you covered.</p> <p>Eligible startups can begin with $10k of credits from Algolia and $100k from startup partners.</p> </div> </div> </div> <div class=" z-1 grid gap-x-4 gap-y-8 mb-12 lg:mb-16 grid-cols-2 md:grid-cols-5">    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center " > <img style="width:120.0px; height:80.0px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/brex_1.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center " > <img style="width:100.0px; height:58.0px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/notion.png" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center " > <img style="width:100.0px; height:50.0px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/y-combinator.png" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center " > <img style="width:170.0px; height:80.0px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/retool.svg" alt=""/> </div> </div> </div>    <div class="teaser imageList flex justify-center items-center "> <div class="cmp-teaser flex flex-wrap items-center justify-center flex-col"> <div class="cmp-teaser__image flex items-center justify-center " > <img style="width:140.0px; height:80.0px;" class="max-w-full object-contain m-auto w-auto h-full aspect-[3/2]" src="/files/live/sites/algolia-assets/files/algolia-home/asana.svg" alt=""/> </div> </div> </div> </div> </div>  <div class="algoliaCtaContainer flex gap-4 shrink-0 flex-wrap lg:flex-row flex-col justify-center mt-16">   <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/industries/startups" 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 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]"> Learn more</span> </a> </div> </div> </div></div> </div> </div> </div>  <div id="" data-tracking="" class="main__container bg-tertiary dark"> <div class=" mx-auto max-w-[1440px] lg:p-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="" class="codesnippet_cmp py-8 my-8 lg:py-0 lg:my-0"> <div class="flex flex-col items-center mb-16"> <div class=" text-center"> <h2 class="font-sora font-bold text-s34 lg:text-s42 mt-0 mb-4 text-grey-900 dark:text-white"> Build faster and better</h2> <div class="text-base lg:text-lg text-grey-700 dark:text-grey-200"> <p>AI search made simple. Index your content with our API clients or partner integrations, fine-tune your rankings and launch with our UI components. All in minutes.</p> </div> </div> </div>  <div class="codesnippet-tabs-comp rounded-lg overflow-hidden flex flex-col lg:flex-row gap-4"> <div class="cmp-tabs flex flex-col lg:flex-row w-full h-auto lg:h-[574px] w-full lg:w-6/12 "> <div class="w-full lg:w-[30%]"> <div class="relative dropdown bg-gradient-to-b from-xenon-800 to-xenon-900"> <button class="dropdown-toggle-btn flex items-center w-full p-4 pr-8 text-sm/none text-grey-600 hover:text-grey-700"> <span class="icon shrink-0"> </span> <span class="text w-full flex font-sora text-sm text-left text-white ps-5 items-center"> <span class="textdrop text-nowrap capitalize"></span> <svg class="w-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </span> </button> <div class="dropdown-menu absolute hidden z-10 w-full rounded-md border border-grey-100 bg-white shadow-lg" role="menu"> <div class="p-2"> <li role="button" tabindex="0" data-type="front-end" class="block rounded-lg px-4 py-2 text-sm text-grey-900 hover:bg-xenon-500 hover:text-white" role="menuitem"> <img src='/files/live/sites/algolia-assets/files/algolia-home/svgviewer-png-output%20(1).png' alt="" class="hidden"/> Front-end</li><li role="button" tabindex="0" data-type="back-end" class="block rounded-lg px-4 py-2 text-sm text-grey-900 hover:bg-xenon-500 hover:text-white" role="menuitem"> <img src='/files/live/sites/algolia-assets/files/algolia-home/svgviewer-output%20(2)%20(1).png' alt="" class="hidden"/> Back-end</li><li role="button" tabindex="0" data-type="analytics" class="block rounded-lg px-4 py-2 text-sm text-grey-900 hover:bg-xenon-500 hover:text-white" role="menuitem"> <img src='/files/live/sites/algolia-assets/files/algolia-home/svgviewer-output%20(2)%20(1).png' alt="" class="hidden"/> Analytics</li></div> </div> </div> <button id="language-dropdown" class="block lg:hidden bg-white text-grey-500 w-full text-left font-sora text-base p-4 ">Dropdown</button> <ol class="cmp-tabs__tablist gap-4 h-full hidden lg:block bg-white lg:bg-xenon-800 px-0 lg:px-8 lg:py-6 border-t border-grey-600 flex flex-wrap flex-col border-b lg:[&_.active]:text-white text-grey-500 lg:text-grey-400 font-sora text-base "> <li id="front-end-1" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="front-end" data-languagename="JavaScript"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/javascript.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="JavaScript"> JavaScript</span> </li> <li id="front-end-2" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="front-end" data-languagename="React"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/react.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="React"> React</span> </li> <li id="front-end-3" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="front-end" data-languagename="Android"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/android.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Android"> Android</span> </li> <li id="front-end-4" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="front-end" data-languagename="Vue"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/vue.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Vue"> Vue</span> </li> <li id="front-end-5" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="front-end" data-languagename="Angular"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/angular.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Angular"> Angular</span> </li> <li id="front-end-6" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="front-end" data-languagename="IOS"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/ios.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="IOS"> IOS</span> </li> <li id="back-end-1" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Ruby"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/ruby.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Ruby"> Ruby</span> </li> <li id="back-end-2" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Rails"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/rails.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Rails"> Rails</span> </li> <li id="back-end-3" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Python"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/python.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Python"> Python</span> </li> <li id="back-end-4" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Django"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/django.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Django"> Django</span> </li> <li id="back-end-5" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Php"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/php.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Php"> Php</span> </li> <li id="back-end-6" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Symfony"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/symphony.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Symfony"> Symfony</span> </li> <li id="back-end-7" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Laravel"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/laravel.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Laravel"> Laravel</span> </li> <li id="back-end-8" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="JavaScript"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/javascript.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="JavaScript"> JavaScript</span> </li> <li id="back-end-9" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="java"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/java.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="java"> java</span> </li> <li id="back-end-10" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Scala"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/scala.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Scala"> Scala</span> </li> <li id="back-end-11" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Go"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/go.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Go"> Go</span> </li> <li id="back-end-12" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="C#"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/csharp.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="C#"> C#</span> </li> <li id="back-end-13" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Kotlin"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/kotlin.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Kotlin"> Kotlin</span> </li> <li id="back-end-14" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="back-end" data-languagename="Swift"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/swift.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Swift"> Swift</span> </li> <li id="analytics-1" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Php"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/php.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Php"> Php</span> </li> <li id="analytics-2" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Ruby"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/ruby.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Ruby"> Ruby</span> </li> <li id="analytics-3" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="JavaScript"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/javascript.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="JavaScript"> JavaScript</span> </li> <li id="analytics-4" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Python"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/python.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Python"> Python</span> </li> <li id="analytics-5" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Swift"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/swift.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Swift"> Swift</span> </li> <li id="analytics-6" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Android"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/android.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Android"> Android</span> </li> <li id="analytics-7" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="C#"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/csharp.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="C#"> C#</span> </li> <li id="analytics-8" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Java"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/java.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Java"> Java</span> </li> <li id="analytics-9" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Go"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/go.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Go"> Go</span> </li> <li id="analytics-10" class="cmp-tabs__tab flex gap-4 border-b-2 border-transparent cursor-pointer active" tabindex="0" role="tab" aria-selected="true" aria-controls="" data-type="analytics" data-languagename="Scala"> <span class="hidden lg:block icon shrink-0"> <img src='/files/live/sites/algolia-assets/files/icons/scala.svg' alt="" class=""/> </span> <span class="languagename w-full" data-languagename="Scala"> Scala</span> </li> </ol> </div> <div class="cmp-tabs__tabpanels w-full lg:w-[70%] bg-xenon-800 shadow-xl shadow-[#000000b0] h-full"> <div id="" class="cmp-tabs__tabpanel h-4/5" role="tabpanel" aria-labelledby="front-end-1" aria-hidden="false"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <pre> <code><div id="searchbox"></div> <div id="refinement"></div> <div id="hits"></div> <script> const { searchBox, hits } = instantsearch.widgets; search.addWidgets([ searchBox({ container: "#searchbox" }), hits({ container: "#hits" }), refinementList({ container: "#refinement", attribute: "company" }), ]); search.start(); </script></code></pre> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneJavaScript lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="JavaScript" target="_self">Build with JavaScript<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="front-end-2" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <pre> <code>const App = () => ( <InstantSearch> <SearchBox /> <Hits /> <Pagination /> <RefinementList attribute="company" /> </InstantSearch> );</code></pre> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneReact lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="React" target="_self">Build with React<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="front-end-3" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p><RelativeLayout</p> <p>xmlns:algolia="http://schemas.android.com/apk/res-auto"</p> <p>xmlns:android="http://schemas.android.com/apk/res/android"</p> <p>android:layout_width="match_parent"</p> <p>android:layout_height="match_parent"></p> <p> </p> <p><com.algolia.instantsearch.ui.views.SearchBox</p> <p>  android:id="@+id/search_box"</p> <p>  android:layout_width="match_parent"</p> <p>  android:layout_height="wrap_content"/></p> <p> </p> <p><com.algolia.instantsearch.ui.views.Stats</p> <p>  android:id="@+id/search_box"</p> <p>  android:layout_width="match_parent"</p> <p>  android:layout_height="wrap_content"/></p> <p> </p> <p><com.algolia.instantsearch.ui.views.Hits</p> <p>  android:layout_width="match_parent"</p> <p>  android:layout_height="wrap_content"</p> <p>  algolia:itemLayout="@layout/hits_item"/></p> <p></RelativeLayout></p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneAndroid lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Android" target="_self">Build with Android<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="front-end-4" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p><ais-instant-search></p> <p><ais-search-box /></p> <p><ais-refinement-list</p> <p>  attribute="company"</p> <p>/></p> <p><ais-hits /></p> <p><ais-pagination /></p> <p></ais-instant-search></p></code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneVue lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Vue" target="_self">Build with Vue<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="front-end-5" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p><ais-instantsearch></p> <p>  <ais-search-box></ais-search-box></p> <p>  <ais-refinement-list</p> <p>    [attribute]="company"</p> <p>  ></ais-refinement-list></p> <p>  <ais-hits></ais-hits></p> <p>  </ais-instantsearch></p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneAngular lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Angular" target="_self">Build with Angular<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="front-end-6" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>import InstantSearch</p> <p>override func viewDidLoad() {</p> <p>super.viewDidLoad()</p> <p>let searchBar = SearchBarWidget(frame: ...)</p> <p>let statsWidget = StatsLabelWidget(frame: ...)</p> <p>self.view.addSubview(searchBar)</p> <p>self.view.addSubview(statsWidget)</p> <p>InstantSearch.shared.registerAllWidgets(in: self.view)}</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneIOS lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="IOS" target="_self">Build with IOS<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5" role="tabpanel" aria-labelledby="back-end-1" aria-hidden="false"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>my_index = client.init_index('contacts')</p> <p>my_index.save_object({</p> <p>  firstname: "Jimmie",</p> <p>  lastname: "Barninger",</p> <p>  company: "California Paint"</p> <p>})</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneRuby lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Ruby" target="_self">Build with Ruby<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-2" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>class Contact < ActiveRecord::Base</p> <p>  include AlgoliaSearch</p> <p>  algoliasearch do</p> <p>    attribute :firstname, :lastname, :company</p> <p>  end</p> <p>end</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneRails lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Rails" target="_self">Build with Rails<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-3" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>myIndex = apiClient.init_index("contacts")</p> <p>myIndex.save_object({</p> <p>  "firstname": "Jimmie",</p> <p>  "lastname": "Barninger",</p> <p>  "company": "California Paint"</p> <p>})</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link nonePython lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Python" target="_self">Build with Python<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-4" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>from algoliasearch_django import AlgoliaIndex</p> <p>from algoliasearch_django.decorators import register</p> <p>@register(YourModel)</p> <p>class YourModelIndex(AlgoliaIndex):</p> <p>    fields = ('firstname', 'lastname', 'company')</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneDjango lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Django" target="_self">Build with Django<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-5" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>$myIndex = $apiClient->initIndex("contacts");</p> <p>$myIndex->saveObject([</p> <p>  "firstname" => "Jimmie",</p> <p>  "lastname" => "Barninger",</p> <p>  "company" => "California Paint",</p> <p>]);</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link nonePhp lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Php" target="_self">Build with Php<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-6" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>/**</p> <p> * @ORM\Entity</p> <p> */</p> <p>class Contact {</p> <p>  /**</p> <p>   * @var string</p> <p>   *</p> <p>   * @ORM\Column(name="firstname", type="string")</p> <p>   * @Group({searchable})</p> <p>   */</p> <p>  protected $firstname;</p> <p>  /**</p> <p>   * @var string</p> <p>   *</p> <p>   * @ORM\Column(name="lastname", type="string")</p> <p>   * @Group({searchable})</p> <p>   */</p> <p>  protected $lastname;</p> <p>  /**</p> <p>   * @var string</p> <p>   *</p> <p>   * @ORM\Column(name="company", type="string")</p> <p>   * @Group({searchable})</p> <p>   */</p> <p>  protected $company;</p> <p>}</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneSymfony lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Symfony" target="_self">Build with Symfony<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-7" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>use Illuminate\Database\Eloquent\Model;</p> <p>use Laravel\Scout\Searchable;</p> <p>class Contact extends Model {</p> <p>  use Searchable;</p> <p>}</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneLaravel lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Laravel" target="_self">Build with Laravel<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-8" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>const myIndex = apiClient</p> <p>  .initIndex('contacts');</p> <p>myIndex.saveObject({</p> <p>  firstname: 'Jimmie',</p> <p>  lastname: 'Barninger',</p> <p>  company: 'California Paint',</p> <p>});</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneJavaScript lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="JavaScript" target="_self">Build with JavaScript<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-9" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>Index<Contact> index = client</p> <p>  .initIndex("contacts", Contact.class);</p> <p>index.saveObject(</p> <p>  new Contact()</p> <p>    .setFirstname("Jimmie")</p> <p>    .setLastname("Barninger")</p> <p>    .setCompany("California Paint")</p> <p>);</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link nonejava lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="java" target="_self">Build with java<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-10" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>import algolia.AlgoliaDsl._</p> <p>import scala.concurrent.ExecutionContext.Implicits.global</p> <p>case class Contact(</p> <p>  firstname: String,</p> <p>  lastname: String,</p> <p>  company: String</p> <p>)</p> <p>val indexing: Future[Indexing] = client.execute {</p> <p>  index into "contacts" `object` Contact(</p> <p>    "Jimmie",</p> <p>    "Barninger",</p> <p>    "California Paint"</p> <p>  )</p> <p>}</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneScala lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Scala" target="_self">Build with Scala<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-11" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>object := map[string]string{</p> <p>  "firstname": "Jimmie",</p> <p>  "lastname":  "Barninger",</p> <p>  "company":   "California Paint"</p> <p>}</p> <p>res, err := index.SaveObject(object)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneGo lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Go" target="_self">Build with Go<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-12" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>SearchIndex index = client.InitIndex("contacts");</p> <p>var contact = new Contact {</p> <p>  FirstName = "Jimmie",</p> <p>  LastName = "Barninger",</p> <p>  Company = "California Paint"</p> <p>};</p> <p>index.SaveObject(contact);</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneC# lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="C#" target="_self">Build with C#<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-13" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>val index = client.initIndex(IndexName("contacts"))</p> <p>val json = json {</p> <p>  "firstname" to "Jimmie"</p> <p>  "lastname" to "Barninger"</p> <p>  "company" to "California Paint" }</p> <p>index.saveObject(json)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneKotlin lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Kotlin" target="_self">Build with Kotlin<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="back-end-14" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>let myIndex = apiClient.getIndex("contacts")</p> <p>let n = [</p> <p>  "firstname": "Jimmie",</p> <p>  "lastname": "Barninger",</p> <p>  "company": "California Paint"</p> <p>]</p> <p>myIndex.saveObject(n)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneSwift lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Swift" target="_self">Build with Swift<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5" role="tabpanel" aria-labelledby="analytics-1" aria-hidden="false"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>Insights.register(</p> <p>  appId: "ALGOLIA_APP_ID",</p> <p>  apiKey: "ALGOLIA_API_KEY",</p> <p>  userToken: "user-123456"</p> <p>)</p> <p>Insights.shared?.clickedAfterSearch(</p> <p>  eventName: "Product Clicked",</p> <p>  indexName: "products",</p> <p>  objectIDs: ["9780545139700"],</p> <p>  positions: [7],</p> <p>  queryID: "cba8245617aeace44"</p> <p>)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link nonePhp lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Php" target="_self">Build with Php<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-2" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>insights = Algolia::Insights::Client.create('ALGOLIA_APP_ID', 'ALGOLIA_API_KEY')</p> <p>insights.user('user-123456').clicked_object_ids_after_search(</p> <p>  'Product Clicked',</p> <p>  'products',</p> <p>  ['9780545139700'],</p> <p>  [7],</p> <p>  'cba8245617aeace44'</p> <p>)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneRuby lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Ruby" target="_self">Build with Ruby<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-3" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>// This requires installing the search-insights separate library:</p> <p>// https://github.com/algolia/search-insights.js</p> <p>// https://www.npmjs.com/package/search-insights</p> <p>aa('clickedObjectIDsAfterSearch', {</p> <p>  userToken: 'user-123456',</p> <p>  eventName: 'Product Clicked',</p> <p>  index: 'products',</p> <p>  queryID: 'cba8245617aeace44',</p> <p>  objectIDs: ['9780545139700'],</p> <p>  positions: [7],</p> <p>});</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneJavaScript lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="JavaScript" target="_self">Build with JavaScript<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-4" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>insights = client.init_insights_client().user('user-123456')</p> <p>insights.clicked_object_ids_after_search(</p> <p>  'Product Clicked',</p> <p>  'products',</p> <p>  ['9780545139700'],</p> <p>  [7],</p> <p>  'cba8245617aeace44'</p> <p>)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link nonePython lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Python" target="_self">Build with Python<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-5" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>Insights.register(</p> <p>  appId: "ALGOLIA_APP_ID",</p> <p>  apiKey: "ALGOLIA_API_KEY",</p> <p>  userToken: "user-123456"</p> <p>)</p> <p>Insights.shared?.clickedAfterSearch(</p> <p>  eventName: "Product Clicked",</p> <p>  indexName: "products",</p> <p>  objectIDs: ["9780545139700"],</p> <p>  positions: [7],</p> <p>  queryID: "cba8245617aeace44"</p> <p>)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneSwift lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Swift" target="_self">Build with Swift<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-6" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>Insights.register(</p> <p>  context,</p> <p>  "ALGOLIA_APP_ID",</p> <p>  "ALGOLIA_API_KEY",</p> <p>  "user-123456"</p> <p>)</p> <p>Insights.shared?.clickedAfterSearch(</p> <p>  "Product Clicked",</p> <p>  "products",</p> <p>  "cba8245617aeace44",</p> <p>  EventObjects.IDs("9780545139700"),</p> <p>  listOf(7)</p> <p>)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneAndroid lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Android" target="_self">Build with Android<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-7" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>var insights = new InsightsClient(</p <p>  "ALGOLIA_APP_ID",</p> <p>  "ALGOLIA_API_KEY"</p> <p>).User("user-123456");</p> <p>insights.ClickedObjectIDsAfterSearch(</p> <p>  "Product Clicked",</p> <p>  "products",</p> <p>  new List<string> { "9780545139700" },</p> <p>  new List<uint> { 7 },</p> <p>  "cba8245617aeace44"</p> <p>);</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneC# lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="C#" target="_self">Build with C#<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-8" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>AsyncUserInsightsClient insights = new AsyncInsightsClient(</p> <p>  "ALGOLIA_APP_ID",</p> <p>  "ALGOLIA_API_KEY",</p> <p>  client</p> <p>).user("user-123456");</p> <p>insights.clickedObjectIDsAfterSearch(</p> <p>  "Product Clicked",</p> <p>  "products",</p> <p>  Arrays.asList("9780545139700"),</p> <p>  new ArrayList<>(Arrays.asList(7l)),</p> <p>  "cba8245617aeace44"</p> <p>);</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneJava lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Java" target="_self">Build with Java<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-9" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>client := insights.NewClient(</p> <p>  "ALGOLIA_APP_ID",</p> <p>  "ALGOLIA_API_KEY",</p> <p>).User("user-123456")</p> <p>res, err := client.ClickedObjectIDsAfterSearch(</p> <p>  "Product Clicked",</p> <p>  "products",</p> <p>  []string{"9780545139700"},</p> <p>  []int{7},</p> <p>  "cba8245617aeace44",</p> <p>)</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneGo lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Go" target="_self">Build with Go<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div id="" class="cmp-tabs__tabpanel h-4/5 hidden" role="tabpanel" aria-labelledby="analytics-10" aria-hidden="true"> <div class="overflow-auto h-full"> <pre class="line-numbers flex flex-col text-white mt-7"></pre> <pre class="code-area text-sm codeToCopy !mt-0 !pt-0"> <code class="language-js font-sora line-numbers"> <p>client.execute {</p> <p>  send event ClickedObjectIDsAfterSearch(</p> <p>    "user-123456",</p> <p>    "Product Clicked",</p> <p>    "products",</p> <p>    Seq("9780545139700"),</p> <p>    Seq(7),</p> <p>    "cba8245617aeace44"</p> <p>  )</p> <p>}</p> </code> </pre> </div> <a href="" class="flex items-center justify-center btn-link noneScala lg:float-right m-8 rounded-r-full bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded" aria-label="Scala" target="_self">Build with Scala<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="ml-2 mr-3 sm:ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> </div> </div> <div class="codesnippet-accordion w-full lg:w-6/12 mt-12 lg:mt-0">   <div data-tracking="" class="mx-auto"> <div class="accordion mb-8"> <div class="cmp-accordion px-4" data-expansion-type="multiItem">  <div class=""> <div class="cmp-accordion__item [&>*:nth-child(1)]:border-b "> <div class="cmp-accordion__header"> <button type="button" data-uid="5bd7b840-9bcd-4124-b2d5-3874b1d61752" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full p-4 text-2xl text-left font-sora font-light" id="accordion-5bd7b840-9bcd-4124-b2d5-3874b1d61752-button" aria-expanded="false" aria-controls="accordion-5bd7b840-9bcd-4124-b2d5-3874b1d61752-panel"> <span class="mr-4 text-blue-600"> <img src="/files/live/sites/algolia-assets/files/icons/book.svg" alt=""> </span> <span class="cmp-text flex flex-wrap items-center flex-1"> Documentation</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 pt-0 p-4" id="accordion-5bd7b840-9bcd-4124-b2d5-3874b1d61752-panel" aria-labelledby="accordion-5bd7b840-9bcd-4124-b2d5-3874b1d61752-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 pl-10"> <div class="algoliaRichText check"><p>Learn from extensive developer documentation to implement search and discovery in your ecosystem.</p> </div>   <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/" 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]"> See 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 class=""> <div class="cmp-accordion__item [&>*:nth-child(1)]:border-b "> <div class="cmp-accordion__header"> <button type="button" data-uid="e5aa914f-f195-4000-8214-0157bf5d2050" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full p-4 text-2xl text-left font-sora font-light" id="accordion-e5aa914f-f195-4000-8214-0157bf5d2050-button" aria-expanded="false" aria-controls="accordion-e5aa914f-f195-4000-8214-0157bf5d2050-panel"> <span class="mr-4 text-blue-600"> <img src="/files/live/sites/algolia-assets/files/icons/terminal.svg" alt=""> </span> <span class="cmp-text flex flex-wrap items-center flex-1"> Developer Hub</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 pt-0 p-4" id="accordion-e5aa914f-f195-4000-8214-0157bf5d2050-panel" aria-labelledby="accordion-e5aa914f-f195-4000-8214-0157bf5d2050-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 pl-10"> <div class="algoliaRichText check"><p>Explore all the API clients, UI components & integrations to build search & discovery experiences.</p> </div>   <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/developers/" 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]"> See 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 class=""> <div class="cmp-accordion__item [&>*:nth-child(1)]:border-b "> <div class="cmp-accordion__header"> <button type="button" data-uid="5ecdbfa8-bea8-4acc-96e4-2427ffa5c882" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full p-4 text-2xl text-left font-sora font-light" id="accordion-5ecdbfa8-bea8-4acc-96e4-2427ffa5c882-button" aria-expanded="false" aria-controls="accordion-5ecdbfa8-bea8-4acc-96e4-2427ffa5c882-panel"> <span class="mr-4 text-blue-600"> <img src="/files/live/sites/algolia-assets/files/icons/code.svg" alt=""> </span> <span class="cmp-text flex flex-wrap items-center flex-1"> Code Exchange</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 pt-0 p-4" id="accordion-5ecdbfa8-bea8-4acc-96e4-2427ffa5c882-panel" aria-labelledby="accordion-5ecdbfa8-bea8-4acc-96e4-2427ffa5c882-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 pl-10"> <div class="algoliaRichText check"><p>Jumpstart your Algolia understanding with the building blocks of backend tools, composable UI and sample applications.</p> </div>   <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="/developers/code-exchange/" 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]"> See 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 class=""> <div class="cmp-accordion__item [&>*:nth-child(1)]:border-b "> <div class="cmp-accordion__header"> <button type="button" data-uid="98aac94d-1e5f-4edd-a29e-28af114c5ccb" class="cmp-accordion__button relative flex flex-nowrap justify-between items-center w-full p-4 text-2xl text-left font-sora font-light" id="accordion-98aac94d-1e5f-4edd-a29e-28af114c5ccb-button" aria-expanded="false" aria-controls="accordion-98aac94d-1e5f-4edd-a29e-28af114c5ccb-panel"> <span class="mr-4 text-blue-600"> <img src="/files/live/sites/algolia-assets/files/icons/image(1).svg" alt=""> </span> <span class="cmp-text flex flex-wrap items-center flex-1"> Integrations</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 pt-0 p-4" id="accordion-98aac94d-1e5f-4edd-a29e-28af114c5ccb-panel" aria-labelledby="accordion-98aac94d-1e5f-4edd-a29e-28af114c5ccb-button" aria-hidden="true"> <div class="font-inter font-normal text-grey-700 pl-10"> <div class="algoliaRichText check"><p>Find all one-click integrations, back-end API wrappers and front-end components for your technology stack, platform, or framework.</p> </div>   <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/developers/integrations/" 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]"> See 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> </div> </div></div> </div> <div class="cmp-teaser__action-container flex justify-center items-center gap-4 mt-12 flex-col lg:flex-row">   <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://dashboard.algolia.com/users/sign_in?utm_nooverride=1" 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]"> Sign up with Google</span> </a> </div> </div>   <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_in?utm_nooverride=1" 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 " 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]"> Sign up with Github</span> </a> </div> </div> </div> </div> <script> const codesnippetTabs = Array.from(document.querySelectorAll(".codesnippet-tabs-comp .cmp-tabs")); const languageDropBtn = document.getElementById("language-dropdown"); const dropdownSection = document.querySelector(".codesnippet_cmp .codesnippet-tabs-comp .dropdown .dropdown-menu"); document.body.addEventListener("click", function (event) { if (!dropdownSection.contains(event.target) && !dropdownSection.classList.contains("hidden")) { dropdownSection.classList.add("hidden"); } }); const switchTabsItemsOnDropdownChange = ({ selectedType, tabsButtons, tabsPanels }) => { tabsButtons.forEach((tabBtn) => { const tabBtnType = tabBtn.dataset.type; if (tabBtnType === selectedType) { tabBtn.classList.remove("hidden"); } else { tabBtn.classList.add("hidden"); } }); const selectedTypeTabBtns = tabsButtons.filter((btn) => !btn.classList.contains("hidden")); const tabBtn = selectedTypeTabBtns[0]; const tabId = selectedTypeTabBtns[0].id; switchTabPanel({ tabBtn, tabsButtons, tabsPanels, tabId }); }; const switchTabPanel = ({ tabBtn, tabsButtons, tabsPanels, tabId }) => { tabsButtons.map((item) => { item.classList.remove("active"); item.setAttribute("aria-selected", false); }); tabsPanels.map((item) => { item.classList.add("hidden"); item.classList.remove("expanded"); item.setAttribute("aria-hidden", true); }); tabBtn.classList.add("active"); tabBtn.setAttribute("aria-selected", true); const expandedTab = tabsPanels.filter(panel => panel.getAttribute("aria-labelledby") === tabId); expandedTab?.[0]?.setAttribute("aria-hidden", false); expandedTab?.[0]?.classList.remove("hidden"); expandedTab?.[0]?.classList.add("expanded"); } codesnippetTabs.forEach((codepenTabsGroup) => { const dropdownToggleBtn = codepenTabsGroup.querySelector(".dropdown-toggle-btn"); const dropdownMenuItems = codepenTabsGroup.querySelectorAll(".dropdown-menu li"); const tabsButtons = Array.from(codepenTabsGroup.querySelectorAll(".cmp-tabs__tab")); const tabsPanels = Array.from(codepenTabsGroup.querySelectorAll(".cmp-tabs__tabpanel")); const accordionItems = Array.from(document.querySelectorAll(".codesnippet-accordion .cmp-accordion__item")); const cmpTabsTablist = codepenTabsGroup.querySelector(".cmp-tabs__tablist"); if(tabsButtons.length>0){ languageDropBtn.innerHTML = tabsButtons[0].dataset.languagename; } languageDropBtn.addEventListener("click", (e) => { if(cmpTabsTablist.className.includes('hidden')){ cmpTabsTablist.classList.remove("hidden"); }else{ cmpTabsTablist.classList.add("hidden"); } }); if(dropdownMenuItems.length>0){ const dropdownFirstItem = dropdownMenuItems[0]; if(dropdownFirstItem.getElementsByTagName("img").length > 0){ dropdownFirstItem.querySelector('img').classList.remove("hidden"); dropdownFirstItemIcon = dropdownFirstItem.querySelector('img'); dropdownToggleBtn.querySelector('.icon').innerHTML=dropdownFirstItemIcon.outerHTML; dropdownFirstItem.querySelector('img').classList.add("hidden"); } dropdownToggleBtn.querySelector('.textdrop').innerHTML=dropdownFirstItem.dataset.type; } dropdownToggleBtn.addEventListener("click", (event) => { const dropdownMenu = codepenTabsGroup.querySelector(".dropdown-menu"); event.stopPropagation(); if (dropdownMenu.classList.contains("hidden")) { dropdownMenu.classList.remove("hidden"); } else { dropdownMenu.classList.add("hidden"); } }); dropdownMenuItems.forEach((dropdownItem) => { dropdownItem.addEventListener("click", (e) => { if (e.target.matches('li') || e.target.matches('li *')){ const selectedType = e.target.dataset.type; switchTabsItemsOnDropdownChange({ selectedType, tabsButtons, tabsPanels }); const dropdownMenu = codepenTabsGroup.querySelector(".dropdown-menu"); dropdownMenu.classList.add("hidden"); let dropdownIcon; if(e.target.getElementsByTagName("img").length > 0){ e.target.querySelector('img').classList.remove("hidden"); dropdownIcon = e.target.querySelector('img'); dropdownToggleBtn.querySelector('.icon').innerHTML=dropdownIcon.outerHTML; e.target.querySelector('img').classList.add("hidden"); } dropdownToggleBtn.querySelector('.textdrop').innerHTML=e.target.dataset.type; if (window.innerWidth < 1024) { if(cmpTabsTablist.querySelector(".active")!= null){ languageDropBtn.innerHTML = cmpTabsTablist.querySelector(".active").dataset.languagename; } if(!cmpTabsTablist.className.includes('hidden')){ cmpTabsTablist.classList.add("hidden"); } } } }) }) tabsButtons.forEach((tabBtn) => { tabBtn.addEventListener("click", (e) => { const tabId = tabBtn.id; switchTabPanel({ tabBtn, tabsButtons, tabsPanels, tabId }); languageDropBtn.innerHTML = e.target.closest(".languagename").dataset.languagename; if (window.innerWidth < 1024) { languageDropBtn.click(); } }); }); const selectedType = dropdownMenuItems[0].dataset.type; switchTabsItemsOnDropdownChange({ selectedType, tabsButtons, tabsPanels }) }); </script></div> </div> </div> </div>  <div id="" data-tracking="" class="main__container "> <div class=" mx-auto max-w-[1440px] lg:p-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="" class="mx-auto ">    <div class="teaser right_image"> <div class="cmp-teaser flex flex-wrap items-center justify-between gap-6 lg:gap-0"> <div class="cmp-teaser__image px-4 md:w-5/12 md:order-2"> <img src='/files/live/sites/algolia-assets/files/algolia-home/Features_Do_it_visually_35.svg' alt="" class="w-full" /> <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 w-full md:w-5/12 lg:px-4"> <h5 class='cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora font-bold mb-2 dark:text-white'>Make merchandising effortless</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg text-grey-700 dark:text-grey-200 teaser-richtext check"><p>Combine the art of merchandising with the science of algorithms. Design online journeys that start with audience understanding - and end with better business outcomes.</p> </span> </div> <div class="cmp-teaser__action-container">   <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="/industries/ecommerce/digital-merchandising" 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]"> Discover the Merchandising Studio</span> </a> </div> </div> </div> </div> </div> </div></div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; } .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-arrow { display: none !important; } } */ </style></div> </div> </div> </div>  <div id="" data-tracking="" class="main__container bg-secondary"> <div class=" mx-auto max-w-[1440px] lg:p-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="" 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 lg:text-s42 mt-0 mb-4 text-grey-900 dark:text-white"> Get started</h2> </div> </div> <div class=" z-1 grid gap-x-4 lg:gap-y-8 md:grid-cols-3">     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora mb-2 group-hover:text-xenon-600 text-grey-900 dark:text-white">Use an API client</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>Index your content, customize rankings - and launch quickly with our customized UI’s</p> </span> </div> <div class="cmp-teaser__action-container mb-8 lg:mb-0">   <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://dashboard.algolia.com/users/sign_up/" 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 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]"> Start now</span> </a> </div> </div> </div> </div> </div> </div>     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora mb-2 group-hover:text-xenon-600 text-grey-900 dark:text-white">Use our integrations</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>With Shopify, Salesforce Commerce Cloud, and more</p> </span> </div> <div class="cmp-teaser__action-container mb-8 lg:mb-0">   <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/developers/integrations" 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 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]"> Start now</span> </a> </div> </div> </div> </div> </div> </div>     <div class="teaser px-3 "> <div class="cmp-teaser flex flex-wrap "> <div class="cmp-teaser__content w-full text-center"> <h5 class="cmp-teaser__title lg:text-[32px] text-[26px] leading-9 font-sora mb-2 group-hover:text-xenon-600 text-grey-900 dark:text-white">Talk to sales</h5> <div class="cmp-teaser__description font-inter font-normal mb-6 mt-4"> <span class="text-lg font-sora text-grey-700 dark:text-grey-200 group-hover:text-xenon-600"><p>About meeting your needs and a deep-dive demo</p> </span> </div> <div class="cmp-teaser__action-container mb-8 lg:mb-0">   <div data-tracking="" class="flex font-sora justify-center"> <div class=" font-sora button last:me-0 inline-flex w-fit group"> <a href="/demorequest" 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 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]"> Start now</span> </a> </div> </div> </div> </div> </div> </div></div> </div> <style> .slick-next, .slick-prev{ z-index: 5; color: black; } .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; } /* ----------------- Start for teaser 1 view only --------------- */ .teaser .cmp-teaser .cmp-teaser__content blockquote{ margin-bottom: 1rem; } /* -----------------End for teaser 1 view only --------------- */ @media (max-width: 768px) { .slick-prev{ left: 132px; top: -62px; } .slick-next{ left: 188px; top: -62px; } .multi-item-carousel .teaser h5{ font-size: 1rem; } } .multi-item-carousel .teaser h5{ font-weight: normal; font-size: 1.5rem; } .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; } .slick .teaser.slick-slide { display: flex; flex-direction: column; align-items: center; } .slick .teaser.slick-slide .cmp-teaser { max-width: 800px; } .teaser-item-big-bold-title .cmp-teaser .cmp-teaser__content > .cmp-teaser__title{ font-size: 42px; font-weight: 700; } </style></div> </div> </div> </div><div class=""> </div>  <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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" target="_self">Image search</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" 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/" 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" 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="https://www.algolia.com/blog/engineering/" 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" 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/" 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/" 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" 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/" 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/" 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" 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" 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" 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="https://www.algolia.com/search-solutions/netlify/" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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>  <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-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" 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/" 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" 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="https://www.algolia.com/blog/engineering/" 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" 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/" 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/" 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" 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/" 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/" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" target="_self">Image search</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" 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" 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" 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="https://www.algolia.com/search-solutions/netlify/" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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>  <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-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" 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" 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" 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" 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> <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> <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 src="/modules/algolia-base-template/javascript/currentUser.js"></script> <script src="/modules/algolia-base-template/javascript/anonymousUser.js"></script> <script src="/modules/algolia-base-template/javascript/hideBlankTag.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> <script src="/modules/algolia-base-template/javascript/bannerAnimation.js"></script> </body> </html>

CINXE.COM

AI search that understands