feat(intercom): change the widget's position and zindex

common/constants.js

@@ -140,8 +140,8 @@ export const zindex = {
   body: 2,
   sidebar: 5,
   alert: 3,
-  uploadModal: 3,
   header: 4,
+  intercom: 4,
   modal: 6,
   tooltip: 7,
   cta: 8,

common/styles/global.js

@@ -92,6 +92,12 @@ export const injectGlobalStyles = () => css`
   }
 `;
 
+export const injectIntercomStyles = () => css`
+  .intercom-lightweight-app {
+    z-index: ${Constants.zindex.intercom} !important;
+  }
+`;
+
 /* prettier-ignore */
 export const injectCodeBlockStyles = () => css`
   .language-javascript {

pages/_app.js

@@ -4,10 +4,27 @@ import ThemeProvider from "~/components/system/ThemeProvider";
 import * as React from "react";
 
 import { Global } from "@emotion/react";
-import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/global";
-import { IntercomProvider } from 'react-use-intercom';
+import {
+  injectGlobalStyles,
+  injectCodeBlockStyles,
+  injectIntercomStyles,
+} from "~/common/styles/global";
+import { IntercomProvider, useIntercom } from "react-use-intercom";
 
-const INTERCOM_APP_ID = 'jwgbampk';
+const INTERCOM_APP_ID = "jwgbampk";
+
+const CustomIntercomConfig = () => {
+  const { boot } = useIntercom();
+  React.useLayoutEffect(() => {
+    boot({
+      alignment: "left",
+      horizontalPadding: 23,
+      verticalPadding: 28,
+    });
+  }, [boot]);
+
+  return null;
+};
 
 // NOTE(wwwjim):
 // https://nextjs.org/docs/advanced-features/custom-app
@@ -17,8 +34,10 @@ function MyApp({ Component, pageProps }) {
       <React.Fragment>
         <script src="//cdn.iframe.ly/embed.js" async></script>
         <Global styles={injectGlobalStyles()} />
+        <Global styles={injectIntercomStyles()} />
         <Global styles={injectCodeBlockStyles()} />
-        <IntercomProvider appId={INTERCOM_APP_ID} autoBoot>
+        <IntercomProvider appId={INTERCOM_APP_ID}>
+          <CustomIntercomConfig />
           <Component {...pageProps} />
         </IntercomProvider>
       </React.Fragment>