Components SDK

Overview

ComponentRegister is a static class that tracks and manages TryNow custom web components used on a page. It provides methods for registering, retrieving, and monitoring the loading of components. It's accessible via window.trynow.components.

Properties

Property	Type	Description
`ctaButton`	`TryNowCtaButton`	Reference to the TryNow call-to-action button component
`toggle`	`GatedFlowToggle`	Reference to the gated flow toggle component
`hiwModal`	`HowItWorksModal`	Reference to the "How It Works" modal component
`faq`	`FrequentlyAskedQuestions`	Reference to the FAQ component
`howItWorks`	`HowItWorks`	Reference to the "How It Works" component

Methods

`setComponent(name: SdkComponent, component: any): void`

Registers a component with the ComponentRegister.

Parameters

Parameter	Type	Description
`name`	`SdkComponent`	The name of the component to register
`component`	`any`	The component instance to register

Returns

void - This method doesn't return a value.

Example

window.trynow.components.setComponent(SdkComponent.CTAButton, tryNowCtaButtonInstance);

`getComponent(componentName: string): Promise<any>`

Asynchronously retrieves a component by name. Waits for the component to be available for up to 5 seconds.

Parameters

Parameter	Type	Description
`componentName`	`string`	The name of the component to retrieve

Returns

Promise<any> - A promise that resolves to the requested component instance.

Example

// Get the TryNow CTA button component
window.trynow.components.getComponent('ctaButton')
  .then(button => {
    console.log('Retrieved TryNow button:', button);
    // Customize or interact with the button
  })
  .catch(error => {
    console.error('Failed to get TryNow button:', error);
  });

`onLoad(componentName: string, callback: () => void): void`

Registers a callback to be executed when the specified component is loaded or registered.

Parameters

Parameter	Type	Description
`componentName`	`string`	The name of the component to monitor for loading
`callback`	`() => void`	The function to execute once the specified component is loaded

Returns

void - This method doesn't return a value.

Example

// Register a callback for when the CTA button is loaded
window.trynow.components.onLoad('ctaButton', () => {
  console.log('TryNow CTA button has been loaded!');
  // Perform actions with the button now that it's available
  const button = window.trynow.components.ctaButton;
  // Customize button appearance or behavior
});

Usage Notes

The ComponentRegister is primarily used internally by the TryNow SDK to manage component instances.
When creating custom implementations, you can use getComponent() to access specific components for customization.
The onLoad() method is useful for executing code that depends on a specific component being available.
Component names must be valid SdkComponent enum values, otherwise an error will be logged.
The getComponent() method will reject with an error if the component is not found within 5 seconds.
Components are typically registered automatically during SDK initialization.

Available Component Names

The following component names can be used with getComponent() and onLoad():

ctaButton - The TryNow call-to-action button
toggle - The gated flow toggle
hiwModal - The "How It Works" modal
faq - The Frequently Asked Questions component
howItWorks - The "How It Works" component