How to integrate Lighthouse

To embed Lighthouse on your site, you will need to add the following script in the place you intend to display it:

<div class="fd-lighthouse" data-prop-client-id="your-client-id"></div>
<script async src="https://s3.eu-central-1.amazonaws.com/cr.prd.future-demand.com/bundle.js" data-mount-in=".fd-lighthouse"></script>

You must provide a valid Future Demand Client ID for the data-prop-client-id attribute, and the container’s selector, in this case .fd-lighthouse can be chosen randomly.

Customization

The following css variables are available:

--color-text-primary
--color-primary
--color-primary-lighter
--color-primary-darker
--color-secondary
--color-secondary-lighter
--color-secondary-darker
--color-accent
--color-accent-lighter
--color-accent-darker
--color-card-bg-hover
--color-border-grey
--color-btn-primary-bg
--color-btn-primary-bg-hover
--color-btn-primary-text
--color-border-primary
--color-recommendation-card-primary
--color-recommendation-card-secondary
--font-face-primary

Example

<div class="fd-lighthouse" data-prop-client-id="your-client-id"></div>

<script async src="https://s3.eu-central-1.amazonaws.com/cr.prd.future-demand.com/bundle.js" data-mount-in=".fd-lighthouse"></script>




<style>

:root {

--color-text-primary: #000;

--color-primary: #353535;

--color-primary-lighter: #474747;

--color-primary-darker: #202020;

--color-secondary: #009991;

--color-secondary-lighter: #00afa6;

--color-secondary-darker: #00837c;

--color-accent: #353535;

--color-accent-lighter: #474747;

--color-accent-darker: #202020;

--color-card-bg-hover: rgba(177, 177, 177, 0.1);

--color-border-grey: #d1d1d1;

--color-btn-primary-bg: #000;

--color-btn-primary-bg-hover: #000;

--color-btn-primary-text: #fff;

--color-border-primary: #000;

--color-recommendation-card-highlight-primary: rgb(240, 221, 0);

--color-recommendation-card-highlight-secondary: rgb(0, 204, 187);

--font-face-primary: FFQuadraatSans;

}




.fdRW__container {

max-width: none;

}




.fdRW__recommendation .fdRW__recommendation__info__tags span,

.fdRW__recommendationc .fdRW__recommendationc__tags span {

background-color: #3e3e3e;

padding: 0px 6px;

border-radius: 4px;

transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;

}

</style>