JSPM

ui-modal-and-timeout

1.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q24695F
  • License MIT

Introducing a marketing npm module: Display modals on timeout or when the user moves the mouse upwards to close the browser window.

Package Exports

  • ui-modal-and-timeout
  • ui-modal-and-timeout/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ui-modal-and-timeout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

The trackUserBehavior function takes two arguments:

htmlTemplate: A string containing the HTML template for the modal. timeInSeconds: The time in seconds after which the modal should appear if the user hasn't triggered it by moving the mouse upward. The function creates a modal using the provided HTML template and attaches event listeners to track user behavior. The modal will be displayed as soon as the user moves the mouse towards the top of the page or when the specified time has passed.

The example usage at the end demonstrates how to use the trackUserBehavior function with a custom HTML template and a time of 10 seconds. You can modify the htmlTemplate and timeInSeconds variables to suit your specific needs.

Modal Marketing Module

This npm module provides a powerful marketing tool to display modals based on specific triggers. The module allows you to create custom HTML templates for the modals and set the time (in seconds) after which the modal should appear if the user hasn't triggered it by moving the mouse upwards.

Installation

Install ui-modal-and-timeout with npm

  npm i ui-modal-and-timeout

How to use

const htmlTemplate = "
  <div class="modal">
    <h2>Provide your Email and Phone Number</h2>
    <form id="contactForm">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <br>
      <label for="phone">Phone Number:</label>
      <input type="tel" id="phone" name="phone" required>
      <br>
      <button type="submit">Submit</button>
    </form>
  </div>
";

You may invoke the method by following ways:

const timeInSeconds = 10; // Replace with the desired time in seconds
trackUserBehavior(htmlTemplate, timeInSeconds);

The trackUserBehavior function takes two arguments:

1-- htmlTemplate: A string containing the HTML template for the modal.

2-- timeInSeconds: The time in seconds after which the modal should appear if the user hasn't triggered it by moving the mouse upward.

The function creates a modal using the provided HTML template and attaches event listeners to track user behavior. The modal will be displayed as soon as the user moves the mouse towards the top of the page or when the specified time has passed.

The example usage at the end demonstrates how to use the trackUserBehavior function with a custom HTML template and a time of 10 seconds. You can modify the htmlTemplate and timeInSeconds variables to suit your specific needs.

Authors