sveltesveltekit

Buy Me Coffee Script Tag in Svelte


How can i add this buymecoffee script tag in svelte.

  type="text/javascript"
  src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
  data-name="bmc-button"
  data-slug="slug_name"
  data-color="#FFDD00"
  data-emoji="☕"
  data-font="Lato"
  data-text="Buy me a coffee"
  data-outline-color="#000000"
  data-font-color="#000000"
  data-coffee-color="#ffffff"
></script>;

I already have another script tag in my page like this:

<script lang='ts'>
    import { onMount } from 'svelte';
  
    let sectionsVisible = [false, false, false, false];
  
    function handleScroll() {
      const sections = document.querySelectorAll('section');
      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.75) {
          sectionsVisible[index] = true;
        }
      });
    }
  
    onMount(() => {
      handleScroll();
      window.addEventListener('scroll', handleScroll);
    });
  </script>

How can I combine those two script tag in one page. And is there any chance to place buymecoffee button to where I want?


Solution

  • Regular script tags can be inserted by nesting them inside an element (there can only be one top level <script> which is special and used for Svelte's component logic). E.g.

    <script>
      <!-- [component code] -->
    </script>
    
    <div>
      <script ...>
    </div>
    

    You also can move scripts to the <head> by using the special <svelte:head> element.

    <svelte:head>
      <script ...>
    </svelte:head>
    

    If a script is available in ESM format, you could also directly import it from the top level <script>.