Chat-Widget mit react.js

Ich schreibe ein Chat-Widget, das mit wenig Code an die Endnutzer verteilt wird, um es auf ihre Website zu stellen. Übliche Routine.

Mein Widget wird in React geschrieben. Ich kenne mehrere Möglichkeiten, dies zu erreichen. Lass mich die Wege aufzählen, die mir einfielen.

• Geben Sie ein Code-Snippet mit direktem iframe und Quell-URL ein. Problem mit diesem Ansatz ist, es kann nur verwendet werden, wenn das Widget eingebettet ist. Wenn das Widget ein Popup sein muss, geht die Flexibilität verloren.
• Geben Sie ein Code-Snippet mit einem JavaScript, das asynchron geladen wird. Javascript erstellt einen iframe in der übergeordneten Webseite und src kann gesetzt werden. Dieses Widget Javascript kann wenig Intelligenz haben. Dies ist der übliche Ansatz, dem die meisten Widget-Entwickler folgen.

Natürlich wird die Quell-URL eine React-Seite darstellen, die in jedem Fall von webpack gebündelt wird.

Ich wollte die besten Methoden zur Entwicklung eines Widgets kennen. Also habe ich die gängigen Implementierungen durchgesehen. Ich mochte das Widget Intercom sehr. Es ist in React geschrieben. Ich habe analysiert, wie es funktioniert. Das minimale JavaScript wird asynchron auf der Webseite geladen. Es injiziert ein iframe mit der ID intercom-frame . Das iframe hat ein Skript mit einer Quelle URl . Offensichtlich ist es React Bundle.

Was ich nicht verstehe ist, dass unterhalb von iframe ein div mit drei iframes erstellt wird. Eine, um die Chat-Blase zu zeigen, eine andere, um das Chat-Sprechblasen-Symbol anzuzeigen, die letzte, um das Chat-Fenster anzuzeigen. Diese iframe hat keine Ursprungs-URL und ich nehme an, das Bundle wird von dem ersten iFrame geliefert, der vom Widget Javascript erstellt wurde.

Ich stieß auf diese Frage SO , die teilweise beantwortet meine Frage. Aus der Antwort,

  

Setzen Sie eine API zwischen Ihrer Kundenwebseite und Ihrem iframe frei, indem Sie die Fensterbenachrichtigung verwenden.

     

Der Hauptcode (der Iframe-Code) wird dann von diesem ersten Skript geladen   asynchron und nicht darin enthalten.

Was ich nicht verstehe, ist

1.) Wie hätten sie es mit Window Messaging erreicht?

2.) Wie sie es geschafft hätten, ein div mit iframe s darin zu erstellen, von einem anderen iframe s Skript ?. Widget Javascript erstellt diese Elemente nicht basierend auf der Quelle. Es hätte vom React-Bundle im iFrame, der vom Widget js generiert wurde, gemacht werden sollen.

3.) Wie kann ein Reaktionsbündel in einem iframe reaktive Elemente im übergeordneten DOM erzeugen?