npm package: @signitsa/signitsa-embedded
Description: Embed Signit signature requests from within your web application.
Author: Signit
Latest version: 1.2.1

# Signit Embedded

> Embed [Signit][external_signit] signature requests and templates from within your web application.

[![Npm version][badge_npm-version]][external_npm]
[![Npm downloads][badge_npm-downloads]][external_npm]
[![Npm minified][badge_npm-minified]][external_npm]

<br/>

## Usage

> The instructions below are for Signit Embedded.

Start by installing the Signit Embedded library from [npm](https://npmjs.com).

- Via npm:

```shell
npm install @signitsa/signitsa-embedded
```

- Via yarn:

```shell
yarn add @signitsa/signitsa-embedded
```

- Via pnpm:

```shell
pnpm add @signitsa/signitsa-embedded
```

- using jsDelivr:

If you prefer to load the library via CDN, you can use [jsDelivr](https://www.jsdelivr.com/).

```html
<script src="https://cdn.jsdelivr.net/npm/@signitsa/signitsa-embedded"></script>
```

- using unpkg:

Alternatively, you can also load the library from [unpkg](https://unpkg.com/):

```html
<script src="https://unpkg.com/@signitsa/signitsa-embedded"></script>
```

## In app usage

In your frontend app, import `@signitsa/signitsa-embedded` and instantiate a new client with your API app's client ID.

```js
import SignitEmbedded from '@signitsa/signitsa-embedded';

// Create the Signit Embedded instance.
// Only do this once!
const client = new SignitEmbedded({
  clientId: 'Your client ID',
  debug: true,
  locale: SignitEmbedded.locales.EN_US,
  // Add other configuration options as needed
});
```

When you're ready to launch Signit Embedded, simply call `open()` on the client with your signature request's signing URL.

```js
function launchSignitEmbedded(url) {
  client.open(url, options);
}

launchSignitEmbedded(url);
```

## Usage with CDN

After including the library via CDN (jsDelivr or unpkg), you can use `SignitEmbedded` directly in your JavaScript. Here's a breakdown of how to set it up if you are using the package with a CDN.

### Step 1: Add the CDN Script Tag

Add the `SignitEmbedded` script from jsDelivr or unpkg in your HTML file, ideally at the end of the `<body>` tag to ensure it loads after the rest of your HTML:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SignitEmbedded Example</title>
  </head>
  <body>
    <!-- SignitEmbedded library (from jsDelivr or unpkg) -->
    <script src="https://cdn.jsdelivr.net/npm/@signitsa/signitsa-embedded"></script>
    <!-- OR use unpkg if preferred -->
    <!-- <script src="https://unpkg.com/@signitsa/signitsa-embedded"></script> -->

    <!-- Initialize SignitEmbedded -->
    <script>
      // Step 2: Initialize SignitEmbedded after the script loads
      document.addEventListener('DOMContentLoaded', function () {
        // Access SignitEmbedded from the global window object
        const client = new window.SignitEmbedded.default({
          clientId: YOUR_CLIENT_ID,
          allowCancel: true,
          debug: false,
          hideHeader: false,
          timeout: 999999,
          // Add other configuration options as needed
        });
        client.open(EMBEDDED_URL, {
          whiteLabeling: {
            theme: {
              lightPrimary: 'green',
              darkPrimary: 'blue',
            },
          },
          // Add other configuration options as needed
        });
      });
    </script>
  </body>
</html>
```

### Explanation

1. **Script Tag Inclusion**: The `<script src="...">` tag loads the `SignitEmbedded` library from the specified CDN (either jsDelivr or unpkg). This makes the library accessible globally through the `window` object.

2. **DOMContentLoaded Event**: The `DOMContentLoaded` event listener ensures that the script initializes only after the HTML content has fully loaded. This prevents issues where the library might attempt to access elements that haven't rendered yet.

3. **Accessing `SignitEmbedded`**: When loading from a CDN, `SignitEmbedded` is available on the `window` object (e.g., `window.SignitEmbedded`). You can use this to create a new instance and configure it with options like `clientId`.

For more information on how to use Signit Embedded, visit the [API Documentation][spotlight_api-documentation].

## Support

If you have any questions or issues with Signit Embedded or our API, please contact [hala@signit.sa](mailto:hala@signit.sa?subject=Help%20with%20Signit%20Embedded).

## Resources

- [Quickstart][spotlight_quickstart]
- [API Documentation][spotlight_api-documentation]
- [Changelog][changelog]

<br/>
<br/>
<hr/>

&copy; 2024 [Signit][external_signit]. All rights reserved.

[changelog]: https://github.com/signitsa/signitsa-embedded/blob/main/CHANGELOG.md
[badge_npm-version]: https://img.shields.io/npm/v/@signitsa/signitsa-embedded.svg
[badge_npm-downloads]: https://img.shields.io/npm/dm/@signitsa/signitsa-embedded.svg
[spotlight_home]: https://signit.stoplight.io/
[spotlight_api-documentation]: https://signit.stoplight.io/
[spotlight_quickstart]: https://signit.stoplight.io/docs/signit-embedded/c8mq1wpsysldo
[external_signit]: https://signit.sa/en/
[external_npm]: https://www.npmjs.com/package/@signitsa/signitsa-embedded
[badge_npm-minified]: https://img.shields.io/bundlejs/size/@signitsa/signitsa-embedded