# Sync Widget

User friendly web interface to make use of Syncfy services.

# Quick Start

## Installation

Syncfy authentication widget can be installed via npm. It is recommended to get Syncfy authentication widget this way.

```
npm install --save @syncfy/authentication-widget
```

**Note**: You'll need to have npm 2.7.0 or greater installed, since this library is hosted as a [scoped package](https://docs.npmjs.com/getting-started/scoped-packages).

## Integration

### Using bundlers (Webpack)

Import styles

```
import "@syncfy/authentication-widget/dist/syncfy-authentication-widget.css";
```

Import SyncfyWidget class

```
import SyncfyWidget from "@syncfy/authentication-widget";
```

## Usage

### Creating an instance

To create an instance of SyncfyWidget, you need to create an element in the DOM with a unique selector. By default SyncfyWidget will search for "#widget". Here's an example.

```
<div id="widget"></div>
```

Once you have the element, you're ready to instantiate a new SyncfyWidget with your desired configuration.

```
// Any of the following formats may be used

var syncfyWidget = new SyncfyWidget("syncfy_token");

var syncfyWidget = new SyncfyWidget({
        token: "syncfy_token"
    });

var syncfyWidget = new SyncfyWidget({
        token: "syncfy_token",
        element: "#widget",
        config: {
            locale: "es",
            entrypoint: {
                country: "MX"
            }
        }
    });

```

## ⚠️ Environment Compatibility

If you are using modern build tools (like Vite in Angular 16+ or Next.js), you may encounter a ReferenceError: global is not defined. This happens because modern environments do not include Node.js polyfills by default.
To resolve this, add the following shim to your project's entry point (e.g., polyfills.ts, main.ts, or layout.tsx):

```
// Fix for "global is not defined"

if (typeof global === 'undefined') {
  (window as any).global = window;
}
```