Javascript 如何将React/Angular应用程序嵌入小部件弹出式样式

因此，这更多的是一个设计/工具问题（没有代码显示）

这个想法： 我有一个web应用程序的想法，我想根据讨论的结果使用React/Angular来实现。我的想法是，我希望能够用尽可能少的代码将我的web应用程序打包并嵌入到任何网站中。它所嵌入的网站的最终结果将是一个新的“小部件样式”按钮悬停在角落里，当点击该按钮时，将在弹出或布局模式窗口中打开我的新React/Angular应用程序

明确地说，如果可能的话，我想为客户主机网站提供尽可能少的代码，例如：

<script src="https://myappurl.js"><script>
<some-new-element-in-html-body?> </some-new-element-in-html-body?>

这将给他们留下一个小部件样式的按钮，当点击时，它会打开我的应用程序作为一个中途停留

如何： 现在我知道可能有几种方法可以实现这一点。我来自一个有角度的开发背景，是一个全栈开发人员，所以在网站中嵌入应用对我来说是一个新概念。我想我想要的结果与网站上的聊天小部件应用程序类似。我正努力在网上找到适合这份工作的最佳解决方案或工具集

Web组件似乎出现了很多。这将导致我不得不向网站提供标签和新的html元素，但这是否会添加一个触发应用程序弹出窗口的小部件样式按钮。我还读到，React/Angular捆绑包的大小对于web组件来说可能太大了，即使是在较小的应用程序中，所以像preact这样的东西可能是首选？同样的问题仍然存在。这段youtube视频解释了preact/react web组件，并想知道它是否是最佳选项-

iFrames如果我想简单地将我的应用程序装载到任何其他网站上，肯定是一种选择。也就是说，这并不是我真正想要的，因为虽然我想要包含的应用程序，但我也希望能够将这个自定义小部件样式的按钮添加到宿主网站，而无需直接编辑网站

UMD库-我又遇到了一些其他问题，但这是最不清楚的，它们与web组件相比有什么不同，或者对我的特定场景有什么好处。现在，我可能完全找错了方向，如果是这样的话，善良的人们请为我指出正确的方向

我可能还需要考虑2个应用程序，一个用于快速加载AND的按钮，然后方便弹出/模态类型的停机，然后用上面提到的3种方法中的一种加载我的应用程序（

）。

---

先谢谢你！：）

我重写了它，希望能让它更清楚。你不知道这是个问题吗？如果你给了某人半个答案，那个人就把它扔进垃圾箱。你会有什么感觉。。。纳夫说，很不幸，我仍然有这个问题，所以我请求帮助。谢谢：）@jjharrison我面临同样的情况，我也有同样的疑虑。你能解决它吗？任何帮助都将不胜感激。Thanks@MauroBarrionuevotbh我不是一个FE开发者，所以所有的技术对我来说都是新的。我从来没有找到一个既能满足捆绑包大小又能满足我所需功能的解决方案，尽管我确信有一个解决方案，但我重新编写了它，希望能让它更清晰。你不知道这是个问题吗？如果你给了某人半个答案，那个人就把它扔进垃圾箱。你会有什么感觉。。。纳夫说，很不幸，我仍然有这个问题，所以我请求帮助。谢谢：）@jjharrison我面临同样的情况，我也有同样的疑虑。你能解决它吗？任何帮助都将不胜感激。Thanks@MauroBarrionuevotbh我不是一个FE开发者，所以所有的技术对我来说都是新的。我从未找到一个既能满足捆绑包大小又能满足我所需功能的解决方案，尽管我确信有一个解决方案