Merge pull request #11 from frontapp/v92/example/embedded-widget

Embedded Widget Example

README.md

@@ -98,6 +98,8 @@ After the last command, the example application can be accessed at http://localh
 
 There are four helpers provided in this repository, and each of them is used in the [examples](https://github.com/frontapp/front-chat-sdk/tree/main/examples) directory.
 
+Additionally, there is an example of how to embed a Front Chat widget [directly in a page](https://github.com/frontapp/front-chat-sdk/tree/main/examples/react-embed-front-chat). This example uses React, but the general principle should work for any application.
+
 #### Quick-start Helpers
 
 - [`initialize`](https://github.com/frontapp/front-chat-sdk/blob/main/lib/helpers/initialize/index.ts)
@@ -114,11 +116,11 @@ There are four helpers provided in this repository, and each of them is used in
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-<!-- CONTRIBUTING -->
+<!-- FEEDBACK -->
 
-## Contributing
+## Feedback
 
-Although this package is maintained by Front, feedback and contributions are **greatly appreciated**. Feel free to open an issue if you have any suggestions as to how this repository and its examples could be improved.
+Although this package is maintained by Front, feedback is **greatly appreciated**. Feel free to open an issue if you have any suggestions as to how this repository and its examples could be improved.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

examples/react-embed-front-chat/index.tsx

@@ -0,0 +1,53 @@
+import {type SyntheticEvent} from 'react';
+
+/*
+ * Constants.
+ */
+
+const scriptSrc = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
+
+const chatId = '<CHAT_ID_REQUIRED>';
+
+const iframeStyle = {
+  width: '700px',
+  height: '755px',
+  border: 'none',
+  colorScheme: 'normal'
+};
+
+/*
+ * Component.
+ */
+
+function App() {
+  const onLoadIframe = async (event: SyntheticEvent<HTMLIFrameElement>) => {
+    const iframe = event.target as HTMLIFrameElement;
+
+    const scriptTag = document.createElement('script');
+    scriptTag.setAttribute('type', 'text/javascript');
+    scriptTag.setAttribute('src', scriptSrc);
+    scriptTag.onload = () => {
+      iframe.contentWindow?.FrontChat?.('init', {
+        chatId,
+        useDefaultLauncher: false,
+        shouldShowWindowOnLaunch: true,
+        shouldHideCloseButton: true,
+        shouldHideExpandButton: true,
+        shouldExpandOnShowWindow: true
+      });
+    };
+
+    iframe.contentDocument?.body.appendChild(scriptTag);
+  };
+
+  return (
+    <div>
+      <h1>Embedded Front Chat</h1>
+
+      <iframe style={iframeStyle} onLoad={onLoadIframe} />
+
+      <h1>Below the Widget</h1>
+      <p>You can have content above and below the embedded widget.</p>
+    </div>
+  );
+}