1. Import our script once somewhere in the header (not in the body):

<script src="https://embed.beams.fm/assets/js/embed.js"></script>

2. Add the embed to a desired component:

class Embed extends React.Component {
componentDidUpdate() {
this.renderEmbed();
}
componentDidMount() {
this.renderEmbed();
}

renderEmbed() {
window.Beams.renderEmbed({
element: this.instance,
postID: "2579c913-f523-43b9-b46b-682de90a3421",

// Optional
mini: this.props.mini,
backgroundColor: "000000",
primaryColor: "FFFFFF",
borderRadius: 30,
showLink: true,
hideBeamsLogo: true,
addGoogleAnalytics: true
});
}
render() {
return (
<div>
<h3>{this.props.title}</h3>
<div ref={(el) => (this.instance = el)} />
</div>
);
}
}

You can check the fully functional React.js example on this Code Sandbox.

Did this answer your question?