Flows Popup Listener

This library allows you to listen for popup events on a specified site and handle them accordingly.

Installation

To install the library, use npm or yarn:

npm install flowswave

or

yarn add flowswave

or use direct in html file

<script src="./js/browser/flowswave.js"></script>
<script>
  // Initialize the popup script
  FlowsWave.init("https://your-base-url");

  // Start listening for popups
  FlowsWave.startListeningPopupsForSite("siteId", "accountId", "en");
</script>

Usage

Initialization

Before you start listening for popup events, you need to initialize the library with the base URL of your server:

import { init } from "flowswave";

init("https://example.com");

You can also provide a nonce key for additional security with Content Security Policy:

import { init } from "flowswave";

init("https://example.com", "your-csp-nonce");

Start Listening for Popups

To start listening for popup events on a specific site, use the startListeningPopupsForSite function. You can optionally provide a user ID and language:

import { startListeningPopupsForSite } from "flowswave";

startListeningPopupsForSite("site123");
startListeningPopupsForSite("site123", "en");
startListeningPopupsForSite("site123", "account123");
startListeningPopupsForSite("site123", "account123", "en");
startListeningPopupsForSite("site123", "account123", "en", 2000);

Stop Listening for Popups

To stop listening for popup events, use the stopListeningToPopupEvents function:

import { stopListeningToPopupEvents } from "flowswave";

stopListeningToPopupEvents("site123", "account123");

Example

Here is a complete example of how to use the library:

import {
  init,
  startListeningPopupsForSite,
  stopListeningToPopupEvents,
} from "flowswave";

// Initialize the library with the base URL
init("https://example.com");

// Start listening for popup events on a specific site
startListeningPopupsForSite("site123", "account123", "en");

// Start listening for popup events on a specific site with closing delay of 3s
startListeningPopupsForSite("site123", "account123", "en", 3000);

// Stop listening for popup events
stopListeningToPopupEvents("site123", "account123");

React and Next.js Integration

For React and Next.js applications, you can integrate the library using dynamic imports:

import { useEffect } from 'react';

function YourComponent(props) {
  useEffect(() => {
    const initiateFlowswave = async () => {
      const startListeningPopupsForSite = (await import("flowswave"))
        .startListeningPopupsForSite;

      const init = (await import("flowswave")).init;

      const flowsWaveSiteId = "siteId";

      init("https://api.flowswave.world", props.nonce ?? undefined);
      startListeningPopupsForSite(flowsWaveSiteId);
    };

    initiateFlowswave();

    // Cleanup function for when component unmounts
    return () => {
      const cleanup = async () => {
        const stopListeningToPopupEvents = (await import("flowswave"))
          .stopListeningToPopupEvents;

        const flowsWaveSiteId = "siteId";
        stopListeningToPopupEvents(flowsWaveSiteId);
      };

      cleanup();
    };
  }, []);

  return (
    // Your component JSX
  );
}

API

init(url: string, nonceKey?: string)

Initializes the library with the base URL of your server.

• url: The base URL of your server.
• nonceKey: (Optional) The CSP nonce key for script elements created by the library.

startListeningPopupsForSite(siteId: string, accountId?: string | null, lang?: string | null)

Starts listening for popup events on a specific site.

• siteId: The ID of the site.
• accountId: (Optional) The ID of the user.
• lang: (Optional) The language of the popups.
• delay: (Optional) Time in milliseconds to wait before closing the popup, if not provided the popup wont close automatically.

stopListeningToPopupEvents(siteId: string, accountId?: string | null)

• siteId: The ID of the site.
• accountId: (Optional) The ID of the user.

Stops listening for popup events.

Author

Antoine Duhesme: Front end developer @ Flows