title: How to maintain script tag position on webpage?
body: <p>I am using a script tag to add a widget to my Next.js app. I have create a section component for this widget but when I run the app it renders below my footer but it is supposed to render above as a section component. Can someone help me out with this, please?</p>
  <p>Below you will see the screenshot of the issue, my <code>index.js</code>, the script component and the component where I hope it would be rendered.
  Another user asked a <a href="https://stackoverflow.com/questions/70118835/nextjs-script-tag-how-to-maintain-position-on-webpage-see-example">question related to the same issue</a>. Is there anyone that knows how to fix it?</p>
  <p><a href="https://i.stack.imgur.com/eq2ts.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eq2ts.jpg" alt="enter image description here" /></a></p>
  <pre><code>import Head from 'next/head'
  import Image from 'next/image'
  import styles from '../styles/Home.module.scss'
  import Header from './src/components/Header'
  import Services from './src/components/Services'
  import Portfolio from './src/components/Portfolio'
  import ContactCard from './src/components/ContactCard'
  import Booking from './src/components/Booking'
  
  export default function Home() {
    return (
      &lt;div className=&quot;container-fluid&quot;&gt;
        &lt;Head&gt;
          &lt;title&gt;Dr Cut TheBarber Show&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;       
        &lt;/Head&gt;
        &lt;main className=&quot;main&quot;&gt;
         &lt;Header /&gt;
         &lt;Services /&gt;
         &lt;Portfolio /&gt;
         &lt;ContactCard /&gt;
         &lt;Booking /&gt;
        &lt;/main&gt;
  
        &lt;footer className=&quot;footer text-center&quot;&gt;
          &lt;a
            className=&quot;text-decoration-none text-dark&quot;
            href=&quot;https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            Powered by{' '}
            &lt;span className={styles.logo}&gt;
              &lt;Image src=&quot;/vercel.svg&quot; alt=&quot;Vercel Logo&quot; width={72} height={16} /&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/footer&gt;
        &lt;/div&gt;
      
    )
  }
  </code></pre>
  <p><code>Booksy.js</code></p>
  <pre><code>import script from 'next/script';
  //import Script from 'next/script'
  import { useEffect } from 'react';
  const Booksy = () =&gt;{
      useEffect(() =&gt; {
          const script = document.createElement('script');
          script.src=&quot;https://booksy.com/widget/code.js?id=17618&amp;country=es&amp;lang=es&quot;;
          script.async = true;
          document.body.appendChild(script);
          return () =&gt; {
              document.body.removeChild(script);
          }
      }, [])
    return script
  }
  
  export default Booksy;
  </code></pre>
  <p><code>Booking.js</code></p>
  <pre><code>import Booksy from &quot;./Booksy&quot;;
  
  function Booking () {
      return (
          &lt;div className=&quot;page-section&quot;&gt;
              
                  &lt;Booksy /&gt;
  
          &lt;/div&gt;
      )
  }
  export default Booking;
  </code></pre>