0

I want to implement the following code to improve my site performance and try to fire the script after scroll and wait 1 second.

<script type="text/javascript">
  window.addEventListener('scroll',() =>
        setTimeout(() => {

       //Delay calendly
            <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

        }, 1000);                                           
  );

</script>

I have this calendly script that I want to delay. The thing is I can't include the script inside another script, so, are there any way to make it?

Thanks!

1
  • No, there's no way to add a script tag inside a script tag. You can create a new script element and place it somewhere in the DOM tree. Commented May 7, 2020 at 14:08

2 Answers 2

2

You can do this with only the vanilla dom:

// ... something happens
var scr_elem = document.createElement('script');
scr_elem.type = 'text/javascript'
scr_elem.src = 'https://assets.calendly.com/assets/external/widget.js'
document.body.appendChild(scr_elem);
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Gavin, it just work perfecly! I will take for future projects, really appreciate it!
0

You can create a script dynamically and append to the head/body.

let timer;
window.addEventListener("scroll", () => {
  if (!timer) {
    timer = setTimeout(() => {
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://assets.calendly.com/assets/external/widget.js";
      document.body.appendChild(script);
    }, 1000);
  }
});

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.