Trying to run Ko-Fi widget inside a React component. Running <script> commands inside DIV

user_10128619 0
Viewed 817

So, here's the script I have to run in order to implement a Ko-Fi widget on my website.

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
<script type='text/javascript'>
  kofiwidget2.init('Buy me a coffe!', '#3c807c', 'XXXXXXXXXX');
  kofiwidget2.draw();
</script>

My website is a Single Page App built with React, so here's what I'm doing.

1 - I moved the script that loads the widget_2.js to the <head> of my index.html file:

index.html

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>

Should I add the async to this script tag?

2 - I'm trying to load the rest inside my React component, but without success, so far:

I tried:

// NOTE: IT'S DISPLAYING AS MULTI-LINE HERE JUST TO MAKE IR MORE READABLE
return(
  <div dangerouslySetInnerHTML={{__html: 
    "<script type='text/javascript'>
       kofiwidget2.init('Buy me a coffee!', '#3c807c', 'XXXXXXXXXX');
       kofiwidget2.draw();
     </script>"
  }}>
);

And also:

return(
  <div>
    <script type="text/javascript">
      kofiwidget2.init("Buy me a coffee!", "#3c807c", "XXXXXXXXXX");
      kofiwidget2.draw();
    </script>
  </div>
);

And nothing seems to happen.

EXTRA INFO:

The kofiwidget2.draw(); method does the following:

draw: function () {
  document.writeln(style + html.replace("[color]", color).replace("[text]", text).replace("[id]", id));
}

It uses the document.writeln method. So I guess this should be run exactly where I need the button to be loaded. I.e: Inside the div.

SNIPPET (TRYING TO RUN A SCRIPT COMMAND INSIDE A DIV IN REACT)

function App() {
  return(
    <script type="text/javascript">console.log('TEST_1');</script>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

reactjs script-tag html javascript
1 Answers

There's not a lot of solutions to this on the internet (trust me, I searched forever). I wanted to use the interactive widget. Here was my solution. It's pretty similar to one of yours, but slightly modified. I'm working in nextjs as well.

add import Head from 'next/head'

At the top of your function component add

<Head>
     <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'/>
</Head>

Create a string to make your life easier:

const kofi = 
`<script>
  kofiWidgetOverlay.draw('pixelbakery', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': 'Tip Us',
    'floating-chat.donateButton.background-color': '#ff5f5f',
    'floating-chat.donateButton.text-color': '#fff'
  });
</script>`

inside your component somewhere:

 <div dangerouslySetInnerHTML={{ __html: kofi }} />
user_153570220
Related