In this tutorial, I will give you a detailed walkthrough on how to embed your widget in a React Application.

1. The first step is to copy the code from your created widget:

2.After the code is copied you will need to separate the HTML code from the JavaScript, for example:

This is the EmbedSocial widget code:

<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>

<script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>

HTML code:

<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>

JavaScript code:

(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));

3. Next head over to your React application and create a new component in your components directory and paste the HTML code inside the render function:

Paste the JavaScript code inside the componentDidMount lifecycle method:

4. Navigate to the page where you want to display the widget, in our case we will add it to the main App.js, and import the component we just created:
​

5. That's it. Once you do this and save the changes, the widget will appear on your page.