# Embedding and authorizing a web widget in your own application
# **Integrating an external system and quick login**

Please read the overview of the integration logic described in the article first ([https://support.swarmica.com/article/ru/557-ru.html](https://support.swarmica.com/article/ru/557-ru.html)).

:::caution
IMPORTANT: This document provides examples of OTP_CODE_KEY and API key.

When going to production, you will need to change the cipher (OTP_CODE_KEY) and API key used for integration.
:::

## **System setup (once/as needed)**

Setting up the system, both Swarmica and the external system being integrated (your application), is done once (or reconfigured as needed).

### On the Swarmica side:

1. **On the server**: You need to set up a secret key for the cipher and the maximum allowed time deviation in the timestamp and connect the authorization provider code: To do this, set the variables in `/root/swarmica/.env`:

```txt
root@swarmica# grep -i code .env
AUTH_PROVIDERS=email,code
OTP_CODE_KEY=E655633B-2FAB-4661-9637-EXAMPLE
OTP_CODE_TIMESTAMP_DELTA=120
```

The parameter *OTP_CODE_TIMESTAMP_DELTA* is the lifespan of the generated link for user authorization in seconds. For example and testing, this parameter is set to 120 seconds; for production, it is recommended to set it to a few seconds (5-10).

The parameter *OTP_CODE_KEY* is a secret key used for encrypting/decrypting authorization data. After completing the development, it is recommended to replace the key.

Restart the system:

```txt
cd /root/swarmica
docker compose down
docker compose up -d
```

1. **In the Swarmica app (Administrator rights required)**: Create an API key that will be used by the backend of the integrated system in **Settings > API Integration**. It will look like this: `EXAMPLE-cdc6-4be4-a31d-1cf0aa129b99`

On the side of the integrated system (billing or panel):

1. Prepare the code to work with the Swarmica API.
2. Write down in configurable variables:
   - Code for the cipher (same as OTP_CODE_KEY above): E655633B-2FAB-4661-9637-EXAMPLE
   - API key: `EXAMPLE-cdc6-4be4-a31d-1cf0aa129b99`
   - Template HTML code for embedding the widget with OTP settings [https://support.swarmica.com/article/ru/599-vstraivaemyj-veb-vidzhet.html](https://support.swarmica.com/article/ru/599-vstraivaemyj-veb-vidzhet.html)

Example widget code:

```html
<!-- start embedded Swarmica widget script -->
<iframe src="https://support.yourdomain.tld/widgets/index.html?id=veNilW0QFQhTq2hg&locale=en&otpdata=URLENCODED_ДАННЫЕ_СМ_ДАЛЕЕ" id="veNilW0QFQhTq2hg" style="position: fixed; right: 12px; bottom: 12px; width: 56px; height: 56px; overflow: hidden; "
  allowTransparency="true"
  frameborder="0"
  allowTransparency="true" frameborder="0"></iframe>
<script src="https://support.yourdomain.tld/widgets/render.js"></script>
<script>
  const iframe = document.getElementById("veNilW0QFQhTq2hg")
  iframe.onload = () => {
    renderWidget("veNilW0QFQhTq2hg")
  }
</script>
<!-- end embedded Swarmica widget scripts -->
```

## **Receiving a code for the user (when registering / authorizing the user in your application)**
...