fix: FBOT-1043 quick reply button layout on fullwidth theme + change theme css append target to body (#62)

michal-kurz · web-flow · commit c019577e8722 · 2022-03-07T14:02:31.000+01:00
diff --git a/samples/feedyou/local-full-screen.html b/samples/feedyou/local-full-screen.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Chatbot</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+  </head>
+  <body>
+
+    <!-- PUT THIS CODE RIGHT BEFORE THE </BODY> TAG (you can also use some tag manager like GTM) AND REPLACE ... WITH BOT ID -->
+    <!--  • design and behavior of webchat could be configured remotely from Feedyou Designer -->
+    <!--  • it is needed to append #feedbot-test-mode to the URL to show chatbot window during development -->
+    <link href="../../botchat.css" rel="stylesheet" />
+    <script type="text/javascript">
+      (function (f,y,b,o,t,s){(t = y.createElement(b)), (s = y.getElementsByTagName(b)[0]);t.async = 1;t.src = "../../botchat-es5.js";t.onload=function(){BotChat.App({
+        bot: { id: "feedbot-demo-webchat" }, // try "feedbot-demo-webchat" during testing
+        theme: { template: { type: "full-screen"} }
+      })};s.parentNode.insertBefore(t, s);})(window, document, "script");
+    </script>
+    <!-- --------------------------------------------------------------------------------------- -->
+
+  </body>
+</html>
diff --git a/samples/feedyou/local.html b/samples/feedyou/local.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Chatbot</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+  </head>
+  <body>
+
+    <!-- PUT THIS CODE RIGHT BEFORE THE </BODY> TAG (you can also use some tag manager like GTM) AND REPLACE ... WITH BOT ID -->
+    <!--  • design and behavior of webchat could be configured remotely from Feedyou Designer -->
+    <!--  • it is needed to append #feedbot-test-mode to the URL to show chatbot window during development -->
+    <link href="../../botchat.css" rel="stylesheet" />
+    <script type="text/javascript">
+      (function (f,y,b,o,t,s){(t = y.createElement(b)), (s = y.getElementsByTagName(b)[0]);t.async = 1;t.src = "../../botchat-es5.js";t.onload=function(){BotChat.App({
+        bot: { id: "feedbot-demo-webchat" },
+      })};s.parentNode.insertBefore(t, s);})(window, document, "script");
+    </script>
+    <!-- --------------------------------------------------------------------------------------- -->
+
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -226,7 +226,7 @@ export const App = async (props: AppProps, container?: HTMLElement) => {
     themeStyle.appendChild(
       document.createTextNode(getStyleForTheme(theme, remoteConfig))
     );
-    document.head.appendChild(themeStyle);
+    document.body.appendChild(themeStyle);
   }
 
   // FEEDYOU use twemoji to make emoji compatible
@@ -412,7 +412,6 @@ const FullScreenTheme = (theme: Theme) => `
 
   .wc-message-pane .wc-suggested-actions {
     position: absolute;
-    bottom: 0px;
     z-index: 10000;
     background-color: white;
   }

Original file line number	Diff line number	Diff line change
`@@ -226,7 +226,7 @@ export const App = async (props: AppProps, container?: HTMLElement) => {`
`226`	`226`	`themeStyle.appendChild(`
`227`	`227`	`document.createTextNode(getStyleForTheme(theme, remoteConfig))`
`228`	`228`	`);`
`229`		`- document.head.appendChild(themeStyle);`
	`229`	`+ document.body.appendChild(themeStyle);`
`230`	`230`	`}`
`231`	`231`
`232`	`232`	`// FEEDYOU use twemoji to make emoji compatible`
@@ -412,7 +412,6 @@ const FullScreenTheme = (theme: Theme) => `
`412`	`412`
`413`	`413`	`.wc-message-pane .wc-suggested-actions {`
`414`	`414`	`position: absolute;`
`415`		`- bottom: 0px;`
`416`	`415`	`z-index: 10000;`
`417`	`416`	`background-color: white;`
`418`	`417`	`}`