Skip to content

Commit

Permalink
Merge d19419b into ca8e847
Browse files Browse the repository at this point in the history
  • Loading branch information
gilluminate authored Dec 6, 2024
2 parents ca8e847 + d19419b commit b9d4937
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 6 deletions.
10 changes: 8 additions & 2 deletions clients/fides-js/src/components/Overlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const Overlay: FunctionComponent<Props> = ({
}, [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 () => {};
Expand Down Expand Up @@ -211,7 +211,13 @@ const Overlay: FunctionComponent<Props> = ({
}
window.Fides.showModal = defaultShowModal;
};
}, [options.modalLinkId, options.debug, handleOpenModal, experience]);
}, [
options.fidesEmbed,
options.modalLinkId,
options.debug,
handleOpenModal,
experience,
]);

const handleManagePreferencesClick = (): void => {
handleOpenModal();
Expand Down
6 changes: 3 additions & 3 deletions clients/fides-js/src/components/fides.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down
12 changes: 11 additions & 1 deletion clients/sample-app/src/pages/embedded-consent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 <body> itself. (see https://ethyca.com/docs/dev-docs/js/reference/interfaces/FidesOptions#fides_embed) */}
<script>{`window.fides_overrides = { fides_embed: true, fides_disable_banner: true }`}</script>
{/* Allow the embedded consent modal to fill the screen */}
<style>{`#fides-embed-container { --fides-overlay-width: 'auto' }`}</style>
<style>{`
#fides-embed-container {
--fides-overlay-width: 'auto'
}
body {
font-family: "Inter", sans-serif;
color: #171923;
font-size: 14px;
}
`}</style>
</Head>
{/**
Insert the fides.js script and run the GTM integration once ready
Expand Down

0 comments on commit b9d4937

Please sign in to comment.