Docusaurus: Adding Coveo Search code. Where should these pieces go

Question

I'm working through a Coveo Atomic tutorial here: https://levelup.coveo.com/learn/courses/atomic/lessons/lesson-0-setup-and-initializing-the-search-interface In their example they show setting up the initialization code in your index.html file like the following:

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      src="https://static.cloud.coveo.com/atomic/v2/atomic.esm.js"
    ></script> 
    <link
      rel="stylesheet"
      href="https://static.cloud.coveo.com/atomic/v2/themes/coveo.css"
    /> 
    <link
      rel="stylesheet"
      href="style.css"
    /> 
    <script>
      (async () => {
        await customElements.whenDefined("atomic-search-interface"); 
        const searchInterface = document.querySelector("#search");

        await searchInterface.initialize({ 
          accessToken: "xx29e62e9b-f739-4886-b433-c9326cc1b492",
          organizationId: "docsdemoslhkhaxyy",
        });
        searchInterface.executeFirstSearch(); 
      })();
    </script>
  </head>
  <body>
    <atomic-search-interface id="search">
      <atomic-search-layout> 
      <!-- all Atomic components will go in here -->
      </atomic-search-layout>
    </atomic-search-interface>
  </body>
</html>

For the code that goes in the head element, should i put that in the head element of the index.js file in the pages directory? For the code that goes into the body element, where should i put that, in the Docusaurus files? Is there an overall best practices when implementing something like this in Docusaurus? This is the first time I've tried this so I apologize up front for even more newbie questions than usual.

I would have thought that putting this code in the index.js file would be correct?

Docusaurus: Adding Coveo Search code. Where should these pieces go

0 Answers0