JS API – window.w2w object

Table of Contents

• UI Methods
  • showToast
  • hideToast
  • showFullscreenOverlay
  • copyToClipboard
• Analytics Methods
  • logEvent
  • setUserProperty
  • setUserProperties
  • onEvent
• Navigation Methods
  • moveToNextScreen
  • moveToScreen
  • moveToPreviousScreen

UI Methods

showToast

Shows a toast notification message to the user.

Syntax:

w2w.showToast(message, type, time)

Parameters:

• message (string): The message text to display in the toast
• type (string, optional): The type of toast. Default: 'success'. Available types: 'success', 'error'
• time (number, optional): Duration in seconds to show the toast. Default: 10

Example:

// Show success toast for 5 seconds
w2w.showToast("Operation completed successfully!", "success", 5);

// Show error toast with default duration
w2w.showToast("Something went wrong", "error");

// Show default toast
w2w.showToast("Hello World!");

Notes:

• The toast will automatically hide after the specified time
• Line breaks in the message (\n) are converted to HTML <br> tags
• Logs a 'Show toast' analytics event

hideToast

Manually hides the currently displayed toast notification.

Example:

// Hide any currently displayed toast
w2w.hideToast();

showFullscreenOverlay

Displays a fullscreen overlay with custom HTML content.

Syntax:

w2w.showFullscreenOverlay(html, time, callback)

Parameters:

• html (string): The HTML content to display in the overlay
• time (number, optional): Duration in seconds to show the overlay. Default: 3
• callback (function|string, optional): Function to execute when overlay closes, or function string to evaluate

Example:

// Show overlay for 5 seconds with callback
w2w.showFullscreenOverlay(
  "<h1>Welcome!</h1><p>This is a fullscreen message</p>",
  5,
  function() {
    console.log("Overlay closed");
  }
);

// Show overlay with default duration
w2w.showFullscreenOverlay("<div class='loading'>Loading...</div>");

copyToClipboard

Copies text to the user's clipboard.

Syntax:

w2w.copyToClipboard(text, callback)

Parameters:

• text (string): The text to copy to clipboard
• callback (function, optional): Function to execute after successful copy

Example:

// Copy with callback
w2w.copyToClipboard("Hello World!", function() {
  console.log("Text copied successfully!");
});

// Copy without callback
w2w.copyToClipboard("Some text to copy");

Analytics Methods

logEvent

Logs an analytics event using the AnalyticsManager.

Syntax:

w2w.logEvent(event, event_properties)

Parameters:

• event (string): The name of the event to log
• event_properties (object, optional): Additional properties/data associated with the event

Example:

// Log simple event
w2w.logEvent("Button Clicked");

// Log event with properties
w2w.logEvent("Purchase Completed", {
  product_id: "123",
  price: 29.99,
  currency: "USD"
});

setUserProperty

Sets a user property for analytics tracking.

Syntax:

w2w.setUserProperty(key, value, callback)

Parameters:

• key (string): The property name
• value (any): The property value
• callback (function, optional): Function to execute after setting the property

Example:

// Set user property with callback
w2w.setUserProperty("user_level", "premium", function() {
  console.log("Property set successfully");
});

// Set user property without callback
w2w.setUserProperty("last_login", new Date().toISOString());

setUserProperties

Sets multiple user properties at once for analytics tracking.

Syntax:

w2w.setUserProperties(properties, callback)

Parameters:

• properties (object): An object containing key-value pairs of properties to set
• callback (function, optional): Function to execute after all properties are set

Example:

// Set multiple user properties with callback
w2w.setUserProperties({
  user_level: "premium",
  subscription_type: "annual",
  favorite_color: "blue",
  age: 25
}, function() {
  console.log("All properties set successfully");
});

// Set multiple properties without callback
w2w.setUserProperties({
  last_login: new Date().toISOString(),
  visit_count: 5,
  has_purchased: true
});

Notes:

• This method is more efficient than calling setUserProperty multiple times
• All properties are sent in a single batch request to the backend
• The method updates analytics platforms including Amplitude, PostHog, and Mixpanel
• Properties with key 'email' are handled specially and stored in a cookie

onEvent

Registers an event listener for analytics events.

Syntax:

w2w.onEvent(eventName, callback)

Parameters:

• eventName (string): The name of the event to listen for
• callback (function): The function to execute when the event is triggered

Example:

// Listen for purchase events
w2w.onEvent("Purchase", function(eventProperties) {
  console.log("Purchase detected:", eventProperties);
});

// Listen for page view events
w2w.onEvent("PageView", function(eventProperties) {
  console.log("Page viewed:", eventProperties);
});

Navigation Methods

moveToNextScreen

Moves to the next screen in the application flow.

Example:

// Move to the next screen
w2w.moveToNextScreen();

moveToScreen

Moves to a specific screen by its ID.

Syntax:

w2w.moveToScreen(screen_id)

Parameters:

• screen_id (string): The ID of the screen to navigate to

Example:

// Move to screen with ID "welcome"
w2w.moveToScreen("welcome");

// Move to screen with ID "section1"
w2w.moveToScreen("section1");

moveToPreviousScreen

Moves to the previous screen in the application flow.

Example:

// Move to the previous screen
w2w.moveToPreviousScreen();

Usage Notes

• All methods are available globally through the w2w object
• The object integrates with the application's analytics system (AnalyticsManager)
• Navigation methods work with the application's screen management system
• Toast and overlay methods manipulate DOM elements with specific IDs (toast, fullscreen-overlay)