Chat widget with react.js

Question

I am writing a chat widget, that would be distributed to the end users with little code to put in their website. Usual routine.

My widget is going to be written in React. I know several ways to achieve this. Let me list the ways that I could think of.

• Give a code snippet with directly iframe and source url in it. Problem with this approach is, it can be used only if the widget is embed. If the widget needs to be popup, flexibility will be lost.
• Give a code snippet with a javascript being loaded asynchronously. Javascript will create an iframe in the parent webpage and src can be set. This widget javascript can have little intelligence. This is the usual approach followed by most of the widget developers.

Of course, source URL will render a React page which is bundled by webpack, in either case.

I wanted to know the best practices of developing a widget. So I went through the popular implementations of it. I liked Intercom's widget very much. It is written in React. I analyzed how it works. The minimal javascript is loaded async on the webpage. It is injecting an iframe with id intercom-frame. That iframe has a script in it's head with a source URl. Obviously it is React bundle.

The thing that I don't understand is, below this iframe, a div is created with three iframes in it. One to show the chat bubble, another to show the chat bubble icon, the last one to show the actual chat window. Those iframe doesn't have source url and I guess the bundle is served from the first iframe created by the widget javascript.

I came across this SO question, which partially answers my question. From the answer,

expose some API between your customer webpage and your iframe, using window messaging.

the main code (the iframe code) is then loaded by this first script asynchronously, and not included in it.

What I don't understand is,

1.) How they would have achieved it with window messaging?

2.) How they would have managed to create a div with iframes in it, from another iframes script?. Widget javascript is not creating those elements, based on it's source. It should have been done by the React bundle in the iframe generated by widget js.

3.) How a react bundle inside an iframe can create react elements in the parent DOM?

Answer 1

None of the iframe created by Intercom's script has src attribute, that means they are not subject to the same origin policy. Therefore, they can modify parent page html and vice versa.

However, I don't understand why they need to have separate iframe. And why using a script to inject another script which inject the main html content. Doesn't the first script have enough ability to inject html content? I'd love to be lightened about these things.