# Landing Controls

## Overview
**Landing Controls** is a lightweight TypeScript library that provides a set of utility functions for enhancing your landing pages. The library appends functions to the `window.lmControls` object, allowing easy integration of modal functionality, animations, scroll interactions, and more. These functions work by targeting pre-defined class names or IDs, making it simple to create dynamic and interactive elements on your website.

## Features
- **Add GTM**: Dynamically adds a Google Tag Manager (GTM) script to your page.
- **Copyright Footer with UTM Tracking**: Dynamically appends a copyright footer to your landing page with a link back to LeadMetrics, including UTM parameters for campaign tracking.
- **FAQ Initialization (`initFaq`)**: Dynamically generates an FAQ section on the page with expandable/collapsible items.
  - Takes a list of FAQ items with questions and answers, as well as options for customizing the title and icon.
  - Supports generating a structured data schema (JSON-LD) for SEO, ensuring FAQs are search-engine-friendly.
  - Includes interactive toggle behavior for expanding and collapsing FAQ answers. FAQ answers.
- **Modal Creation**: Dynamically creates modals with customizable content and event listeners for activation.
- **GSAP Scroll Trigger Animations**: Pre-configured animations triggered by scrolling, using GSAP.
  - This library checks if the client project has GSAP and ScrollTrigger appended to the `window` object. If they are available, the GSAP functions in the library will execute. Otherwise, it logs a message to the console indicating the missing dependencies.
- **Call Button**: Creates a clickable element that opens a phone dialer (`tel:`) with the specified number.
- **Scroll to Top**: Adds a button to scroll smoothly to the top of the page.
- **WhatsApp Button**: Generates a button that opens WhatsApp for the specified number.
- **Sticky Banner**: Displays a customizable sticky banner at the top of the page that can include text and a button linking to a specified URL.

## Methods
#### 1. `initScrollToTop(backgroundColor: string, color: string)`
This method dynamically creates a "Scroll to Top" button that appears when the user scrolls down the page. Upon clicking the button, the page scrolls smoothly back to the top.

**Features**:
- The button is hidden by default and becomes visible when the user scrolls 300px or more down the page.
- Smooth scrolling behavior for better user experience.
- Customizable appearance with options to set the background color and text color.

**Parameters**:
- `backgroundColor`: (string) The background color of the "Scroll to Top" button. Defaults to `#007bff` if not provided.
- `color`: (string) The text color of the button. Defaults to `#fff` if not provided.

**Usage**:
In your client project, simply call the function with your preferred colors:

```javascript
window.lmControls.initScrollToTop("#4f7f8b", "#fff");
```

#### 2. `initModal(title: string, message: string, color: string, buttonLink: string, buttonText: string, showModal: boolean = false)`
This method dynamically creates a modal element on the page, allowing developers to easily display modals with customizable content and actions.

**Features**:
- Creates a modal with a title, message, and optional action button.
- Customizable colors, button text, and modal visibility.
- Automatically attaches event listeners for button clicks to perform the desired actions (e.g., redirect or close the modal).
- Graceful fallback to a close button if no `buttonLink` is provided.

**Parameters**:
- `title`: (string) The title of the modal. Defaults to `"Thank You!"` if not provided.
- `message`: (string) The message content of the modal. Defaults to `"We will contact you soon"`.
- `color`: (string) The color used for the title and buttons. Defaults to `"#0275d8"`.
- `buttonLink`: (string) URL to redirect when the action button is clicked. If not provided, a close button is shown instead.
- `buttonText`: (string) Text displayed on the action button. Defaults to `"Go to Home"`.
- `showModal`: (boolean) Whether to immediately display the modal. Defaults to `false`.

**Usage**: 

```javascript
lmControls.initModal(
  "Welcome!",
  "Thank you for visiting our website.",
  "#4f7f8b",
  "https://example.com",
  "Learn More",
  true
);
```

**Required HTML Structure**:
To ensure the modal functions properly, include the following HTML in your client project:


```html
<div id="customModal">
  <div>
    <button id="closeButton" title="Close">
      <img src="./images/close.png" alt="close" class="w-7" />
    </button>
    <h2 id="modalTitle"></h2>
    <p id="modalMessage"></p>
    <div>
      <button id="modalButton"></button>
    </div>
  </div>
</div>
```


#### 3. `initCallButton(phoneNumber: string, backgroundColor: string, icon: string)`
This method dynamically creates a call button on the page, enabling users to make a phone call directly by clicking the button.

**Features**:
- Creates a button with a customizable background color and an optional icon.
- On click, redirects the user to call the specified phone number using the `tel:` protocol.
- Easy to implement and customize for client websites.

**Parameters**:
- `phoneNumber`: (string) The phone number to call when the button is clicked.
- `backgroundColor`: (string) The background color of the button. Defaults to `"#28a745"`.
- `icon`: (string) The URL of the icon to display on the button. Defaults to a standard call icon.


**Usage**:
To create and use a call button, call the function with the desired parameters. For example:

```javascript
lmControls.initCallButton(
  "+1234567890",
  "#4f7f8b",
  "https://example.com/custom-icon.png"
);
```

#### 4. `initWhatsAppButton(whatsappNumber: string, backgroundColor: string, icon: string)`
This method dynamically creates a WhatsApp button on the page, allowing users to open a chat with a specified WhatsApp number.

**Features**:
- Creates a button with a customizable background color and an optional icon.
- On click, opens a new tab or window to start a WhatsApp chat with the specified number.
- Fully customizable and easy to integrate into client websites.

**Parameters**:
- `whatsappNumber`: (string) The WhatsApp number to chat with. The number should include the country code (e.g., `+1234567890`).
- `backgroundColor`: (string) The background color of the button. Defaults to `"#25d366"` (WhatsApp's signature green color).
- `icon`: (string) The URL of the icon to display on the button. Defaults to a standard WhatsApp icon.

**Usage**:
To create and use a WhatsApp button, call the function with the desired parameters. For example:

```javascript
lmControls.initWhatsAppButton(
  "+1234567890",
  "#4f7f8b",
  "https://example.com/custom-whatsapp-icon.png"
);
```
#### 5. `initStickyBanner(options: IStickyBanner)`
This method dynamically creates a customizable sticky banner that is displayed at the top of the page. The banner contains text and an optional button with a link, styled to match your desired theme.

**Features**:
- Automatically appends a sticky banner to the page if `showBanner` is set to `true`.
- Fully customizable background color, text, button text, and button styles.
- The banner appears inside the `header` element, creating or appending to it as necessary.

**Parameters**:
The method accepts an object of type `IStickyBanner` with the following properties:
- `text`: (string) The text to display on the banner. Defaults to `"This is a sticky banner"`.
- `buttonText`: (string) The text to display on the button. Defaults to `"Learn More"`.
- `buttonLink`: (string) The URL the button should link to. If not provided, no button is added.
- `backgroundColor`: (string) The background color of the banner. Defaults to `"#fff"`.
- `textColor`: (string) The text color of the banner. Defaults to `"#000"`.
- `buttonBackgroundColor`: (string) The background color of the button. Defaults to `"#007bff"`.
- `buttonTextColor`: (string) The text color of the button. Defaults to `"#fff"`.
- `showBanner`: (boolean) Determines whether the banner should be shown. Defaults to `false`.

**Usage**:
To display a sticky banner, call the method with the appropriate options. For example:

```javascript
lmControls.initStickyBanner({
  text: "Welcome to our website!",
  buttonText: "Click Here",
  buttonLink: "https://example.com",
  backgroundColor: "#f4f4f4",
  textColor: "#333",
  buttonBackgroundColor: "#ff5733",
  buttonTextColor: "#fff",
  showBanner: true,
});
```

#### 6. `gsapAnim()`
This method enables animations using GSAP (GreenSock Animation Platform) and ScrollTrigger. It checks if GSAP and ScrollTrigger are available on the `window` object of the client project, and if so, it initializes the animations accordingly. The animations target elements with custom attributes for scroll animations and movable buttons.

**Features**:
- Automatically detects and integrates GSAP and ScrollTrigger if they are loaded.
- Animates elements with the `lm-scroll-animation` attribute when they are scrolled into view.
- Supports scroll-based animations on the y-axis with customizable trigger points and distances.
- Adds an interactive effect on buttons with the `lm-movable-button` attribute that allows them to move based on mouse movements.

**Usage**:
Call this method to initialize GSAP animations in your project. The method will automatically detect if GSAP and ScrollTrigger are available and apply the animations.

```javascript
lmControls.gsapAnim();
```

#### 7. initFaq()  
This method dynamically generates an FAQ section on the page with expandable/collapsible items. It also supports generating structured data (JSON-LD) for SEO, making FAQs search-engine-friendly.

### Features:
- Dynamically creates an FAQ section from an array of questions and answers.
- Supports customization of the FAQ title and toggle icon.
- Generates structured data (JSON-LD) for FAQs to improve SEO.
- Includes interactive toggle behavior for expanding and collapsing FAQ answers.

### Usage:
From the landing-sdk fetch the faq data and pass it as arguments into the initFaq(); 

Call this method with a configuration object to initialize the FAQ section on your page.


**Required HTML Structure**:
To ensure the modal functions properly, include the following HTML in your client project:

```html
<div class="faq-main-container">
  <h2 class="faq-title"></h2>
  <ul class="faq-items-container"></ul>
</div>
```


```javascript
document.addEventListener("DOMContentLoaded", async() => {

    async function getFAQ() {

        const faq = await lm.getFaq(slug); // from landing-sdk
        return faq;
    }
    const faqData = await getFAQ();

    lmControls.initFaq({
      faq: faqData.items,
      title: "Faq title", 
      icon: "icon_path", 
      addSchema: false
    });

});

```

## GTM Integration

There are two key functions under the **GTM** integration:

1. **`addGTM(tagId)`**: Dynamically adds the Google Tag Manager (GTM) script to your landing page using the provided GTM tag ID.
2. **`setCopyRightWithUTM(currentUrl, campaignName)`**: Appends a footer with a link back to LeadMetrics, using the provided `currentUrl` and `campaignName`.

#### 1. `addGTM(tagId)`

The `addGTM()` function allows you to add the Google Tag Manager (GTM) script to your page by passing the GTM tag ID.

##### Usage Example:

```javascript
// Add Google Tag Manager (GTM) with your GTM tag ID
lmControls.addGTM("GTM-NJDQ8CN8");
```

#### 2. `setCopyRightWithUTM(currentUrl: string, campaignName: string)`

The `setCopyRightWithUTM()` function appends a footer with a link back to LeadMetrics, using the provided `currentUrl` and `campaignName`.

It takes two arguments:
- **`currentUrl`**: The URL of the website.
- **`campaignName`**: The unique identifier for the campaign.

##### Usage Example:

```javascript
// Append a copyright footer with UTM parameters for tracking
lmControls.setCopyRightWithUTM(
  "https://example.com",           // The current website URL
  "form-teaminfra-campaign"       // The campaign name
);
```