diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx index 8d403f5e83..24b3d57b1a 100644 --- a/clients/fides-js/src/components/Overlay.tsx +++ b/clients/fides-js/src/components/Overlay.tsx @@ -153,7 +153,7 @@ const Overlay: FunctionComponent = ({ }, [showBanner, setBannerIsOpen]); useEffect(() => { - if (!experience || options.modalLinkId === "") { + if (options.fidesEmbed || !experience || options.modalLinkId === "") { // If empty string is explicitly set, do not attempt to bind the modal link to the click handler. // developers using `Fides.showModal();` can use this to prevent polling for the modal link. return () => {}; @@ -211,7 +211,13 @@ const Overlay: FunctionComponent = ({ } window.Fides.showModal = defaultShowModal; }; - }, [options.modalLinkId, options.debug, handleOpenModal, experience]); + }, [ + options.fidesEmbed, + options.modalLinkId, + options.debug, + handleOpenModal, + experience, + ]); const handleManagePreferencesClick = (): void => { handleOpenModal(); diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css index 995af6e740..3eb261516b 100644 --- a/clients/fides-js/src/components/fides.css +++ b/clients/fides-js/src/components/fides.css @@ -485,7 +485,7 @@ div#fides-consent-content .fides-modal-description { justify-content: center; } -.fides-modal-container .fides-button-group-brand { +.fides-modal-footer .fides-button-group-brand { min-height: var(--fides-overlay-modal-secondary-button-group-height); } @@ -1023,13 +1023,13 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display { position: relative; } -.fides-modal-container .fides-i18n-menu { +.fides-modal-footer .fides-i18n-menu { position: absolute; left: var(--fides-overlay-padding); bottom: var(--fides-overlay-padding); } -.fides-modal-container .fides-button-group-i18n { +.fides-modal-footer .fides-button-group-i18n { min-height: var(--fides-overlay-modal-secondary-button-group-height); } diff --git a/clients/sample-app/src/pages/embedded-consent.tsx b/clients/sample-app/src/pages/embedded-consent.tsx index 8700b8ce3e..3b4334b031 100644 --- a/clients/sample-app/src/pages/embedded-consent.tsx +++ b/clients/sample-app/src/pages/embedded-consent.tsx @@ -60,7 +60,17 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => { {/* Require FidesJS to "embed" it's UI onto the page, instead of as an overlay over the itself. (see https://ethyca.com/docs/dev-docs/js/reference/interfaces/FidesOptions#fides_embed) */} {/* Allow the embedded consent modal to fill the screen */} - + {/** Insert the fides.js script and run the GTM integration once ready