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

This commit is contained in:
Aminejv 2021-10-08 17:32:01 +01:00
parent d7133ecb06
commit 11fe4f42a9
3 changed files with 30 additions and 5 deletions

View File

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

View File

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

View File

@ -4,10 +4,27 @@ import ThemeProvider from "~/components/system/ThemeProvider";
import * as React from "react"; import * as React from "react";
import { Global } from "@emotion/react"; import { Global } from "@emotion/react";
import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/global"; import {
import { IntercomProvider } from 'react-use-intercom'; 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): // NOTE(wwwjim):
// https://nextjs.org/docs/advanced-features/custom-app // https://nextjs.org/docs/advanced-features/custom-app
@ -17,8 +34,10 @@ function MyApp({ Component, pageProps }) {
<React.Fragment> <React.Fragment>
<script src="//cdn.iframe.ly/embed.js" async></script> <script src="//cdn.iframe.ly/embed.js" async></script>
<Global styles={injectGlobalStyles()} /> <Global styles={injectGlobalStyles()} />
<Global styles={injectIntercomStyles()} />
<Global styles={injectCodeBlockStyles()} /> <Global styles={injectCodeBlockStyles()} />
<IntercomProvider appId={INTERCOM_APP_ID} autoBoot> <IntercomProvider appId={INTERCOM_APP_ID}>
<CustomIntercomConfig />
<Component {...pageProps} /> <Component {...pageProps} />
</IntercomProvider> </IntercomProvider>
</React.Fragment> </React.Fragment>