# 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

| Setting                 | Usage                               |
| ----------------------- | ----------------------------------- |
| 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.

#### Customising Logo Redirect Behaviour

By default, clicking the Loopit logo redirects the user back to the Loopit homepage. However, this behaviour can be customised to navigate the user to a specific page of your choice.

This is particularly useful if your integration only embeds the **signup form component** and you do not wish to leverage other areas of the Loopit website. By defining a custom redirect path, you can ensure users remain within your intended experience after interacting with the logo.

To set the URL;

{% stepper %}
{% step %}

### Navigate to Settings

{% endstep %}

{% step %}

### Click on Website

{% endstep %}

{% step %}

### Click on Website Customisation

Enter a full URL in the field labelled "Logo redirect URL (optional)"

{% endstep %}
{% endstepper %}

### 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.

```javascript
<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>
```

### Google Analytics for Embedded Loopit Websites

This guide explains how to enable Google Analytics tracking for an embedded Loopit website.

The embedded Loopit website supports **page view**, **conversion**, and **booking step view** events. A page view event is sent to the parent website’s Google Analytics every time the embedded site changes pages, including the initial load and internal navigation. Conversion events are triggered only when a key action is successfully completed, such as when the booking application submission process is finished. Booking step view events are sent each time the user lands on a step in the booking wizard. All events are tracked under the parent website’s GA property.

#### **What we send**

The embedded site sends events to the parent window using `postMessage`. Every message has this shape:

* **`type`:** Always **`GA_EVENT`**
* **`payload`:** An object containing the event name and event-specific fields

#### 1. Page view event

**When it fires:** On every page or URL change within the embedded site, including the initial load and any internal navigation.

| Field       | Type   | Description                                                                    |
| ----------- | ------ | ------------------------------------------------------------------------------ |
| `event`     | string | `page_view`                                                                    |
| `page_path` | string | Full path including query string (e.g. `/listings/123`, `/reservation?step=2`) |

#### 2. Conversion event

**When it fires:** Once when the user reaches the booking confirmation page and booking details have loaded successfully (after the application is submitted).

| Field      | Type   | Description          |
| ---------- | ------ | -------------------- |
| `event`    | string | `conversion`         |
| `category` | string | `Application`        |
| `label`    | string | `Submit Application` |

#### 3. Booking step view event

**When it fires:** Once each time the user lands on a step in the booking wizard.

| Field        | Type   | Description                                         |
| ------------ | ------ | --------------------------------------------------- |
| `event`      | string | `booking_step_view`                                 |
| `category`   | string | `Application`                                       |
| `label`      | string | Display name of the step (see allowed values below) |
| `visit_type` | string | `first_visit` or `revisit`                          |

**Allowed `label` values:** Personal details, Contacts, Eligibility, Add-ons, Driver's license, Identity Verification, Payment.

**`visit_type`:** `first_visit` = first time on this step in this session; `revisit` = user has been on this step before (e.g. went back and came forward again).

### How to integrate

1. **Add Google Analytics to Your Website**<br>

   Place the following  script in the `<head>` section of website **before** the iframe embed code.<br>

   ```html
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxx"></script>

   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){ dataLayer.push(arguments); }

     gtag('js', new Date());
     gtag('config', 'G-xxxx');
   </script>
   ```

   > 🔁 Replace `G-xxxx` with your own GA4 Measurement ID.

2. **Listen for Analytics Events from the Embedded Iframe**<br>

   Add the following script. This script listens for GA events sent from the embedded Loopit website.<br>

   ```js
   <script>
   window.addEventListener("message", (event) => {
     if (!event.data || !event.data.type) return;

     if (event.data.type === "GA_EVENT") {
       sendGAEvent(event.data.payload);
     }
   });
   </script>
   ```

3. **Send Events to Google Analytics**<br>

   Use the helper function below to forward iframe events to GA4.<br>

   ```javascript
   <script>
   function sendGAEvent(payload) {
     if (typeof window.gtag !== "function") {
       console.warn("Google Analytics not loaded");
       return;
     }

     if (!payload || !payload.event) return;

     const { event, page_path, category, label, value, ...rest } = payload;

     // Track page views
     if (event === "page_view") {
       window.gtag("event", "page_view", {
         page_path: page_path,
         ...rest,
       });
       return;
     }

     // Track conversion or booking_step_view events
     window.gtag("event", event, {
       event_category: category,
       event_label: label,
       value: value,
       ...rest,
     });
   }
   </script>
   ```