Website
Every Loopit workspace comes with an instant out of the box website that allows you to quickly start marketing your assets and take bookings. This website can be accessed directly or embedded on your existing website.
Customising branding
You are able to change the primary colour, border radius and background image on the homepage of your website. To do this navigate to Settings > Website.
The primary color is used for all buttons and call to actions. For example
Primary color
Buttons color, call to actions
Border corner radius
Buttons
Cover image
Image on homepage behind search bar
Header background color
Background color of the header
Header text color
Text color for the header
Customising content
You are able to customise the marketing consent copy and the terms consent copy. This will override the defaults which we apply during customer facing sign up flows .
You also have the ability to define a callout for the header which will appear on the right side. Examples of this would be your phone number or email address to show throughout the website.
Embedding on existing website
To embed the site on an existing website you have please go to Settings > Website and copy the code snippet in the "Embed on existing website" card
Dynamic height adjustment and scroll position sync for embed
This script dynamically adjusts the height of an iframe on your webpage when embedded, and also tracks the current scroll position within the iframe. The script should be placed before the iframe embed code on your website. Please reach out to support@loopit.co and we can assist.
<script>
// Update this variable with your website URL
const allowedOrigin = "https://website.myloopit.com";
// Define the ID of the iframe that you want to resize dynamically
const iframeId = "myIframe";
// Use to get iframe height
var iframeHeight = 0;
// Use to send current position of iframe
let debounceTimeout;
window.addEventListener('message', (event) => {
if (event.origin === allowedOrigin) {
if (event.data.type === 'PAGE_HEIGHT_CHANGE') {
let newHeight = event.data.height;
const iframe = document.getElementById(iframeId);
if (iframe) {
iframeHeight = newHeight;
iframe.style.height = `${iframeHeight}px`;
} else {
console.warn(`Iframe with ID '${iframeId}' not found. Please ensure the correct ID is set.`);
}
}
} else {
console.warn("Received message from unexpected origin:", event.origin);
}
});
window.addEventListener("scroll", () => {
const iframe = document.getElementById(iframeId);
if (iframe) {
const rect = iframe.getBoundingClientRect();
const visibleTop = window.scrollY + rect.top;
const currentPosition = window.scrollY - visibleTop;
const maximumAllowedHeight = iframeHeight * 0.8; // 80%
clearTimeout(debounceTimeout);
// Send the current scroll position to the iframe when scrolling stops
debounceTimeout = setTimeout(() => {
// Send the current scroll position to the iframe only while scrolling within it, not before or after
if (rect.top <= 0 && currentPosition <= maximumAllowedHeight) {
iframe.contentWindow.postMessage({ type: 'scrollPosition', currentPosition }, '*');
}
}, 200);
}
});
</script>
Last updated