Creating iframe widget with React components

user_9738446 0
Viewed 1446

I've made a widget in React that is meant to be embedded on other people's websites (think Drift/Intercom chat at the bottom right-hand corner of a webpage). First, there's a button, then when it's clicked a form pops up. Both the button and the form are inside a <Widget /> component.

I am now trying to get this into an iframe and bundle the application into a single .js file so others can embed it on their site like the following:

<script src="https://website.com/widget.js">
<script>
    Widget.mount({id: 1})
</script

The widget.js file is the actual application, while the script below it is for passing in some props.

What I'm stuck on is how to do I get the Widget component into an iframe and have the iframe resize depending on whether the button is shown or the form is shown. I have tried using libraries like react-frame-component and react-frame, but neither seem to work. Zoid is also something that I've tried but it seems like I can't dynamically resize the iframe for the button/form.

Does anyone have any suggestions? Any help would be much appreciated.

reactjs embed iframe widget javascript
1 Answers

I had this exact question a few months ago, so I can understand the confusion you have with the whole process.

This is the resource that was a game-changer for me (written by someone who directly worked on the Drift widget): https://medium.com/@ryan.da.baker/how-to-build-an-embedded-widget-with-react-redux-52a26604ccca

You can also use the Weasl widget source code that he references as a guide throughout the process: https://github.com/Rdbaker/weasl-widget

If you have some questions after looking some of this over, try to reach out to me, not exactly sure how to do that on here.

user_92219080
Related