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:

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:

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:

<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:

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:

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:

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.

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:

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

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:

// 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:

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