Once you've installed the iframe widget (instructions on how to install the widget iframe), should you notice scroll bars or find that the content doesn't fit correctly on your screen, feel free to adjust its height to align with the screen and the displayed content at each step of the widget
To do this, you will need to use the script described below.
If you need assistance with installing the iframe, please contact your manager.
Notes:
Widget can be used by default, so the pages will automatically adjust to the height of the content
Values of the variables can be changed if needed. Input digits instead of null values for the variables (var defaultHeight, minHeight, maxHeight)
var defaultHeight - is the height of the sign-in and sign-out pages.
var minHeight - is the minimum height of each page. If a value is set, the page will not become smaller than the specified height even if the content is smaller. This value cannot be less than 850px.
var maxHeight - is the maximum height of each page. The page will not exceed the specified value even if the content is taller. In this case, a scroll bar will appear on the side.
If you need to change the height of the widget, you should add the following script at the end of the body tag on your website:
<script>
//** Comments
// ** Default widget height for small pages (sign-in and sign-up) is 850px **
// ** You can set your own height value for those pages. Pass the height of your choice as number to defaultHeight **
// ** For example: var defaultHeight = 1000; **
// ** Or you can leave defaultHeight = null; if 850px is Ok for you **
// ** By default minimum height is 850px **
// ** You can set a minimum height for all pages. Pass the minimum height of your choice as number to minHeight **
// ** For example: var minHeight = 900; **
// ** Or you can leave minHeight = null; if min height 850px is Ok for you **
// ** You can't set minHeight fewer than 850 **
// ** Pages could be higher than minHeight, but it couldn't be smaller **
// ** By default maximum height has no limit **
// ** You can set a maximum height for all pages. Pass the maximum height of your choice as number to maxHeight **
// ** For example: var maxHeight = 1500; **
// ** Or you can leave maxHeight = null; if you don't need a limitation of widget height **
// ** Pages could be smaller than maxHeight, but it couldn't be higher **
var defaultHeight = null;
var minHeight = null;
var maxHeight = null;
window.addEventListener("message", (event) => {
if (
event.data.text === "Set DF widget height" ||
event.data.text === "Set DF widget default height"
) {
const dfWidget = document.getElementById("df-widget");
let dfWidgetHeight = event.data.height;
if (
defaultHeight &&
event.data.text === "Set DF widget default height"
) {
dfWidgetHeight = defaultHeight;
}
if (minHeight && dfWidgetHeight < minHeight) {
dfWidgetHeight = minHeight;
}
if (maxHeight && dfWidgetHeight > maxHeight) {
dfWidgetHeight = maxHeight;
}
dfWidget?.setAttribute("height", dfWidgetHeight);
}
});
</script>